/* ==========================================================================
   tokens.css — 全站设计变量的唯一来源
   dev-expert · anti-slop: P5 H5 E5 S5 R5 V5
   ──────────────────────────────────────────────────────────────────────────
   三级 token 结构（改主题只改这里，业务样式不得写裸颜色 / 裸字体名）：
     L1 primitive  原始值，唯一允许出现 #hex / rgba() 的地方
     L2 semantic   语义角色，页面只用这一层
     L3 component  组件专属尺寸与局部约会，避免各处重复魔法数
   单位优先级：rem > % / vw > px；px 仅用于 1px 级描边。
   ========================================================================== */

:root {
  /* ── L1 · primitive ─────────────────────────────────────────────────── */

  /* 纸张色阶：暖白底 + 低饱和强调（Claude 暖橙棕 #D97757） */
  --paper: #FDFCF9;
  --paper-deep: #F4F1EA;
  --paper-card: #FFFFFF;
  --ink-900: #1F1E1D;
  --ink-600: #5C5A57;
  --ink-400: #8A8681;
  --ink-200: #E7E2D8;
  --ink-150: #D8D2C6;
  --clay-600: #C4613F;
  --clay-500: #D97757;
  --clay-100: #F6E7E0;

  /* 字体：正文无衬线（含中文回退），标题/引言用配对衬线 —— 两套配对，不整页单字体 */
  --font-stack-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", sans-serif;
  --font-stack-display: Georgia, "Times New Roman", "Songti SC", "STSong",
    "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-stack-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* 字号 / 行高 */
  --fs-2xs: 0.6875rem;  /* 11px  序号、角标 */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.0625rem;   /* 17px  长文正文 */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 2rem;       /* 32px */
  --fs-3xl: 2.5rem;     /* 40px */
  --fs-4xl: 3rem;       /* 48px */
  --lh-tight: 1.22;
  --lh-snug: 1.45;
  --lh-base: 1.78;
  --ls-tight: -0.012em;
  --ls-wide: 0.08em;

  /* 间距：4px 栅格，全部用 rem 表达 */
  --sp-1: 0.25rem;   /* 4  */
  --sp-2: 0.5rem;    /* 8  */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 2.5rem;    /* 40 */
  --sp-8: 3rem;      /* 48 */
  --sp-9: 4rem;      /* 64 */
  --sp-10: 6rem;     /* 96 */

  /* 圆角 / 阴影 */
  --r-xs: 0.25rem;
  --r-sm: 0.375rem;
  --r-md: 0.625rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-full: 999px;
  --sh-none: none;
  --sh-sm: 0 1px 2px rgba(31, 30, 29, 0.04);
  --sh-md: 0 4px 16px rgba(31, 30, 29, 0.06);
  --sh-lg: 0 16px 48px rgba(31, 30, 29, 0.12);

  /* 动效：时长短、缓动柔，避免装饰性动画 */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 层级：全站 z-index 唯一出口 */
  --z-header: 200;
  --z-backdrop: 300;
  --z-modal: 400;

  /* ── L2 · semantic ─────────────────────────────────────────────────── */
  --c-bg: var(--paper);
  --c-bg-subtle: var(--paper-deep);
  --c-surface: var(--paper-card);
  --c-text: var(--ink-900);
  --c-text-secondary: var(--ink-600);
  --c-text-muted: var(--ink-400);
  --c-border: var(--ink-200);
  --c-border-strong: var(--ink-150);
  --c-accent: var(--clay-500);
  --c-accent-hover: var(--clay-600);
  --c-accent-soft: var(--clay-100);
  --c-accent-ring: rgba(217, 119, 87, 0.28);

  /* 由 --paper 派生的半透明版本，用于顶栏毛玻璃 */
  --c-surface-blur: rgba(253, 252, 249, 0.82);
  --c-code-bg: var(--paper-deep);

  /* 遮罩：叠在封面上的深色角标 / 抽屉背后的幕布。
     暗色主题会覆盖成更黑的值，否则深色页面上几乎看不见。 */
  --c-scrim: rgba(31, 30, 29, 0.78);
  --c-backdrop: rgba(31, 30, 29, 0.32);

  /* 压在封面/遮罩上的文字：永远是浅色，**不跟主题翻转**。
     别拿 --paper 当白色用 —— 暗色主题里它就是黑的。 */
  --c-on-scrim: #FDFCF9;

  --font-body: var(--font-stack-body);
  --font-display: var(--font-stack-display);
  --font-mono: var(--font-stack-mono);

  /* 版心宽度 */
  --container: 67.5rem;   /* 1080px */
  --measure: 42.5rem;     /* 680px  长文最佳阅读行宽 */
  --aside: 18rem;         /* 关于页左栏宽 */

  /* ── L3 · component ────────────────────────────────────────────────── */
  --nav-height: 4rem;
  --header-border: 1px;
  --card-bg: var(--c-surface);
  --card-border: var(--c-border);
  --card-radius: var(--r-lg);
  --card-padding: var(--sp-5);
  --btn-padding-y: 0.625rem;
  --btn-padding-x: 1.25rem;
  /* 按钮用 10px 圆角矩形，不是全圆胶囊 —— 全圆是「消费级 App」的语汇，
     这里更像文档工具（克劳德那一挂）。 */
  --btn-radius: 0.625rem;
  --tag-padding-y: 0.1875rem;
  --tag-padding-x: 0.625rem;
  --tag-radius: var(--r-full);
  --modal-radius: var(--r-xl);
  --modal-max-w: 52rem;
}

/* 尊重系统的「减少动态效果」偏好：统一把时长归零，而不是逐个写 @media */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ==========================================================================
   暗色主题
   ──────────────────────────────────────────────────────────────────────────
   只覆盖 L1 原语（纸/墨/陶土三组色阶 + 阴影 + 遮罩）。
   L2 语义层写成 `--c-bg: var(--paper)` 这种惰性引用，会在这里自动跟着变，
   所以业务样式一行都不用改。

   主题由 <html data-theme="dark"> 触发：
   手动切换（顶栏按钮，utils/theme.js）或系统偏好都会写这个属性，
   index.html <head> 里有一段同步脚本负责在 CSS 前设好它，避免首屏闪白。
   ========================================================================== */

:root[data-theme="dark"] {
  /* 纸：暖黑，不用纯黑 —— 纯黑配高对比文字在 OLED 上会拖影发虚 */
  --paper: #191714;
  --paper-deep: #100E0C;
  --paper-card: #221F1A;

  /* 墨：整体提亮一档，暗底下文字要更亮才不闷 */
  --ink-900: #EDE7DC;
  --ink-600: #B3AA9D;
  --ink-400: #8B8378;
  --ink-200: #332F29;
  --ink-150: #443F38;

  /* 陶土（强调色）：暗底下原色偏暗，hover 档提亮保证对比度 */
  --clay-600: #E5906D;
  --clay-500: #D97757;
  --clay-100: #3B2820;

  /* 阴影在暗色下要更重才看得出来，否则卡片和背景会糊成一片 */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 16px 48px rgba(0, 0, 0, 0.55);

  /* 遮罩：叠在封面上的深色角标、抽屉背后的幕布 */
  --c-surface-blur: rgba(25, 23, 20, 0.82);
  --c-scrim: rgba(0, 0, 0, 0.74);
  --c-backdrop: rgba(0, 0, 0, 0.5);

  /* 让滚动条、表单控件、光标选区也跟暗色 */
  color-scheme: dark;
}