/* tokens.css —— 全站唯一颜色/字号/间距来源(ARCHITECTURE §6.2)
   规则:浅色集必须在 :root 完整定义,深色只覆盖(陷阱 #8)。
   组件只使用语义别名(--bg/--text-2/--border),不要直接用色阶(--c-300)。

   设计语言:暖纸底色 + 衬线展示数字 + 克制的赤陶强调色。
   参照 Ghost / Notion:大量留白、低对比边框、层次化阴影、缓入微动效。 */

:root {
  /* 让浏览器原生控件(日期选择器/下拉框/滚动条)跟随主题配色,
     否则深色模式下它们仍是白底——移动端颜色不一致的主因。
     这里锁定 light 还有第二个作用:告诉 Chrome Android 的
     Auto Dark Mode「本页已自行处理配色」,阻止它算法反色(见 ADR 007)。 */
  color-scheme: light;

  /* ---- 色阶(只被 token 引用,不要直接用于组件) ---- */
  --c-50:  #faf8f5;
  --c-100: #f4f0ea;
  --c-200: #eae4db;
  --c-300: #d9cec1;
  --c-400: #b8a898;
  --c-500: #967f6d;
  --c-700: #635347;
  --c-800: #453a31;
  --c-900: #2b2521;

  --rose-200: #f0d5cd;
  --rose-300: #e3b7ab;
  --rose-500: #c26552;
  --rose-600: #ad5544;
  --rose-700: #94483a;

  /* ---- 语义别名 ---- */
  --bg: var(--c-50);
  --bg-raise: #ffffff;
  --bg-sunken: var(--c-100);
  --text-1: var(--c-900);
  --text-2: var(--c-700);
  /* 次要文字必须达到 WCAG AA 4.5:1 —— 它承载作者名、日期、标签、
     未选中导航等真实内容,不是装饰。旧值 #9a9086 仅 2.95:1。 */
  --text-3: #776b60;
  --border: var(--c-200);
  --border-strong: var(--c-300);
  --accent: var(--rose-500);
  --accent-strong: var(--rose-700);
  /* 按钮填充色与装饰用的 --accent 分开:
     白字在 --rose-500 上只有 3.98:1(15px 需 4.5),不达标;
     --rose-600 是 5.05:1。分开之后装饰色可以保持明快,
     承载文字的填充色单独保证可读性。 */
  --accent-fill: var(--rose-600);
  --accent-fill-hover: var(--rose-700);
  --accent-soft: rgb(194 101 82 / 0.09);
  --accent-ink: #fff;

  /* 危险色:删除等破坏性操作。与赤陶强调色刻意拉开(更红、更冷),
     否则「保存」和「删除」在暖色调里几乎同色,容易误触 */
  --danger: #b3372c;
  --danger-strong: #93291f;
  --danger-ink: #fff;

  /* 主计数的水墨渐变:深色文字带一点暖意 */
  --ink-from: #33291f;
  --ink-to: #8a6248;

  /* ---- 字体 ---- */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-display: 'New York', 'Songti SC', 'Noto Serif SC', 'STSong', Georgia, serif;

  /* 字号阶梯
     中文在同字号下笔画密度远高于拉丁字母,西文界面的 12/13px 惯例
     直接照搬会偏小。底部整体抬高,同时拉开层级差,
     保证"克制"来自层级清晰而不是"全都很小"。 */
  --fs-xs: 13px;       /* 极次要:版本号、脚注 */
  --fs-label: 13px;    /* 大写小标签(唯一使用宽字距的一档) */
  --fs-s: 15px;        /* 次要:元信息、标签、日期 */
  --fs-m: 16.5px;      /* 正文基准 */
  --fs-body-lg: 17.5px;/* 正文强调段 */
  --fs-l: 21px;        /* 卡片标题 */
  --fs-xl: 30px;       /* 区块标题 */
  --fs-hero: clamp(56px, 12vw, 88px);

  /* 字重与行高 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --lh-tight: 1.35;
  --lh-body: 1.8;

  /* 字距:小标签用宽字距 + 大写是"高级感"的常用手法。
     只用在 --fs-label 一档 —— 宽字距施加在小正文上会显著降低可读性 */
  --track-label: 0.14em;

  /* 可点区域最小尺寸。
     WCAG 2.5.5(AAA)与 Apple HIG 均为 44px,Material 为 48dp;
     低于 44 的目标误触率约为达标目标的 3 倍。 */
  --tap-min: 44px;
  --tap-comfy: 48px;

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

  /* ---- 圆角与阴影(三层,克制使用) ---- */
  --radius-s: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgb(43 37 33 / 0.05);
  --shadow-md: 0 1px 2px rgb(43 37 33 / 0.04), 0 6px 20px -6px rgb(43 37 33 / 0.10);
  --shadow-lg: 0 2px 4px rgb(43 37 33 / 0.05), 0 18px 48px -12px rgb(43 37 33 / 0.18);

  /* ---- 动效 ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --dur-slow: 0.6s;

  /* ---- 彩蛋夜色场景(M12,ADR 008) ----
     固定深色,不随主题切换:它是一个「关灯」的时刻,浅色主题下也一样。
     三元组写法供 egg.js 的 canvas 读取后拼 rgb(r g b / a)。 */
  --egg-bg: #0e0a0b;
  --egg-bg-lift: #21171a;      /* 画面中心略提亮,避免死黑 */
  --egg-light: 255 222 196;    /* 光:粒子、闪光、进度弧 */
  --egg-rose: 194 101 82;      /* 心形背后的余晖,即站点强调色 --rose-500 */
  --egg-ink: #f4e4d4;
  --egg-ink-2: rgb(244 228 212 / 0.74);
  --egg-ink-3: rgb(244 228 212 / 0.5);
  --egg-gold-1: #f8e6d2;
  --egg-gold-2: #e3ae8a;
  --font-egg-script: 'Loveday Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  --font-egg-serif: 'Loveday Serif', 'Cormorant Garamond', Georgia, serif;
}

/* ---- 深色主题 ----
   刻意不用 @media (prefers-color-scheme: dark):媒体查询的答案由浏览器给出,
   网页无权拒绝。Chrome Android 的 Auto Dark Mode 会在系统为浅色时依然对页面
   谎报 dark,导致同一台手机 Chrome 显示深色、Brave 显示浅色(见 ADR 007)。
   改由 data-theme 驱动后,主题只在用户明确选择时切换。
   切换逻辑见 lib/theme.js;首屏防闪烁的内联脚本在各 HTML 的 <head> 中。 */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #16130f;
  --bg-raise: #201c17;
  --bg-sunken: #121009;
  --text-1: #ede7de;
  --text-2: #b5aa9c;
  --text-3: #978c7c;   /* 旧值 #7d7466 仅 4.02:1,不达 AA;现为 5.61:1 */
  --border: #322c25;
  --border-strong: #453d33;
  --accent: var(--rose-300);
  --accent-strong: #efc9bc;
  /* 深色下按钮是浅底深字,--accent 本身已达 9.01:1,无需分离 */
  --accent-fill: var(--rose-300);
  --accent-fill-hover: #efc9bc;
  --accent-soft: rgb(227 183 171 / 0.10);
  --accent-ink: #2b1d17;
  --danger: #e0857a;
  --danger-strong: #eda093;
  --danger-ink: #2b1512;
  --ink-from: #f2ece2;
  --ink-to: #cf9f85;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 20px -6px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 48px -12px rgb(0 0 0 / 0.55);
}

/* 主题切换时的整页淡变。只过渡颜色相关属性 ——
   加在通配符上会让布局属性也参与过渡,滚动时明显掉帧。
   .is-theme-switching 由 theme.js 在切换瞬间加上,过渡结束即移除,
   因此首屏加载与日常交互都不受影响。 */
.is-theme-switching,
.is-theme-switching *,
.is-theme-switching *::before,
.is-theme-switching *::after {
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}

/* 动效敏感用户:全部动画降为无 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}