/* =========================================================
   CalcElf 设计令牌（Design Tokens）—— v8.9 设计系统改造 · 第 1 步
   ---------------------------------------------------------
   ★★ 本文件【只定义变量】✗✗ 没有任何一条规则应用到具体元素 ✓
       ⇒ 第 1 步：不引入任何页面 ✗ 页面视觉零变化 ✓（已完成 ✓）
       ⇒ 第 2 步：已由 index.html / my-growth.html / 404.html 在【所有样式表之前】
         用 <link rel="stylesheet" href="/design-tokens.css"> 引入 ✓
         同时新增了文件末尾的 :root[data-theme="aurora"] 深色重映射（决策 ①）✓
       ⇒ 引用方（第 2 步起）：v565.css / ui-type-scale.css 的 --calf-round-font ·
         --calf-body-font ✗ my-growth.css 的 --mg-display · --mg-body ✗
         ce-404.css 的 --ce404-display · --ce404-body ✗
         components.css / themes.css 里两处内联 "Baloo 2"… 字面量栈 ✗
         以及 146 处 font-weight 800/900（11 张样式表 143 处 ＋ index.html 内联 3 处）
         中的 135 处（改用 --ce-fw-head ✓ 剩下 11 处是「白字压彩色且对比度 < 3:1」的
         例外 ✗ 9 条规则 / 11 处声明 ✗ 见第 2 步报告 ✓）
   ★★ 所有令牌统一用 --ce- 前缀 ✗ 与现有变量彻底分家 ✓
       本文件里的名字在改造前【一个都不存在】✗ 所以不会覆盖任何现有变量 ✓
       （复核命令与结果见 docs/DESIGN-SYSTEM.md 第一章 · 第四节）

   为什么要有这个文件（用户原话）：
     "参考图的字体优化它就很干净 ✗ 不像我们用的这些什么字体啊 …
      我们这个界面 ✗ 就感觉还是【工程样板】"
   实测病因（11 张样式表 · 286 959 B，脚本统计，非目测）：
     ★ 快照 2026-10-04 22:12 ✗ 当时 components.css / themes.css 正被另一个 agent 修改 ✓
       ⇒ 下表数值只代表该快照 ✗ 复核命令与逐文件哈希见 docs/DESIGN-SYSTEM.md 第一章 ✓
     · 圆角      32 级（50% · 99px · 999px · 14px · 16px · 13px · 15px …）
     · 阴影      50 种写法（冷色 rgba(0,0,0,…) / rgba(21,37,64,…) 混着有色阴影）
     · 字号      54 级（11px 出现 40 次 ✗ 12.5px 29 次 ✗ 17.5px · 18.4px 也在）
     · 字体家族  14 种写法 ⇒ 实际是【5 套字体变量在打架】
                 （--font-display · --font-body · --calf-round-font ·
                   --calf-body-font · --mg-display）
     · 渐变      135 处 ✗ 其中 19 处跨色相（青绿→蓝 ✗ 紫→青 ✗ 黄→粉）
     · 语义色    青绿/蓝系一共用了 233 次 ⇒ 当所有东西都强调 ✗ 就等于什么都没强调 ✓
   设计对策（与参考图对齐）：
     · 圆角/阴影/灰阶/间距/字号 全部【收敛成固定档位】✗ 禁止自由发挥 ✓
     · 品牌青绿 + 奖励金【各有唯一语义】✗ 其余一律走暖中性灰 ✓
     · 阴影改【暖色 · 大范围 · 低透明】✗ 现在的偏冷偏硬 ✓

   令牌值的证据：每个值都写了"为什么是这个数"✓
     颜色全部算过 WCAG 对比度（数值直接写在注释里 ✓ 复算脚本口径见文档第二章）

   ★★ 第 2 步动手前必须先知道的 3 件事（详见 docs/DESIGN-SYSTEM.md 第五章 5.0）：
     ① 深色主题：★ 第 2 步【已解决】✗ 见本文件末尾的
        :root[data-theme="aurora"]{ --ce-n-1…6 / --ce-sh-1…3 重映射 } ✓
        （反转后实测对比度：n-4 最差 5.12:1 ✓ n-5 8.17:1 ✓ n-6 11.16:1 ✓）
     ② 主色归属（--primary 藏青 #123A72 vs 品牌青绿 #12b3a0）★ 第 2 步【未改】✓
     ③ 主 CTA 白字对比度（#12b3a0 上只有 2.63:1 ✗ 不达 AA 4.5）★ 第 2 步【未改】✓
        ⇒ ②③ 都要动色值 ✗ 属于第 3 步（配色改造）✓ 本步不碰 ✓
        ★ 本步唯一相关的动作：把「白字压彩色且对比度 < 3:1」的 9 处 font-weight
          保留成 800/900 当作临时补偿 ✗ 已在第 2 步报告里逐条列清 ✓
          第 3 步把底色改深（#0e8570 之类）之后即可全部降到 700 ✓
   ========================================================= */

:root{

  /* =======================================================
     ① 圆角 —— ★ 只留 3 级 ✗ 除这 3 个值以外不许出现别的圆角
     -------------------------------------------------------
     现状：32 级。高频值 50%(60) · 14px(37) · 999px(35) · 99px(33) ·
           16px(22) · 12px(21) · 8px(15) · 13px(10) · 15px(11) …
     参考图：卡片 22 / 内层 16 / 胶囊 999 —— 只有 3 档 ✓
     ======================================================= */

  /* 卡片 / 弹窗 / 面板：一个"面"的最外层容器。
     22px 的来历：① 参考图实测值 ② 与现存 --radius:24px 只差 2px ✗
     换过去几乎看不出位移 ✗ 但能把 18/20/24/26/28/30px 六种写法一次收干净 ✓ */
  --ce-r-card:22px;

  /* 卡片【内部】的块：输入框 / 按钮 / 列表项 / 图标底板 / 内嵌小卡。
     14px 的来历：它是现存最高频的"内层值"（37 处 ✗ 覆盖 8 个文件）✗
     选它＝改造时改动量最小 ✓；与 22px 相差 8px ✗ 内外层级一眼可辨 ✓
     ★ 不许用 16px 当内层 ✗ 16px 现存 22 处多为"小卡片"✗ 那些按卡片处理（见文档第四章） */
  --ce-r-inner:14px;

  /* 胶囊 / 药丸：标签 / 徽章 / 进度条 / 头像圈 / 分段选择器。
     ★ 99px 与 999px 是同一个视觉意图 ✗ 统一收进这一级 ✓（现存 99px 33 处 + 999px 35 处）
     ★ 50% 不在此列 ✗ 正圆（头像 / 圆点 / 复选框）不属于圆角体系 ✓ 该写 50% 就写 50% */
  --ce-r-pill:999px;

  /* =======================================================
     ② 阴影 —— ★ 只留 3 级 ✗ 且必须是【暖色 · 大范围 · 低透明】
     -------------------------------------------------------
     现状 50 种写法，且偏冷：
       0 16px 44px rgba(0,0,0,.18)        ← 纯黑 ✗ 冷且重
       0 4px 12px rgba(21,37,64,.24)      ← 藏青 ✗ 冷
       0 6px 14px rgba(14,150,140,.28)    ← 彩色阴影 ✗ 与底色互相打架
     参考图：暖色（棕调）✗ 大 blur ✗ 低 alpha ✗ 像纸被自然光照出来的投影 ✓
     统一用 rgba(120,90,40,α)：色相 38° ✗ 暖 ✓ 与暖灰阶（色相 34~38°）同一族 ✓
       ⇒ 阴影和灰阶不会一个偏蓝一个偏黄 ✓ 这是"干净"的关键 ✓
     ======================================================= */

  /* 1 级 —— 贴地：几乎只有一圈轮廓级别的浮起。
     用于：卡片内的小块（输入框 / 列表项 / 次级按钮）、静态分隔。
     α=.06 + 2px blur ✗ 在浅底上"看得见但不显脏" ✓ */
  --ce-sh-1:0 1px 2px rgba(120,90,40,.06);

  /* 2 级 —— 卡片默认高度：面浮在页面底上。
     用于：普通卡片 / 顶部栏 / 侧栏 / 折叠面板。
     α=.10 + 24px blur ✗ 大范围低透明 ⇒ 边缘不会出现一道硬线 ✓
     （对比现状 .18~.35 的 alpha ✗ 那正是"工程样板"的硬边来源 ✓） */
  --ce-sh-2:0 8px 24px rgba(120,90,40,.10);

  /* 3 级 —— 模态高度：只有"浮在所有内容之上"的东西才配用。
     用于：套餐弹窗 / 设置面板 / 头像选择器 / 关卡弹窗 / 抽屉。
     α=.18 + 48px blur ✗ 是 3 级里唯一"明显"的投影 ✗
     ⇒ 全站同时出现的 3 级阴影应当【只有 1 个】✓（弹窗永远只有一个在最上面 ✓） */
  --ce-sh-3:0 20px 48px rgba(120,90,40,.18);

  /* =======================================================
     ③ 中性灰阶 —— ★ 6 级暖灰 ✗ 让标签 / 边框 / 说明都有地方可去
     -------------------------------------------------------
     现状：灰是【冷灰】✗ #94a3b8(色相 215) · #64748b(215) · #8296ab(211) ·
           #93a6b8(209) · #7189a3(211) · #5c7a94(208) —— 全是蓝调 slate ✓
           ⇒ 与青绿主色同处冷色区 ✗ 页面整体发"冷白"✗ 像后台系统 ✓
     参考图：暖灰（纸感）✗ 与暖色阴影、金色奖励同族 ⇒ 整页像一张纸 ✓
     本阶色相 34~38° ✗ 饱和度 8~44% ✗ 越浅越暖（浅色需要一点黄才不发灰 ✓）
     对比度实测（白底 / 纸底 #faf7f2）：
       n-1 1.07 / 1.00 · n-2 1.19 / 1.11 · n-3 1.45 / 1.36
       n-4 4.95 / 4.63 ✓AA · n-5 8.05 / 7.54 ✓AAA · n-6 14.84 / 13.89 ✓AAA
     ======================================================= */

  /* 1 级 —— 页面底色（大面积留白）。
     ★ 只能当背景 ✗ 永远不能当文字色（1.07:1 ✗ 等于隐形） */
  --ce-n-1:#faf7f2;

  /* 2 级 —— 卡片内的次级面：表头 / 条纹行 / 未选中的分段底 / 输入框底。
     ★ 同样只能当背景 ✗ 不能当文字色 ✓（1.19:1） */
  --ce-n-2:#f0ebe3;

  /* 3 级 —— 发丝线：分割线 / 卡片描边 / 表格线 / 未选中的轮廓。
     ★ 装饰性 ✗ 对比度 1.45:1 ✗ 按 WCAG 它不承担"必须被看见"的语义 ✓
     ★ 如果这条线【必须看得见】（输入框边框 / 单选圈 / 焦点框的底）
       ⇒ 改用 --ce-n-4（4.95:1 ✗ 满足非文字 3:1 ✓） */
  --ce-n-3:#ddd5c9;

  /* 4 级 —— 说明文字 / 次要标签 / 占位符 / 需要被看见的描边。
     ★ 4.95:1（白底）· 4.63:1（纸底）✓ 满足 WCAG AA 正文 ✓
     ★ 这是"辅助文字"的【最低档】✗ 比它更浅的文字一律不许出现 ✓
       （现状 #94a3b8 只有 2.56:1 ✗ 用户看不清 ✗ 这是可访问性事故 ✓） */
  --ce-n-4:#786f61;

  /* 5 级 —— 次级正文 / 表头标题 / 数值单位 / 正文强调。
     ★ 8.05:1 ✓ AAA 正文 ✓ */
  --ce-n-5:#574f44;

  /* 6 级 —— 主文字 / 标题 / 关键数字 / 正文默认色。
     ★ 14.84:1 ✓ 取代现行 ink #334155（冷灰 10.35:1）✗ 更深更暖更有"纸墨"感 ✓ */
  --ce-n-6:#2b2721;

  /* =======================================================
     ④ 语义色 —— ★ 收敛主色的使用范围（这是"样板感"的根治点）
     -------------------------------------------------------
     现状：青绿/蓝系共 233 次 ✗ #12b3a0 一个色就当背景用了 17 次 ✓
           ⇒ 满屏都在喊"我很重要"✗ 结果什么都不重要 ✓
     参考图：青绿只在【主 CTA + 关键数字】约 8 处 ✓ 金色只在【奖励/省钱】✓
     规则（可检查）：主色只允许出现在 主 CTA / 关键数字 / 当前选中态 ✓
                    金色只允许出现在 奖励 / 省钱 / 最受欢迎 / 成就 ✓
                    其余标签 / 边框 / 说明【一律】走 ③ 的暖灰 ✗
     ======================================================= */

  /* 品牌青绿 —— ★ 沿用 #12b3a0 ✗ 不改品牌色 ✓
     ★ 诚实标注：它作为【白底文字】只有 2.63:1 ✗ 不达 AA（4.5:1）✗
       作为【按钮实底 + 白字】同样 2.63:1 ✗ 也不达 AA ✓
     ⇒ 因此它只允许做：实底填充（大按钮 / 徽章底 / 图形）+ 大字（≥24px 或 ≥18.66px 粗体）✓
     ⇒ 白底上的【小号青绿文字】（2.63:1）一律改用 --ce-primary-strong ✓ */
  --ce-primary:#12b3a0;

  /* 深一档青绿 —— ★ 两用：① 主 CTA 的 hover / 按下态 ② 青绿系文字色
     #0f8f74 ✓ 4.04:1 ✗ 达到 AA Large（≥3:1）✗ 白底小字仍差一点点 ✓
     ★ 若第 2 步要让青绿小字【完全达标 AA】⇒ 把本值改成 #0e8570（4.56:1 ✓）
       本步不改 ✗ 因为那会动到现有观感 ✗ 决策留给第 2 步（见文档第五章待决项） */
  --ce-primary-strong:#0f8f74;

  /* ★★★ 第 1 批新增（整站换色）：青绿的【文字/白字底】档 ✗✗
     ---------------------------------------------------------
     ★ 为什么必须再拆一档（实测驱动 ✗ 不是偏好 ✓）：
       换色后实测（真 Chromium ✗ 真像素 ✗ tests/site-crawl-ui.js）暴露出
       青绿 `#12b3a0` 的**双重不达标** ✗ 它是"两头都不行"的中间色：
         ① 当【白字底】✗ 白字压上去只有 2.63:1 ✗ 远低于 AA 4.5
         ② 当【白底小字】✗ 2.63:1 同样不达标
       ⇒ 青绿 `#12b3a0` 只允许做：**实底填充 / 图形 / 边框 / 大字** ✓
       ⇒ 凡是"要白字压在上面的底"或"浅底上的小号青绿文字" ✗ 一律改走本令牌 ✓
     ★ 取值依据（不是新发明 ✗ 复算过 ✓）：
       `#0f766e` 白字 **5.47:1** ✓ 白底当文字 **5.47:1** ✓ 页底 #F4F9FD 上 **5.02:1** ✓
       ★ 它**不是新色**：`themes.css:1075/1080` 的 `--sel-a` 早就是它 ✓
         当初选它就是为了"选中态底 + 白字要过 4.5"✗ 与本次是完全同一个诉求 ✓
     ★ 与既有档位的关系：`--ce-primary-strong`(#0f8f74 ✗ 白字 4.04 ✗ 差 0.46) 是 hover 档 ✗
       本令牌是**文字/白字底档**（更暗一档 ✓ 唯一通过 AA 的那档 ✓）*/
  --ce-primary-text:#0f766e;

  /* ★★★ 第 2 批新增：主色渐变的【亮端】✗✗（顶栏 / 主按钮 135° 渐变的终点）
     ---------------------------------------------------------
     ★ 它替代的是旧 `--primary2:#10B8C4`（亮青 ✗ 白字只有 2.42:1）✓
       旧渐变 = 藏青 `#123A72` → 亮青 `#10B8C4` ✗ 那正是"藏青→青"的老 identity ✓
       换色后渐变左端变成 `#0f766e` ✗ 但右端若仍是亮青 ⇒ 白字在右半段必挂 ✓
     ★ 实测（真浏览器真像素 ✗ `tests/site-crawl-ui.js`）：
       `p#tagline` 落在渐变的 **t≈0.30~0.38** 处 ✗ 实测合成像素
         `rgb(15,138,136)`（1440px）/ `rgb(15,143,143)`（390px）
       白字对比度只有 **3.69 / 3.51** ✗ 都低于 AA 4.5 ✓
     ★ 取值推导（不是拍脑袋 ✗ 解出来的 ✓）：
       需要【合成像素】亮度 ≤ 1.05/4.5 − 0.05 = **0.18333**
       在青绿色相（H184° S85%）上扫亮度 ⇒ 最浅可行端点 L=35%（`#0d9ba5` ✗ 只剩 4.51 余量太薄）
       取 `#0b7d70`（L=27.6%）⇒ 实测合成像素 **390px 5.29 / 1440px 5.33** ✓ 余量健康 ✓
     ★ 为什么不再深一点：渐变要**看得见** ✓ `#0b7d70` 与左端 `#0f766e` 仍可辨 ✓
       再深就与左端贴平 ✗ 渐变消失 ✓
     ★ 与 `--ce-primary`(#12b3a0) 的分工：本令牌是**渐变亮端**（要压白字 ✗ 必须够深）
       `--ce-primary` 是**纯填充/图形/边框/大字**用的品牌亮青 ✓ 两者不可互换 ✓
     ★ 消费点：`themes.css:56` 的 elf `--primary2`（**第 6 批起只剩 `.btn.primary`** ✓）+ `ce-404.css` 的 `--ce404-primary-dark` ✓ ★★ 更正：`.top` 顶栏已【脱钩】✗ 它现在吃自己的 `--top-grad-a/--top-grad-b`（`#123A72`→`#10B8C4` ✗ 回滚成改色前那条 ✓ 见 docs/UI-SPEC-REAL.md 第 6 批 ✓）★ 本令牌仍是 elf `--primary2` 的唯一真源 ✗ 一个字没动 ✓ */
  --ce-primary-grad:#0b7d70;

  /* 青绿浅底 —— 仅用于【当前选中态】的底 / 主 CTA 的柔和背景 / 青绿图标底板。
     ★ 它本身不是文字色 ✓ 其上的文字用 --ce-n-6（13.4:1 ✓）或 --ce-primary-strong（3.65:1 ✗ 仅大字）✓ */
  --ce-primary-soft:#e6f7f3;

  /* 奖励金 —— ★ #e8b33c 升级为【奖励语义色】✗ 只属于"奖励/省钱/最受欢迎/成就" ✓
     ★ 诚实标注：它当【白底文字】只有 1.92:1 ✗✗ 严重不足 ✗
       当【实底 + 白字】也是 1.92:1 ✗（这是很多产品的通病 ✓ 我们不跟）
     ⇒ 金色只做：实底填充 / 图标 / 边框 / 星标 / 进度条 ✓
     ⇒ 金色区域上的文字用 --ce-n-6（在 #e8b33c 上 7.74:1 ✓ AA/AAA ✓） */
  --ce-reward:#e8b33c;

  /* 金色浅底 —— 奖励卡 / 优惠角标 / "最受欢迎"描边的底。
     ★ 其上文字用 --ce-reward-ink ✓ 不可用 --ce-reward 本身当文字 ✓ */
  --ce-reward-soft:#fdf5e3;

  /* 深金（文字专用）—— ★ 本步新增 ✗ 理由：现有界面里当【文字】用的金色一共有
     26 个不同值（#f59e0b×7 · #b0894a×4 · #ff9f1c×3 · #8a6a14×3 · #8a6100×3 ·
     #d98324 · #f1c40f · #ffd700 · #b8860b … ✗ 见文档第四章）✗ 且没有一个在变量里 ✓
     #8a6410 ✓ 白底 5.37:1 ✓ 金底 #fdf5e3 上 4.95:1 ✓ 都过 AA ✓
     ⇒ 奖励文字（"省 30%" / "已获得" / 金币数）一律用它 ✓ */
  --ce-reward-ink:#8a6410;

  /* =======================================================
     ⑤ 间距 —— ★ 4 级（8 / 14 / 22 / 32 ✗ 约 1.6 倍递进）
     -------------------------------------------------------
     现状：padding 有 26 种写法（14px 10 次 · 12px 14px 6 次 · 9px 12px 4 次 ·
           11px 13px 3 次 …）✗ gap 也有 16 种（8 / 10 / 7 / 9 / 12 / 6 / 3px…）
     ⇒ 版式密度全靠手感 ✗ 这是"工程样板"最直接的观感来源之一 ✓
     ======================================================= */

  /* 1 级 · 紧凑（8px）：标签内边距 / 图标与文字之间 / 徽章内边距 / 表格单元内距 */
  --ce-s-1:8px;

  /* 2 级 · 默认（14px）：卡片内边距 / 按钮左右内边距 / 列表项内距 / 行间距
     ★ 14px 是现状最高频的 padding ✗ 沿用它=改动量最小 ✓ */
  --ce-s-2:14px;

  /* 3 级 · 段落（22px）：卡片之间 / 区块标题与内容之间 / 弹窗内边距 */
  --ce-s-3:22px;

  /* 4 级 · 分屏（32px）：页面大分段 / 首屏上下留白 / 弹窗顶部与底部留白 */
  --ce-s-4:32px;

  /* =======================================================
     ⑥ 字号阶梯 —— ★ 6 级 ✗ 现状 54 级
     -------------------------------------------------------
     现状高频：11px(40) · 12.5px(29) · 12px(23) · 13px(22) · 16px(18) ·
               15px(17) · 11.5px(15) · 14px(14) · 10px(8) · 9.5px(4)
     ⇒ 11 / 11.5 / 12 / 12.5 / 13 / 13.5 六档挤在 2.5px 内 ✗
       人眼分不出层级 ✗ 只觉得"乱" ✓ 这就是"字体不干净"的机制 ✓
     对策：档位之间至少差 2px ✗ 且相邻档位有明确语义分工 ✓
     ======================================================= */

  /* 1 级（12px）：角标 / 辅助说明 / 时间戳 / 单位。
     ★ 全站最小字号 ✗ 不许再出现 9 / 10 / 10.5 / 11 / 11.5px ✓ */
  --ce-fs-1:12px;

  /* 2 级（14px）：次要正文 / 表单标签 / 列表副标题 / 表格内容 */
  --ce-fs-2:14px;

  /* 3 级（16px）：正文基准 / 输入框 / 按钮文字 / 卡片正文 */
  --ce-fs-3:16px;

  /* 4 级（20px）：卡片标题 / 小标题 / 列表主标题 */
  --ce-fs-4:20px;

  /* 5 级（26px）：区块标题 / 价格数字 / 统计大数 */
  --ce-fs-5:26px;

  /* 6 级（34px）：页面主标题 / 首屏 hero / 关键数字（唯一允许 34px 的地方） */
  --ce-fs-6:34px;

  /* 字重 —— ★ 只留 3 级 ✗ 现状 5 级（800×51 · 900×37 · 700×34 · 600×14 · 500×1）
     ★★ 硬约束：自托管的 Fredoka 只有 600 / 700 两档（public/fredoka.css）✗
        写 800 / 900 时浏览器要么取 700 ✗ 要么【伪粗体】把字形糊掉 ✓
        ⇒ 这正是"字体看着不干净"的一个可验证来源 ✓
     注意：本值为无单位数字 ✗ 与 font-weight 属性同口径 ✓ */
  --ce-fw-body:400;    /* 正文（默认值 ✗ 显式写出来是为了"禁止再用 500"） */
  --ce-fw-strong:600;  /* 强调：按钮 / 金额 / 标签 / 数字（Fredoka 600 ✓） */
  --ce-fw-head:700;    /* 标题 / 关键数字（Fredoka 700 ✓ 上限 ✗ 不许 800/900） */

  /* =======================================================
     ⑦ 字体 —— ★ 只留 2 套 ✗ 且【不重新定义】✗ 只做别名 ✓
     -------------------------------------------------------
     现状 5 套变量在打架：
       --font-display / --font-body（themes.css ✓ 自托管 Fredoka + Inter ✓ 是"正规军"）
       --calf-round-font / --calf-body-font（v565.css + ui-type-scale.css ✗ 另一套字体栈 ✓）
       --mg-display（my-growth.css ✗ 又没有 Fredoka ✓）
     ⇒ 同一个页面里标题可能来自 3 套不同字体栈 ✗ 这就是用户说的"不像我们用的这些什么字体"✓
     对策：本文件只给【正规军】起别名 ✓ 其余三套在第 2 步逐步退役 ✓
     ★ fallback 只是"变量没定义时的兜底"✗ 正常情况下永远走 var() ✓
     ======================================================= */

  /* 展示字体（圆润）：标题 / 按钮 / 数字 / 品牌区。
     ⇒ 正常情况下走 themes.css 的 --font-display（ui-rounded → 自托管 Fredoka → 中文圆体）✓
     ★★ 第 2 步改动：兜底栈【改成与 themes.css 的 --font-display 逐项一致】✓
        为什么必须改 ✗：my-growth.html / 404.html 是【独立整页】✗ 它们不引 themes.css
        ⇒ --font-display 在那两页里【未定义】✗ 于是会走到本行的兜底栈 ✓
        如果兜底栈比真值短 ✗ 那两页的字体就会悄悄退化（实测：原兜底栈缺
        'Inter'/'Noto Sans SC'/'PingFang SC'/'Microsoft YaHei' ⇒ 汉字会掉到
        Chrome 的 last-resort 字体 ✗ 与改动前【不一致】✓）
        ⇒ 现在兜底 == 真值 ✗ 引不引 themes.css 都得到同一个链 ✓ 零位移 ✓ */
  --ce-font-display:var(--font-display,ui-rounded,'Fredoka','Yuanti SC','YouYuan','Inter','Noto Sans SC','Zen Maru Gothic','Nanum Square Round','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif);

  /* 正文字体：正文 / 表格 / 说明 / 表单。
     ⇒ 正常情况下走 themes.css 的 --font-body（Inter + Noto Sans SC）✓
     ★★ 第 2 步改动：兜底栈同样改成与 themes.css 的 --font-body 逐项一致 ✓
        （理由同上：my-growth.html / 404.html 不引 themes.css ✓） */
  --ce-font-body:var(--font-body,'Inter','Noto Sans SC','Nunito','Zen Maru Gothic','Nanum Square Round','PingFang SC','Hiragino Sans GB','Microsoft YaHei',ui-rounded,-apple-system,system-ui,sans-serif);

}

/* =========================================================
   ★★★ 第 2 步 ②：深色主题 aurora 的令牌重映射
   ---------------------------------------------------------
   问题：上面 33 个 --ce-* 全写在 :root ✗ 四个主题共用 ✓
     而 :root[data-theme="aurora"]（themes.css:62）是【深色底】✗
       --page = linear-gradient(135deg,#0f0e26,#1a1840 50%,#2d1b69)   ← 深紫黑
       --card = rgba(255,255,255,.06)                                  ← 半透明白
       --ink  = #f1f0fb（浅色）· --muted = #9c98c9（浅灰紫）
     ⇒ 一旦第 3 步把正文色指向 --ce-n-6（深墨 #2b2721）✗
       深色主题立刻变成【深字压深底】✗✗ 这就是第 1 步报告里的「必须决策 ①」✓
   对策：把【暖灰 6 级整体反转】✗ n-6 变近白 ✗ n-1 变近黑 ✓
     ★ 色相选择：不照搬暖灰（38°）✗ 而是取 aurora 自己的紫罗兰调（255°）
       理由：aurora 的底、卡片、描边全是紫色系 ✗ 硬塞暖灰会在深色底上
       显出"一块发黄的灰"✗ 与主题不合 ✓（浅色三主题仍走原暖灰 ✓ 语义不变 ✓）
     ★ 顺序语义【完全保留】：n-1 最浅（在浅色主题里）/ 最深（在这里）✗
       1 = 页面底 · 2 = 卡片内次级面 · 3 = 发丝线 ·
       4 = 说明文字（最低档）· 5 = 次级正文 · 6 = 主文字 ✓
     ★ 实测对比度（WCAG 2.1 ✗ 脚本算过 ✗ 见第 2 步报告）：
       背景取 aurora 的 9 种真实合成色（渐变三站 + --card 6% 白 + --card-soft 15% 紫）
       n-4 最差 5.12:1 ✓AA · n-5 最差 8.17:1 ✓AAA · n-6 最差 11.16:1 ✓AAA
       对照：现成 --ink #f1f0fb 最差 10.69:1 · --muted #9c98c9 最差 4.45:1（≈AA 边缘 ✓）
     ★ 阴影：浅色主题那三档是【暖棕 rgba(120,90,40,α)】✗ 在深色底上会变成
       "发黄的一圈"✗ 而且几乎看不见 ⇒ 本主题改用【纯黑 + 更高 alpha】✓
       （深色主题的标准做法 ✗ 深色底上的投影只有"更黑"这一个方向 ✓）
     ★ 主色 / 奖励色：按第 2 步指示【保持】✗ 不改 ✓
       （唯二要注意的：--ce-reward-ink #8a6410 是给【金色浅底】用的文字色 ✗
         若第 3 步直接把它放在深底上当文字 ✗ 只有 2.9:1 ✗ 需改用 --ce-reward 本身 ✓
         这一条登记给第 3 步 ✓）
   ========================================================= */

:root[data-theme="aurora"]{
  /* 1 级 —— 页面底（比渐变最暗的一站 #0f0e26 略亮 ✗ 好让"面上还有面"看得见） */
  --ce-n-1:#14122b;

  /* 2 级 —— 卡片内的次级面：表头 / 条纹行 / 未选中的分段底 */
  --ce-n-2:#201d40;

  /* 3 级 —— 发丝线：分割线 / 卡片描边（装饰性 ✗ 与浅色主题同语义）
     ★ 在 #1a1840 上是 1.52:1 ✗ 与浅色主题 n-3 的 1.45:1 基本同档 ✓ */
  --ce-n-3:#3b3568;

  /* 4 级 —— 说明文字 / 次要标签 / 占位符（★ 辅助文字的最低档 ✗ 不许比它更暗）
     ★ 最差 5.12:1 ✓AA（对照：aurora 现成的 --muted #9c98c9 最差 4.45:1 ✗ 略好） */
  --ce-n-4:#a9a3d8;

  /* 5 级 —— 次级正文 / 表头标题 / 数值单位。最差 8.17:1 ✓AAA */
  --ce-n-5:#d5d1f0;

  /* 6 级 —— 主文字 / 标题 / 关键数字。最差 11.16:1 ✓AAA
     ★ 与浅色主题的 --ce-n-6 #2b2721（白底 14.84:1）同档：都是"最高对比"那一级 ✓ */
  --ce-n-6:#f6f5ff;

  /* 阴影三档 —— 深色底专用：纯黑 + 更高 alpha（其余三主题保持暖棕低透明 ✓） */
  --ce-sh-1:0 1px 2px rgba(0,0,0,.45);
  --ce-sh-2:0 8px 24px rgba(0,0,0,.55);
  --ce-sh-3:0 20px 48px rgba(0,0,0,.65);
}