/* ============================================================
   星火社团 · 基础层 base.css
   目录：1 设计令牌 / 2 Reset / 3 排版 / 4 工具类
   ============================================================ */

/* ---------- 1. 设计令牌 Design Tokens ---------- */
:root{
  /* 主色板 */
  --c-primary:#2B5CE6;
  --c-primary-600:#1E42A8;
  --c-primary-100:#EAF0FF;
  --c-accent:#FF7A2F;
  --c-accent-100:#FFF1E8;
  --c-mint:#12B886;
  /* 中性色 */
  --c-ink:#0F172A;
  --c-text:#334155;
  --c-muted:#64748B;
  --c-line:#E2E8F0;
  --c-surface:#FFFFFF;
  --c-bg:#F6F8FC;
  /* 语义色 */
  --c-success:#16A34A;
  --c-warning:#F59E0B;
  --c-danger:#DC2626;
  /* 字体 */
  --font-sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  /* 字号阶梯（clamp 天然响应式） */
  --fs-h1:clamp(1.75rem,1.2rem + 2.2vw,3rem);
  --fs-h2:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-lg:1.125rem;
  --fs-base:1rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;
  /* 间距 8pt 栅格 */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  /* 圆角 / 阴影 */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-full:999px;
  --sh-1:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.06);
  --sh-2:0 6px 18px rgba(15,23,42,.08);
  --sh-3:0 16px 40px rgba(15,23,42,.14);
  /* 布局 */
  --container:1200px;
  --gutter:1.5rem;
  --header-h:4.5rem;
  --ease:cubic-bezier(.4,0,.2,1);
  --z-header:100; --z-drawer:200; --z-lightbox:300;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (max-width:767px){html{font-size:15px}}
body{margin:0;font-family:var(--font-sans);color:var(--c-text);background:var(--c-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
/* 防横向滚动 */
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
img,picture,video,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure,dl,dd{margin:0}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
::selection{background:var(--c-primary-100);color:var(--c-primary-600)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 3. 排版 ---------- */
h1{font-size:var(--fs-h1);line-height:1.25;color:var(--c-ink);font-weight:700}
h2{font-size:var(--fs-h2);line-height:1.3;color:var(--c-ink);font-weight:700}
h3{font-size:var(--fs-h3);line-height:1.4;color:var(--c-ink);font-weight:600}
.lead{font-size:var(--fs-lg);color:var(--c-muted)}
.hl{color:var(--c-primary)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);font-weight:600;color:var(--c-accent);background:var(--c-accent-100);padding:.375rem .875rem;border-radius:var(--r-full)}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.prose p{margin-bottom:var(--sp-4);line-height:1.85}
.prose h3{margin:var(--sp-6) 0 var(--sp-3)}
.prose ul{list-style:disc;padding-left:1.25rem;margin-bottom:var(--sp-4)}
.prose li{margin-bottom:var(--sp-2);line-height:1.8}

/* ---------- 4. 工具类 ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--sp-4);top:-4rem;z-index:999;background:var(--c-primary);color:#fff;padding:.625rem 1.25rem;border-radius:0 0 var(--r-sm) var(--r-sm);transition:top .2s var(--ease)}
.skip-link:focus{top:0}
.section{padding:var(--sp-8) 0}
@media (max-width:767px){.section{padding:var(--sp-7) 0}}
.section-tint{background:linear-gradient(180deg,#fff 0%,var(--c-primary-100) 100%)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap}
.section-head h2{font-size:var(--fs-h2)}
.section-sub{color:var(--c-muted);font-size:var(--fs-sm);margin-top:var(--sp-2)}
.link-more{font-size:var(--fs-sm);font-weight:600;color:var(--c-primary);white-space:nowrap}
.link-more:hover{color:var(--c-primary-600);text-decoration:underline}
.text-center{text-align:center}
.muted{color:var(--c-muted)}