/* tokens.css — 设计 token，集中所有色彩/字体/尺度变量
   灵感来源：编辑性出版物排版（The New York Times Opinion / Anthropic 文章页引言区的字号节奏） */

:root {
  /* 色彩 —— 米白底 + 墨色字 + 陶土强调 */
  --bg:          #F4F1EB;
  --bg-alt:      #F7F5F2;
  --surface-2:   #ECE7DD;
  --ink:         #141413;
  --ink-2:       #3E3E3B;
  --ink-3:       #6E6A61;
  --accent:      #C96442;
  --accent-ink:  #FFFFFF;
  --rule:        #1F1F1D;
  --rule-soft:   #C9C3B6;
  --code-bg:     #EFEBE2;

  /* 字体栈 —— 英文走 JetBrains Mono，中文走思源黑体 Noto Sans SC。
     原理：JBM 无 CJK 字形，浏览器逐字符回落到 Noto Sans SC（CJK），最终系统黑体兜底。
     全站统一黑体方向：跟 mono 工程感视觉语言一致。三个变量保留语义但解析到同一栈。 */
  --font-serif:  "JetBrains Mono", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:   "JetBrains Mono", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* 字号 —— 桌面基准 */
  --fs-hero:     64px;
  --fs-h1:       52px;
  --fs-h2:       32px;
  --fs-h3:       20px;
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-micro:    12px;

  /* 行高 —— 黑体方块字面比衬线密实，标题需要更宽松的行高 */
  --lh-tight:    1.25;
  --lh-normal:   1.4;
  --lh-reading:  1.7;

  /* 版式尺度 */
  --container:   1280px;
  --gutter:      32px;
  --section-y:   120px;

  /* 动效 */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-reveal:  200ms;
  --dur-hover:   100ms;
}

/* 暗色模式 —— 深炭底 + 中性暖灰字，暖意保留但脱"黄" */
:root[data-theme="dark"] {
  --bg:          #1A1A18;
  --bg-alt:      #22221F;
  --surface-2:   #2B2A27;
  --ink:         #DCDBD6;
  --ink-2:       #B0AEA7;
  --ink-3:       #80807A;
  --accent:      #D97757;
  --accent-ink:  #1A1A18;
  --rule:        #454038;
  --rule-soft:   #353229;
  --code-bg:     #22221F;
}

/* 主题切换过渡 —— 只给底色/文字，避免对 transform/opacity 造成干扰 */
html, body {
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

/* 断点：820 以下 */
@media (max-width: 820px) {
  :root {
    --fs-hero:   40px;
    --fs-h1:     34px;
    --fs-h2:     26px;
    --fs-h3:     18px;
    --fs-body:   16px;
    --section-y: 72px;
    --gutter:    20px;
  }
}

/* 断点：640 以下 */
@media (max-width: 640px) {
  :root {
    --fs-hero:   34px;
    --fs-h1:     28px;
    --fs-h2:     22px;
    --fs-body:   16px;
    --section-y: 56px;
  }
}