/* ===========================================================
   tokens.css — 全站设计令牌，唯一真源。浅色主题。
   ① 只写 hex：零构建站没有 PostCSS 兜底，oklch() 在老内核中文浏览器上有风险，
      如需渐进增强请另开 @supports 且只覆盖装饰变量（波形色）。
   ② 主色按用途拆成多支：同一支颜色既当按钮底又当链接字，必有一头跌破 AA。
      #2563EB 在浅蓝底 #DBEAFE 上实测仅 4.24:1 —— 所以浅蓝底上的文字必须换 #1E40AF。
   =========================================================== */
:root{
  /* —— 灰阶 13 档 —— */
  --n-0:#FFFFFF; --n-50:#F7F8FA; --n-100:#F1F3F5; --n-200:#E5E7EB;
  --n-300:#D1D5DB; --n-400:#9CA3AF; --n-500:#6B7280; --n-550:#5B6675;
  --n-600:#4B5563; --n-700:#374151; --n-800:#1F2937; --n-900:#111827; --n-950:#0B1220;

  /* —— 蓝阶 11 档 —— */
  --b-50:#EFF6FF; --b-100:#DBEAFE; --b-200:#BFDBFE; --b-300:#93C5FD;
  --b-400:#60A5FA; --b-500:#3B82F6; --b-600:#2563EB; --b-700:#1D4ED8;
  --b-800:#1E40AF; --b-900:#1E3A8A; --b-950:#172554;

  /* —— 表面 —— */
  --bg:var(--n-0);            /* 页面底 */
  --bg-raise:var(--n-50);     /* 换气带 / 深色截图的承载底 */
  --bg-sunken:var(--n-100);   /* 页脚下沉底 */
  --card:var(--n-0);
  --card-line:var(--n-200);   /* 卡片描边（用 inset box-shadow，绝不用 border）*/
  --card-line-hover:var(--n-300);
  --hairline:var(--n-200);
  --hairline-strong:var(--n-300);

  /* —— 文字 —— */
  --text:var(--n-950);        /* 白底 18.72:1 */
  --text-heading:var(--n-900);
  --text-body:var(--n-600);   /* 白底  7.56:1 */
  --text-muted:var(--n-550);  /* 白底  5.83:1 — 五底全过 AA（#6B7280 在页脚底只有 4.39，不能用）*/
  --text-on-soft:var(--n-600);
  --text-invert:#FFFFFF;
  --text-decor:var(--n-400);  /* 仅装饰 —— 不得承载正文 */

  /* —— 主色：五支用途分派 —— */
  --brand:var(--b-600);              /* 填充：按钮底 / 选中片底 / 徽标底 */
  --brand-hover:var(--b-700);
  --brand-active:var(--b-800);
  --brand-text:var(--b-700);         /* 白底、灰底上的文字 6.70:1 */
  --brand-text-on-soft:var(--b-800); /* 浅蓝底上的文字 7.15:1 ← 硬约束 */
  --brand-mark:var(--b-600);         /* 图形：下划线 / 圆点 / 描边 */
  --brand-soft:var(--b-100);         /* 浅蓝底 */
  --brand-soft-line:var(--b-200);
  --brand-wash:var(--b-50);

  /* —— 点缀（仅装饰，禁止承载文字）—— */
  --accent:#C4B5FD;

  /* —— 语义色：各自 fill / ink / soft 三支 —— */
  --success-fill:#15803D; --success-ink:#15803D; --success-soft:#DCFCE7;
  --warning-fill:#B45309; --warning-ink:#B45309; --warning-soft:#FEF3C7;
  --danger-fill:#B91C1C;  --danger-ink:#B91C1C;  --danger-soft:#FEE2E2;
  --info-fill:#0369A1;    --info-ink:#0369A1;    --info-soft:#E0F2FE;

  /* —— 平台品牌色：fill 仅限 ≥24px 字形，ink 供文字链接 ——
     Android / Linux 的原始 fill 在纯白底上只有 1.78 / 2.03，连 3:1 图形门槛都不到 —— 所以必须拆 ink。*/
  --p-android:#3DDC84;  --p-android-ink:#0E6B33;
  --p-windows:#0078D4;  --p-windows-ink:#0067C0;
  --p-apple:#111827;    --p-apple-ink:#111827;
  --p-ios:#FF2D55;      --p-ios-ink:#C8102E;
  --p-linux:#F5A623;    --p-linux-ink:#8A4B00;

  /* —— 波形：按高度分四档上色，「越响越深」，不靠不透明度 —— */
  --wave-1:#C4B5FD;  /* 峰值（品牌基因里唯一的一点紫）*/
  --wave-2:#93C5FD;
  --wave-3:#BFDBFE;
  --wave-4:#DBEAFE;

  /* —— 控件级描边（WCAG 1.4.11 要求 3:1；#9CA3AF 只有 2.54、#D1D5DB 只有 1.47，都不合格）—— */
  --line-control:#7E8695;
  --line-control-hover:#6E7684;

  /* —— 内容宽度：只有一档 ——
     全站所有模块都对齐到 --w-container，右边缘必须落在同一条线上。
     需要控制行长的长文用「两栏」而不是把模块缩窄 —— 缩窄会让整页出现好几条左对齐基准线。 */
  --w-container:1200px;
  --gutter:120px;
  --nav-h:64px;

  /* —— 节奏：4 → 96，全是 4 的倍数 —— */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;  --s-6:24px;
  --s-8:32px; --s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px; --s-24:96px;

  /* —— 圆角 —— */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-card:16px; --r-panel:18px;
  --r-cta:24px; --r-pill:999px;

  /* —— 字号（桌面档）—— */
  --t-hero:64px;     --t-hero-lh:1.06;
  --t-display:96px;  --t-display-lh:100px;   /* 仅页脚装饰大字 */
  --t-h1:48px;  --t-h1-lh:1.25;
  --t-h2:38px;  --t-h2-lh:1.35;
  --t-h3:20px;  --t-h3-lh:1.5;
  --t-h4:17px;  --t-h4-lh:1.55;
  --t-lede:18px; --t-lede-lh:32px;
  --t-body:16px; --t-body-lh:28px;
  --t-sm:14px;  --t-sm-lh:24px;
  --t-meta:13px; --t-meta-lh:22px;
  --t-eyebrow:12px; --t-eyebrow-lh:16px;

  /* —— 字族：拉丁必须排在中文字体之前，否则英文与数字会被中文全角字形接管 —— */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
    "HarmonyOS Sans SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",
    "Hiragino Sans GB",system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-num:"Outfit","SF Pro Display","Segoe UI Variable Display","Segoe UI",
    system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","Cascadia Mono",ui-monospace,SFMono-Regular,
    Consolas,"Liberation Mono",Menlo,monospace;

  /* —— 层级：卡片静置零投影，层级靠发丝描边 + 表面明度差 —— */
  --e-1:inset 0 0 0 1px var(--n-200);
  --e-2:inset 0 0 0 1px var(--n-300),0 1px 2px rgba(11,18,32,.04);
  --e-3:0 1px 2px rgba(11,18,32,.05),0 8px 24px rgba(11,18,32,.06);
  --e-media:inset 0 0 0 1px rgba(11,18,32,.10),0 18px 48px rgba(11,18,32,.12);
  --shadow-tint:#0B1220;   /* 冷色基 —— 禁用纯黑投影，在浅色站上会发脏 */

  /* —— 焦点环 —— */
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--brand);
  --focus-on-soft:0 0 0 2px var(--brand-soft),0 0 0 4px var(--brand-text-on-soft);

  /* —— 动效：全站只有这四个时长值 —— */
  --dur-micro:120ms; --dur-base:180ms; --dur-slow:240ms; --dur-large:320ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.35,.64,1);
}

/* 中档：字号与留白同步降一档（中文比英文长 1.3–1.5 倍，只降字号会让标题挤成两行半） */
@media (max-width:1024px){
  :root{
    --gutter:48px; --nav-h:60px;
    --s-24:72px; --s-20:64px; --s-16:56px;
    --t-hero:52px;
    --t-h1:38px; --t-h2:30px;
    --t-lede:17px; --t-lede-lh:30px;
  }
}
@media (max-width:640px){
  :root{
    --gutter:20px; --nav-h:56px;
    --s-24:56px; --s-20:48px; --s-16:40px; --s-12:32px;
    --t-hero:38px;
    --t-h1:30px; --t-h2:26px; --t-h3:18px;
    --t-lede:17px; --t-lede-lh:30px;
  }
}
@media (prefers-reduced-motion:reduce){
  :root{ --dur-micro:0ms; --dur-base:0ms; --dur-slow:0ms; --dur-large:0ms; }
}