/* ===========================================================
   tokens.css — 设计令牌，全站唯一来源
   颜色按「用途」拆分：填充色 / 文字色 / 图形色各自校验对比度
   =========================================================== */

:root {
  color-scheme: light;

  /* 品牌 — 填充：按钮底、CTA 卡底（白字压得住） */
  --brand: #5b3fa6;
  --brand-hover: #4a328c;

  /* 品牌 — 文字：白底 / 浅底上的链接与强调（7.6:1） */
  --brand-ink: #5b3fa6;

  /* 品牌 — 图形：图标描边、序号（5.0:1，可当小字） */
  --brand-mark: #7a5bc7;

  --brand-surface: #efe8fa;
  --brand-surface-2: #f7f6fa;

  /* 点缀色同样拆两支：-mark 走图形，-ink 走文字 */
  --rose-mark: #c9528a;
  --rose-ink: #a84a78;
  --rose-soft: #fce9f1;
  --mint-mark: #2f8f73;
  --mint-ink: #23745c;
  --mint-soft: #e4f6ef;

  /* 中性 */
  --paper: #ffffff;
  --ink: #1e1830;
  --text: #544b6b;
  --text-muted: #6f6689;
  --line: #e6e3ef;
  --line-strong: #d8d2e6;

  /* 深底三级 */
  --ink-deep: #1e1830;
  --text-invert: #ffffff;
  --text-invert-body: #bfb4d6;
  --text-invert-mute: #a295c4;
  --line-invert: #35295a;

  /* 宽度 — 内容宽度只有一档，阅读宽度只有一档；
     另外三支是文字栏的行长上限，不是容器宽度 */
  --w-container: 1200px;
  --w-prose: 720px;
  --w-measure-lg: 620px;
  --w-measure: 500px;
  --w-measure-sm: 420px;
  --w-measure-xs: 380px;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* 圆角 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* 字体：黑体，走系统字体栈，零外部请求 */
  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, -apple-system, sans-serif;

  /* 字阶 */
  --fs-display: 82px;
  --fs-h1: 58px;
  --fs-h2: 48px;
  --fs-h3: 42px;
  --fs-h4: 34px;
  --fs-h5: 23px;
  --fs-h6: 21px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 15px;
  --fs-xs: 13px;
  --fs-label: 11px;

  /* 版式节奏 */
  --gutter: 40px;
  --header-h: 88px;
  --section-y: var(--sp-9);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 1100px) {
  :root {
    --fs-display: 64px;
    --fs-h1: 48px;
    --fs-h2: 40px;
    --fs-h3: 34px;
    --fs-h4: 30px;
    --fs-h5: 21px;
    --gutter: 32px;
    --section-y: 72px;
  }
}

@media (max-width: 720px) {
  :root {
    --fs-display: 44px;
    --fs-h1: 34px;
    --fs-h2: 30px;
    --fs-h3: 27px;
    --fs-h4: 24px;
    --fs-h5: 20px;
    --fs-h6: 18px;
    --fs-lead: 16px;
    --fs-body: 15px;
    --fs-sm: 14px;
    --gutter: 20px;
    --header-h: 68px;
    --section-y: 56px;
  }
}