/* ===========================================================
   tokens.css — 全站设计令牌，唯一真源。
   深色主题站点；主色按用途拆成 填充 / 文字 / 图形 / 底面 四支，
   避免同一支既当按钮底又当链接字，导致必有一头对比度不达标。
   =========================================================== */
:root {
  /* —— 表面 —— */
  --bg: #120C0E;            /* 页面底 */
  --bg-raise: #170F11;      /* 换气带（换色区块） */
  --bg-sunken: #0C0709;     /* 页脚底 */
  --card: rgba(255, 255, 255, .03);
  --card-hover: rgba(255, 255, 255, .05);
  --card-line: rgba(255, 255, 255, .07);
  --card-line-strong: rgba(255, 255, 255, .14);
  --hairline: rgba(255, 255, 255, .08);

  /* —— 文字 —— */
  --text: #F7F1EE;          /* 主文字，压 --bg 约 15:1 */
  --text-body: #AEA8A6;     /* 正文，约 8:1 */
  --text-muted: #8E8887;    /* 弱化，约 5.2:1 */
  --text-invert: #0A1622;   /* 蓝底上的深字，约 10.7:1 */
  --text-dim: rgba(255, 255, 255, .38); /* 痛点区「改之前」的褪色字 */

  /* —— 主色（天蓝 #92CCFE）按用途分派 —— */
  --brand: #92CCFE;               /* 填充：按钮底、选中片底、徽标底 */
  --brand-ink: #0A1622;           /* 文字：蓝底之上的字 */
  --brand-mark: #92CCFE;          /* 图形：圆点、描边、序号，≥3:1 */
  --brand-surface: rgba(146, 204, 254, .06);
  --brand-line: rgba(146, 204, 254, .16);
  --brand-line-strong: rgba(146, 204, 254, .42);
  --footer-mark: #2A2024;         /* 页脚装饰大字 */

  /* —— 内容宽度：只两档 —— */
  --w-container: 1200px;          /* 1440 - 120×2，与画布对齐 */
  --w-prose: 760px;               /* 长文 / Lede */
  --gutter: 120px;

  /* —— 节奏 —— */
  --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-sm: 8px;
  --r-card: 16px;
  --r-panel: 18px;
  --r-cta: 24px;
  --r-pill: 999px;

  /* —— 字号（桌面档）—— */
  --t-eyebrow: 12px;
  --t-meta: 13px;
  --t-sm: 14px;
  --t-body: 16px;
  --t-body-lg: 18px;
  --t-h3: 18px;
  --t-h2: 38px;
  --t-h2-lh: 50px;
  --t-h1: 48px;
  --t-h1-lh: 58px;
  --t-hero-sub: 20px;

  /* —— 字族 —— */
  --font-cn: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC",
             "Microsoft YaHei", system-ui, sans-serif;
  --font-num: "Outfit", "SF Pro Display", "Segoe UI", system-ui, sans-serif;

  /* —— 焦点环 / 过渡 —— */
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
  --ease: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* 移动端：字号与留白整体降一档，避免标题挤到两行半、卡片贴边 */
@media (max-width: 1024px) {
  :root {
    --gutter: 48px;
    --s-24: 72px;
    --s-20: 64px;
    --s-16: 56px;
    --t-h1: 38px;
    --t-h1-lh: 48px;
    --t-h2: 30px;
    --t-h2-lh: 42px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --s-24: 56px;
    --s-20: 48px;
    --s-16: 40px;
    --s-12: 32px;
    --t-h1: 30px;
    --t-h1-lh: 40px;
    --t-h2: 26px;
    --t-h2-lh: 36px;
    --t-h3: 17px;
    --t-hero-sub: 17px;
  }
}