/* ════════════════════════════════════════════════════════════════════
   tokens.css —— 唯一设计令牌源（Single Source of Truth）
   ════════════════════════════════════════════════════════════════════

   【为什么存在这个文件】
   改造前：main.css 和 themes.css 各自定义了一遍 :root 色板，
   两者同名 token 相互覆盖（52 个里冲突 27 个）。由于 themes.css 在
   index.html 中加载于 main.css 之后，实际生效的是 themes.css 那套，
   导致 DESIGN.md 记载的设计规范从未真正生效。

   改造后：本文件是**唯一**定义色板的地方，加载顺序排第一。
   main.css / themes.css 只消费，不再定义同名 token。

   【主题模型】
   · night（默认）—— 现代深色，DESIGN.md 正典色板
   · day          —— night 的亮色变体（同一套色相与语义，仅翻转明暗）
   两者共享同一套语义命名，切换时只是数值变化，不会换掉视觉语言。

   【命名约定】
   · 表面层级  --surface-1 < --surface-2 < --surface-3（越靠上越亮）
   · 文字层级  --text-primary > secondary > muted > dim（越靠后越弱）
   · 透明变体  --X-rgb 存分量，供 rgba(var(--X-rgb), α) 使用
   ════════════════════════════════════════════════════════════════════ */

/* ─── 🌙 night —— 默认主题（DESIGN.md 正典）─────────────────────── */
:root,
:root[data-theme="night"],
body[data-theme="night"] {
  /* ── 方案 D：Radix sand + amber（暖调护眼） ──
     全部取自 radix-ui/colors 官方源码，非手工调色。
     层级阶梯 (sand1→4)：对比 1.074 / 1.105 / 1.107 —— 递进均匀 */

  /* 画布与表面 */
  --canvas-dark:    #0b0b0a;
  --canvas:         #111110;   /* sandDark1 */
  --surface-1:      #191918;   /* sandDark2 */
  --surface-2:      #222221;   /* sandDark3 */
  --surface-3:      #31312e;   /* sandDark5 —— 选中/激活态（Radix step5） */
  --surface-hover:  #2a2a28;   /* sandDark4 —— 悬停态（Radix step4）。
                                  注意：悬停比选中更暗 —— 「划过」轻、「选中」重，层级正确。
                                  原项目反之（hover #2e2e33 比 surface-3 #27272a 更亮），属倒置缺陷。 */

  /* 描边 —— P0 修复：改用半透明白。
     实色 hex 是绝对值，画在同色面片上必然消失（原 --border-subtle 与 --surface-3
     同为 #27272a，对比度精确 1.000）。半透明白 α 固定时对比关系恒定，永不消失。
     合成实测：canvas 1.30 / surface-1 1.33 / surface-2 1.36 / surface-3 1.36，极差仅 0.067 */
  --border-subtle:  rgba(255, 255, 255, 0.10);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.22);

  /* 文字（sand 官方步位） */
  --text-primary:   #eeeeec;   /* sandDark12 —— 16.26:1，非纯白，避免过曝 */
  --text-secondary: #b5b3ad;   /* sandDark11 —— 全层级达 AA，最差 6.86 */
  --text-muted:     #7c7b74;   /* sandDark10 —— 低对比文字，勿承载必读信息 */
  --text-dim:       #6f6d66;   /* sandDark9 —— 仅分隔符/占位 */

  /* 主色 —— P0 修复：amber 是「亮底 + 深字」，与 indigo/violet 的「深底 + 白字」相反。
     amber9 #ffc53d 上白字只有 1.58（崩溃），必须配深字 11.82 */
  --primary:         #ffc53d;   /* amberDark9  —— 背景角色（亮） */
  --primary-hover:   #ffd60a;   /* amberDark10 —— 悬停更亮，深字 13.21（对比度上升） */
  --primary-pressed: #ffca16;   /* amberDark11 —— 按下 */
  --text-on-primary: #16120c;   /* amberDark1  —— 亮底上的深字 11.82:1 */
  --on-primary:      #16120c;
  --on-primary-pressed: #16120c;
  --primary-rgb:     255, 197, 61;
  --primary-soft:    rgba(255, 197, 61, 0.15);
  --primary-text:    #ffca16;   /* amberDark11 —— 作文字色 12.34:1 */
  --primary-subtle:  #302008;   /* amberDark3  —— 不透明选中底 */
  --primary-border:  #714f19;   /* amberDark7  */

  /* 副强调 —— 与主色同属暖色族，避免「黄界面 + 紫强调」串色。
     accent-purple 承担「第二种强调」（列表标记、时间线标签、渐变副色），
     改用暖橙红，与琥珀主色色相差约 30°，区分度足够 */
  --accent-purple:  #ff8b5c;
  --accent-cyan:    #4cc9e0;
  --accent-emerald: #3dd68c;
  --accent:         #ffc53d;

  /* 语义 */
  --semantic-success: #22c55e;
  --semantic-warning: #f59e0b;
  --semantic-error:   #ef4444;
  --semantic-info:    #3b82f6;
  --success:          #22c55e;
  --danger:           #ef4444;

  /* 兼容别名（历史代码引用的旧名，统一指向语义色） */
  --info:    var(--semantic-info);
  --warning: var(--semantic-warning);

  /* ── 历史遗留别名（v7.0 补齐）─────────────────────────────────
     以下 token 在改造前被 JS/CSS 引用但**从未被定义过**。
     其中 --accent2 / --bg-canvas / --bg-card 连兜底值都没有，
     导致对应元素渲染成透明或继承色（如「财务手账」标题、关系图卡片底）。
     此处补齐为语义 token 的别名：让引用能正确解析，
     同时保持它们原本想表达的视觉意图不变。 */
  --accent2:       var(--accent);          /* 财务手账等标题强调色 */
  --bg-canvas:     var(--canvas);          /* 图表画布背景 */
  --bg-card:       var(--surface-1);       /* 图表卡片背景 */
  --card-bg:       var(--surface-1);       /* 采集页卡片背景 */
  --panel-bg:      var(--surface-1);       /* 面板背景 */
  --border-color:  var(--border-default);  /* 通用描边 */
  --text-color:    var(--text-primary);    /* 通用文字 */
  --primary-color: var(--primary);         /* 通用主色 */

  /* ── 历史遗留别名（v7.0 补齐）─────────────────────────────────
     以下 token 在改造前被 JS/CSS 引用但**从未被定义过**，
     其中 --accent2 / --bg-canvas / --bg-card 连兜底值都没有，
     导致对应元素渲染为透明/继承色。此处补齐为语义 token 的别名，
     保持既有视觉不变的同时让引用能正确解析。 */
  --accent2:        var(--accent);          /* 财务手账等标题强调色 */
  --bg-canvas:      var(--canvas);          /* 图表画布背景 */
  --bg-card:        var(--surface-1);       /* 图表卡片背景 */
  --card-bg:        var(--surface-1);       /* 采集页卡片背景 */
  --panel-bg:       var(--surface-1);       /* 面板背景 */
  --border-color:   var(--border-default);  /* 通用描边 */
  --text-color:     var(--text-primary);    /* 通用文字 */
  --primary-color:  var(--primary);         /* 通用主色 */

  /* 阴影 */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-card:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.6);
  --glow:         0 0 20px rgba(255, 197, 61, 0.15);

  /* 背景 */
  --bg-gradient: linear-gradient(180deg, #0b0b0a 0%, #111110 100%);

  /* 侧边栏 */
  --sidebar-bg:   #0c0c0b;
  --sidebar-text: #d6d4cf;

  /* ── 字号阶梯（P1 新增）────────────────────────────────────
     整治前：全站 66 种不同 font-size（23 种 px + 43 种 rem/em 碎片），
       .7rem/.74rem/.76rem/.78rem/.84rem/.86rem 并存 = 无系统。
     归并为 9 级，覆盖 95% 用量。层级按「中文可读性」排：
       正文下限 13px；中文长正文须 16px（方块字需更大字号才不局促）。
     注：64px 仅用于 404/空状态大字，不走本阶梯。 */
  --fs-2xs:  10px;   /* 微型标注、计数徽章 */
  --fs-xs:   11px;   /* 大写标签、表头、侧栏小节 */
  --fs-sm:   12px;   /* 辅助文字、元信息、时间戳 */
  --fs-base: 13px;   /* 紧凑正文、列表项 */
  --fs-md:   14px;   /* 标准正文、表单、按钮 */
  --fs-lg:   16px;   /* 中文长正文、编辑器 */
  --fs-xl:   18px;   /* 卡片标题、模态标题 */
  --fs-2xl:  24px;   /* 区块标题 */
  --fs-3xl:  32px;   /* 页面主标题 */

  /* 行高（与字号配对使用） */
  --lh-tight:  1.25;  /* 大标题 */
  --lh-snug:   1.4;   /* 小标题、紧凑块 */
  --lh-normal: 1.6;   /* UI 正文 */
  --lh-relaxed: 2;    /* 中文长正文 —— W3C clreq 规定行距为字框 50%–100%，
                         CSS line-height 对应 1.50–2.00，2.0 在合法区间上沿 */

  /* 字重 */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* 圆角 */
  --rounded-xs:   4px;
  --rounded-sm:   6px;
  --rounded-md:   8px;
  --rounded-lg:   12px;
  --rounded-xl:   16px;
  --rounded-full: 9999px;

  /* 间距（4px 基准） */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-3xl: 40px;
  --space-section: 64px;
  /* 兼容别名：历史代码引用 --spacing-*，统一指向新名 */
  --spacing-xxs: var(--space-xxs);
  --spacing-xs:  var(--space-xs);
  --spacing-sm:  var(--space-sm);
  --spacing-md:  var(--space-md);
  --spacing-lg:  var(--space-lg);
  --spacing-xl:  var(--space-xl);
  --spacing-xxl: var(--space-xxl);
  --spacing-xxxl: var(--space-3xl);
  --spacing-section: var(--space-section);

  /* 排版 —— 系统字体栈（中文优先，无需网络字体）
     原 DESIGN.md 写的是 Inter，但项目从未引入该字体文件，
     浏览器实际回退到系统字体。此处改为如实描述，并同步更新 DESIGN.md。 */
  --font-sans:  -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                "Segoe UI", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --font-body:  var(--font-sans);
  --font-serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong",
                Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;

  /* 动效 */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  0.13s;
  --dur-base:  0.2s;
  --dur-slow:  0.35s;
  /* 兼容别名：历史代码引用 --transition-* */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* 布局 */
  --sidebar-width:           260px;
  --sidebar-collapsed-width: 56px;
  --topbar-height:           60px;

  /* 兼容别名：历史代码引用 --shadow-glow */
  --shadow-glow: var(--glow);

  /* 主题标识（供 JS 判断当前明暗） */
  --is-dark: 1;
}

/* ─── ☀️ day —— night 的亮色变体（同一套色相，仅翻转明暗）─────────
   设计原则：不是另一套「古风配色」，而是同一视觉语言的亮色版本。
   色相同为暖调（sand 灰阶 + amber 主色），仅翻转明暗方向。
   主色在亮色下必须用深琥珀（amber9 #ffc53d 在白底仅 1.58:1，不可用）。 */
:root[data-theme="day"],
body[data-theme="day"] {
  /* 画布与表面（亮色向下变暗，与暗色向上变亮相对称） */
  --canvas-dark:    #f5f4f2;
  --canvas:         #fdfdfc;   /* sand1 */
  --surface-1:      #f9f9f8;   /* sand2 */
  --surface-2:      #f1f0ef;   /* sand3 */
  --surface-3:      #e1e0dd;   /* sand5 —— 选中/激活态 */
  --surface-hover:  #e9e8e6;   /* sand4 —— 悬停（比选中浅，语义与暗色对称） */

  /* 描边 —— 亮色同样必须用半透明：实色在亮底也会塌陷。
     半透明黑合成实测：canvas 1.23 / surface-3 1.22，极差仅 0.01 */
  --border-subtle:  rgba(0, 0, 0, 0.09);
  --border-default: rgba(0, 0, 0, 0.14);
  --border-strong:  rgba(0, 0, 0, 0.22);

  /* 文字（sand 官方步位） */
  --text-primary:   #21201c;   /* sand12 —— 12.35:1，非纯黑，避免过曝 */
  --text-secondary: #63635e;   /* sand11 —— 4.58:1 达 AA */
  --text-muted:     #6e6e68;   /* 由 sand10 #82827c 插值压暗 —— 原值在 surface-3 仅 2.93，不达标 */
  --text-dim:       #82827c;   /* sand10 —— 仅分隔符/占位 */

  /* 主色 —— 亮色下 amber9 太浅（白底 1.58），必须用深琥珀 + 白字 */
  --primary:         #ab6400;   /* amber light 11 —— 白字 4.61 ✅ */
  --primary-hover:   #7a4900;   /* 更深 —— 悬停对比度上升（与暗色同一原则：往深处走） */
  --primary-pressed: #4f3422;   /* amber light 12 */
  --text-on-primary: #ffffff;
  --on-primary:      #ffffff;
  --on-primary-pressed: #ffe7b3;  /* pressed 底色变深，切回浅字 */
  --primary-rgb:     171, 100, 0;
  --primary-soft:    rgba(171, 100, 0, 0.10);
  --primary-text:    #8f5500;   /* 作文字色 */
  --primary-subtle:  #fff7e0;   /* amber light 2 */
  --primary-border:  #e8c98f;   /* amber light 7 */

  /* 副强调（同色相，压暗） */
  --accent-purple:  #c62a08;
  --accent-cyan:    #00749e;
  --accent-emerald: #2a7e3b;
  --accent:         #ab6400;

  /* 语义（同色相，压暗以满足对比度） */
  --semantic-success: #16a34a;
  --semantic-warning: #d97706;
  --semantic-error:   #dc2626;
  --semantic-info:    #2563eb;
  --success:          #16a34a;
  --danger:           #dc2626;

  /* 阴影（亮底用更轻的投影） */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.14);
  --shadow-card:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.18);
  --glow:         0 0 20px rgba(171, 100, 0, 0.12);

  --bg-gradient: linear-gradient(180deg, #fdfdfc 0%, #f1f0ef 100%);

  --sidebar-bg:   #ffffff;
  --sidebar-text: #3f3f46;

  --is-dark: 0;
}

/* ─── auto —— 跟随系统 ─────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"], body[data-theme="auto"] {
    --canvas-dark:    #f5f4f2;
    --canvas:         #fdfdfc;
    --surface-1:      #f9f9f8;
    --surface-2:      #f1f0ef;
    --surface-3:      #e1e0dd;
    --surface-hover:  #e9e8e6;
    --border-subtle:  rgba(0, 0, 0, 0.09);
    --border-default: rgba(0, 0, 0, 0.14);
    --border-strong:  rgba(0, 0, 0, 0.22);
    --text-primary:   #21201c;
    --text-secondary: #63635e;
    --text-muted:     #6e6e68;
    --text-dim:       #82827c;
    --primary:         #ab6400;
    --primary-hover:   #7a4900;
    --primary-pressed: #4f3422;
    --on-primary:      #ffffff;
    --on-primary-pressed: #ffe7b3;
    --primary-rgb:     171, 100, 0;
    --primary-soft:    rgba(171, 100, 0, 0.10);
    --primary-text:    #8f5500;
    --primary-subtle:  #fff7e0;
    --primary-border:  #e8c98f;
    --accent-purple:  #c62a08;
    --accent-cyan:    #00749e;
    --accent-emerald: #2a7e3b;
    --accent:         #ab6400;
    --semantic-success: #16a34a;
    --semantic-warning: #d97706;
    --semantic-error:   #dc2626;
    --semantic-info:    #2563eb;
    --success:          #16a34a;
    --danger:           #dc2626;
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-card:  0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.18);
    --bg-gradient: linear-gradient(180deg, #fdfdfc 0%, #f1f0ef 100%);
    --glow:         0 0 20px rgba(171, 100, 0, 0.12);
    --sidebar-bg:   #f9f9f8;
    --sidebar-text: #3f3e3a;
    --is-dark: 0;
  }
}
/* auto + 系统暗色 → 沿用 night 默认值，无需重声明 */

/* ════════════════════════════════════════════════════════════════════
   语义色工具类 —— 供 JS 拼接 HTML 时替代硬编码色值
   （改造前有 269 个规范外 hex 与 463 个手写 rgba，主要来源就是
     JS 里直接写颜色。此处提供语义类，逐步替换。）
   ════════════════════════════════════════════════════════════════════ */
.c-success { color: var(--semantic-success); }
.c-warning { color: var(--semantic-warning); }
.c-error   { color: var(--semantic-error); }
.c-info    { color: var(--semantic-info); }
.c-primary { color: var(--primary); }
.c-purple  { color: var(--accent-purple); }
.c-cyan    { color: var(--accent-cyan); }
.c-emerald { color: var(--accent-emerald); }
.c-muted   { color: var(--text-muted); }
.c-dim     { color: var(--text-dim); }

.bg-success { background: rgba(34, 197, 94, 0.12); }
.bg-warning { background: rgba(245, 158, 11, 0.12); }
.bg-error   { background: rgba(239, 68, 68, 0.12); }
.bg-info    { background: rgba(59, 130, 246, 0.12); }
.bg-primary { background: rgba(var(--primary-rgb), 0.12); }
.bg-purple  { background: rgba(255, 139, 92, 0.12); }