/* =========================================================
   基金从业 · 设计令牌
   方向：批注本 · 荧光笔 · 法条宋体
   --------------------------------------------------
   为什么是这套方向（不是上一版的暖纸+圆角卡）：
   1. 暖奶油底 + 陶土色 + 圆角卡套是 AI 生成界面的典型特征，
      无穷的统一卡片会让人一眼看出是模板。这里改成冷调纸白
      + 荧光笔色，模拟「拿荧光笔在讲义上划重点」这个真实动作。
   2. 法条、准则原文都是宋体印刷的，所以标题走宋体，
      和正文的黑体拉开一个明确的对比层级。
   3. 荧光黄是全站唯一的高饱和色，只用在「标记为重点」这个动作上。
      大胆只花在一处，其余保持安静。
   4. 页面主体不是一堆等大圆角卡，而是连续文档流 + 行，
      只有真正需要被点击的东西才给卡片。
   ========================================================= */

:root {
  /* ---------- 中性色：冷调纸白（非奶油） ---------- */
  --paper-0:  #ffffff;   /* 卡面纯白 */
  --paper-50: #f4f6f8;   /* 页面底：冷灰白，像打印纸 */
  --paper-100:#eceff3;   /* 分组底 */
  --paper-200:#e0e5eb;   /* 分隔线 */
  --paper-300:#ccd4dd;   /* 边框 */

  /* ---------- 墨色：偏冷的黑，不做 near-black 假黑 ----------
     坑（2026-10-03 WCAG 实算抓到，本项目最严重的一处假绿）：
     --ink-300 原来是 #99a3ae，在页面底 #f4f6f8 上只有 **2.36:1**，
     远低于 WCAG AA 的 4.5:1。而它被 11 处引用
     （.note / .mode-go / .mk-note / 占位符 / 分章小字…），
     也就是说全站所有"次要说明文字"在亮色下都是半隐形的。

     为什么一直没被发现：对比度检查的正则写在 Python 的 r""" 里，
     `\\(` 保留成两个字面反斜杠，JS 正则 /rgba?\\(/ 匹配的是
     "rgb 后面跟一个反斜杠再跟括号"——**永远匹配不到任何颜色**，
     parse() 恒返回 null，于是每个元素都被 `if (!fg) return` 跳过。
     7 条"对比度达标"从来没量过任何一个元素。

     修法是改 token 而不是给 11 处各打补丁：
     --ink-300 定位是"最淡一档"，但最淡也必须读得清。
     #66707c 在页面底上实测 4.64:1，视觉上仍是明显的弱化文字。 */
  --ink-900: #14181d;
  --ink-700: #38414b;
  --ink-500: #626d79;
  --ink-300: #66707c;

  /* ---------- 荧光笔四色：全站的高饱和额度 ---------- */
  --hl-y: #ffe24a;   /* 黄：记重点 */
  --hl-y-soft: #fff7cf;
  --hl-p: #ff9ec4;   /* 粉：记陷阱 */
  --hl-p-soft: #ffe6ef;
  --hl-g: #a8e89b;   /* 绿：记「答对了」 */
  --hl-g-soft: #e3f8de;
  --hl-b: #a3d5ff;   /* 蓝：记定义 */
  --hl-b-soft: #e2f0ff;

  /* ---------- 章节色：马克笔色系，明度统一 ---------- */
  --c1: #f2733f;  /* 金融市场     橙 */
  --c2: #12a594;  /* 基金概述     青绿 */
  --c3: #7a5af0;  /* 法规体系     紫 */
  --c4: #2a7fd4;  /* 从业人员     蓝 */
  --c5: #e03e63;  /* 基金活动     玫红 */
  --c6: #d99000;  /* 合规风控     琥珀 */
  --c7: #35a24a;  /* 职业道德     绿 */
  --c8: #c4519a;  /* 金融文化     品红 */

  /* ---------- 语义色 ---------- */
  /* bad/ok 这两档是"文字色"档，落在自己的淡底上必须 ≥4.5:1。
     坑（2026-10-03 实算）：原来是 #1f9d4d / #e03e63，
     在 --ok-bg / --bad-bg 上分别只有 3.6 / 3.5。
     它们跟"图标色"不是一回事——图标不需要读，文字需要。
     整块告警底用的深色版另立 --bad-solid / --ok-solid。 */
  --ok:   #177a3c;
  --ok-bg:#e4f6e9;
  --bad:  #b3185a;
  --bad-bg:#fdeaf0;
  --warn: #8a5c00;
  --warn-bg:#fbf0d9;
  --info: #1f66ad;
  --info-bg:#e6f1fc;

  /* ---------- 品牌：用一个克制的墨蓝做主按钮 ----------
     不跟荧光笔抢高饱和额度，主按钮靠重量而非颜色取胜 */
  --brand:      #1f4f9c;
  --brand-deep: #163d7d;
  --brand-soft: #e7effa;
  --brand-ink:  #ffffff;

  /* ---------- 圆角：小而克制 ----------
     文档流不需要大圆角，需要点按的元素才给胶囊 */
  --r-xs: 4px;
  --r-sm: 7px;
  --r:    10px;
  /* 坑（2026-10-03 全局变量扫描抓到）：--r-md 被 app.css 里 7 处
     当作"卡片圆角"在用，但从来没定义过。
     var() 遇到未定义变量会解析成"无效值"，
     border-radius 被整条丢弃 → 那 7 处全部退回 0 圆角，
     视觉上是"某几张卡片突然变成直角"，不报错、很难联想到是变量问题。
     值取12px：介于 --r(10px) 与 --r-lg(14px) 之间，视觉上不突兀。 */
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- 阴影：薄，只用来脱离纸面 ----------
     厚阴影是卡片套的同伙，薄阴影才是「纸叠纸」 */
  --sh-1: 0 1px 2px rgba(20,24,29,.06);
  --sh-2: 0 1px 2px rgba(20,24,29,.06), 0 4px 10px rgba(20,24,29,.06);
  --sh-3: 0 2px 4px rgba(20,24,29,.07), 0 10px 22px rgba(20,24,29,.08);
  --sh-press: 0 1px 2px rgba(20,24,29,.10);

  /* ---------- 字号阶梯：正文不小于 15px ---------- */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15.5px;
  --fs-lg: 18px;
  --fs-xl: 21px;
  --fs-2xl: 25px;
  --fs-3xl: 31px;

  /* ---------- 间距 ---------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 22px; --s6: 30px; --s7: 42px;

  --tap: 48px;
  --shell: 560px;
  --docw: 40em;        /* 讲义正文栏宽，约 36-40 汉字 */

  /* ---------- 字体 ----------
     宋体做标题：法条原文就是宋体印的，这不是装饰选择
     黑体做正文：小字号下宋体笔画会糊 */
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC",
                "SimSun", "宋体", Georgia, serif;
  --font: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans SC", -apple-system, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* 章节色动态注入：由 JS 设置 --ch 到容器上 */
  --ch: var(--brand);
  --ch-soft: var(--brand-soft);
}

/* 深色模式：像夜灯下的讲义，冷灰底 + 荧光笔变亮 */
html[data-theme="night"] {
  --paper-0:  #1c2126;
  --paper-50: #14181c;
  --paper-100:#232a30;
  --paper-200:#333b43;
  --paper-300:#48525c;

  --ink-900: #eef2f6;
  --ink-700: #c2cad3;
  /* 夜间 --ink-500 原为 #8f9aa6，在纸面 #1c2126 上实测只有 3.38:1。
     深色模式的墨色整体比亮色亮，直接沿用亮色的档位关系会不够——
     深底上要"更亮"才等效于浅底上"更深"。提到 #9ba6b2（7.21:1）。 */
  --ink-500: #9ba6b2;
  /* 夜间 --ink-300 原为 #6b7681，在纸面 #14181c 上只有 3.85:1。
     和 --ink-500 同一个道理：深底上要更亮才等效。#8a96a2 实测 5.92:1，
     仍是"最淡一档"（比 --ink-500 淡），但读得清。 */
  --ink-300: #8a96a2;

  --hl-y: #f5d63c;
  --hl-y-soft: #4a4218;
  --hl-p: #ef85ac;
  --hl-p-soft: #4a2733;
  --hl-g: #86cf7a;
  --hl-g-soft: #23401f;
  --hl-b: #85bdf0;
  --hl-b-soft: #1e3348;

  --brand:      #5f9ae8;
  --brand-deep: #86b6ef;
  --brand-soft: #1d2c40;
  --brand-ink:  #0f1418;

  --ok-bg:   #1a3a25;
  --bad-bg:  #3f2029;
  --warn-bg: #3b3116;
  --info-bg: #1c2f42;

  /* 夜间语义色要更亮：深底上"更亮"才等效于浅底上"更深"，
     亮色那档直接搬过来在 --*-bg 上只有 3.5 左右。 */
  --ok:   #4fce7c;
  --bad:  #ff9db7;
  --warn: #e0a53a;
  --info: #7fb5f0;

  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 1px 2px rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.28);
  --sh-3: 0 2px 4px rgba(0,0,0,.34), 0 10px 22px rgba(0,0,0,.32);
  --sh-press: 0 1px 2px rgba(0,0,0,.36);
}