/* tokens.css — 全站设计变量（ink P12 · 界面改造第一刀）
   ────────────────────────────────────────────────────────────────────────
   为什么有这个文件：
   改造前全系统只有 13 个共享变量（全是颜色的表层：bg/surface/border/text/accent），
   间距、字号、圆角、层级、语义色、密度**一个都没有**。于是 48 份房间 CSS 里
   各写各的：30 种字号、21 种圆角、27 种内边距、193 个手挑的颜色。
   同一个「成了」在不同房间是不同的绿，同一张卡在不同房间是不同的圆角。

   这个文件是那些缺失刻度的唯一出处。**shell.html 里原有的 13 个变量一个不动**
   （48 份 CSS 都在用，改名会静默炸掉一片），新旧并存、逐步迁移。

   色板底座 = Radix Colors 的 12 阶语义分配，不是手挑的：
       1-2 页面底 / 3-5 组件背 / 6-8 边框 / 9-10 实心 / 11 次要字 / 12 主字
   语义色一律取「11 = 字 · 3 = 底 · 6 = 边 · 9 = 实心」，明暗各一套。
   对比度不是拍脑袋说够——`tests/test_css_contrast.py` 逐对算 WCAG 比值，
   低于 4.5:1 直接红。改色值前先看那条测试。

   钉住这个文件的闸：
     tests/test_css_tokens.py    模块 CSS 只许用这里 + shell.html 真有的变量
     tests/test_css_contrast.py  语义色明暗两套都要过 4.5:1
     tests/test_css_no_hex.py    试点房间的 CSS 里不许再出现 #hex
*/

:root {
  /* ── 间距 · 4 的倍数，只准用这 8 档（改造前 27 种内边距）────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* ── 字号 · 只准用这 6 档（改造前 30 种）───────────────────────────── */
  --fs-xs: .75rem;    /* 12px  辅助行、单位、脚注 */
  --fs-sm: .8125rem;  /* 13px  表格正文、次要信息 */
  --fs-md: .875rem;   /* 14px  正文默认 */
  --fs-lg: 1rem;      /* 16px  房间标题、卡片标题 */
  --fs-xl: 1.25rem;   /* 20px  抽屉标题 */
  --fs-2xl: 1.75rem;  /* 28px  指标卡主数 */
  --lh-tight: 1.3; --lh-normal: 1.55; --lh-loose: 1.8;
  --fw-normal: 400; --fw-med: 500; --fw-bold: 600;

  /* ── 圆角 · 只准用这 4 档（改造前 21 种）───────────────────────────── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;

  /* ── 层级 · 影子只准从这里取（--shadow 在 shell.html，随明暗换）────── */
  --el-1: 0 1px 2px var(--shadow);
  --el-2: 0 4px 12px var(--shadow);
  --el-3: 0 12px 32px var(--shadow);

  /* ── 字体栈 ────────────────────────────────────────────────────────
     数字：全站金额 / 百分比 / 数量一律走 --font-num，**必须同时**
     font-variant-numeric: tabular-nums，否则同一列的数字对不齐。
     .u-num 已经把这两件事绑在一起了，优先用它。
     正文：打印 PDF 时 -apple-system 会让中文字形整片消失，打印样式里另换栈。 */
  --font-num: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Noto Sans SC", "Segoe UI", sans-serif;
  --font-print: "PingFang SC", "Noto Sans SC", "Songti SC", "Microsoft YaHei", sans-serif;

  /* ── 密度 · 表格行高三档，房间挑一档，不许自己编数字 ────────────────
     compact = 一屏塞得下最多行（对账、明细）
     normal  = 默认（索引表）
     tall    = 一行两层信息（主行 + 次行）时用 */
  --row-compact: 32px; --row-normal: 40px; --row-tall: 56px;
  /* 看板一列的最小宽。列少时 1fr 把宽度分完，列多到挤不下才横向滚。
     状态轴特别长的房间可以在房间根上调低换「一屏看全」，别调到卡片读不动。 */
  --board-col-min: 220px;

  /* ── 焦点环 · 键盘可达的唯一写法（两层：先描底色再描 accent，任何底上都看得见）── */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ── 动效 ─────────────────────────────────────────────────────────── */
  --dur-fast: .12s; --dur-base: .2s; --ease: cubic-bezier(.2, 0, 0, 1);

  /* ── 实心填充上的字色 · 由 ui.js 按 --accent 的亮度实时算（见 syncOnAccent）
     这里给的是没跑 JS 时的兜底。改造前 treasury.css 写死 color:#1a1a1a，
     换成 ocean 主题就成了蓝底黑字。 */
  --on-accent: #101010;
  /* 语义实色（--danger-solid / --ok-solid / --k-*）上的字色。这些实色两个模式下都
     够深，白字都够对比；日历那一版原来把 #fff 写死在房间里，被 no-hex 闸拦下（08-18）。
     黄色系实色（--warn-solid）上用 --on-accent（深字），别用这个。 */
  --on-solid: #ffffff;
  /* 纸白：渲出来的文档页面（首页缩略图 / PDF 视图）的底色。两个模式下都是白 ——
     文件是白纸黑字，暗色模式下跟着变黑就是黑纸黑字，什么都看不见（2026-08-18）。 */
  --paper: #ffffff;

  /* ── accent 当「字」用时的安全色 · 同样由 ui.js 实时算 ────────────────
     accent 做填充安全，做文字未必：白天模式下七个主题色**全部**不到 4.5:1，
     品牌金 #D4AF37 只有 1.84:1。凡是 color: 用 accent 的地方（房间高亮、
     链接、ghost 悬停）一律改用这一个。填充、描边、状态点继续用 --accent。
     兜底 = accent 本身，JS 没跑起来时至少颜色对。 */
  --accent-text: var(--accent);

  /* ── 实心按钮顶部的内高光 · 让主操作有厚度，不是一块平色 ──────────────
     暗色里白高光有效；亮色里同样的白高光会把按钮顶边洗白，所以明色档调弱。 */
  --hi-inset: inset 0 1px 0 rgba(255, 255, 255, .18);

  /* 悬停时表面提亮一档。color-mix 朝 --text 走：暗色变亮、亮色变暗，
     一条规则两种模式都对，不用写两遍。 */
  --surface-hover: color-mix(in srgb, var(--surface-3) 90%, var(--text) 10%);

  /* accent 的淡染底（ghost 悬停、选中行）。色值必须住在这里：
     ui.css 是组件层，tests/test_ui_components.py 不许它出现 rgba()/#hex。 */
  --accent-tint: rgba(var(--accent-rgb), .12);
}

/* ══ 语义色 · 暗色（默认外观，与 shell.html 的 :root, :root[data-mode="dark"] 同口径）══
   每个状态四个位：fg 字 / bg 底 / bd 边 / solid 实心点。
   取自 Radix 暗色阶 11 / 3 / 6 / 9。 */
:root, :root[data-mode="dark"] {
  --ok-fg: #3dd68c;      --ok-bg: #132d21;      --ok-bd: #20573e;      --ok-solid: #30a46c;
  --warn-fg: #ffca16;    --warn-bg: #302008;    --warn-bd: #5c3d05;    --warn-solid: #ffc53d;
  --danger-fg: #ff9592;  --danger-bg: #3b1219;  --danger-bd: #72232d;  --danger-solid: #e5484d;
  --info-fg: #70b8ff;    --info-bg: #0d2847;    --info-bd: #104d87;    --info-solid: #0090ff;
  --neutral-fg: #b0b4ba; --neutral-bg: #212225; --neutral-bd: #363a3f; --neutral-solid: #696e77;
}

/* ══ 语义色 · 明色 ══  Radix 明色阶 11 / 3 / 6 / 9 */
:root[data-mode="light"] {
  --ok-fg: #1f7a52;      --ok-bg: #e6f6eb;      --ok-bd: #adddc0;      --ok-solid: #30a46c;
  --warn-fg: #96550a;    --warn-bg: #fff7c2;    --warn-bd: #f3d673;    --warn-solid: #ffc53d;
  --danger-fg: #ce2c31;  --danger-bg: #feebec;  --danger-bd: #fdbdbe;  --danger-solid: #e5484d;
  --info-fg: #0c6dc2;    --info-bg: #e6f4fe;    --info-bd: #acd8fc;    --info-solid: #0090ff;
  --neutral-fg: #60646c; --neutral-bg: #f0f0f3; --neutral-bd: #d9d9e0; --neutral-solid: #8b8d98;
  /* 白底上的白高光等于没有，还会把按钮顶边洗掉一道 —— 明色档改成朝下的暗内影 */
  --hi-inset: inset 0 -1px 0 rgba(0, 0, 0, .12);
}

/* ══ 图表序列色 · 暗色 ════════════════════════════════════════════════
   Asher 2026-08-24 要账房出饼图，而这个文件此前**一个能给图表用的颜色都没有** ——
   语义色（ok/warn/danger/info）不能拿来当分类色：它们在别处的意思是「成了 / 该注意 /
   坏了」，涂到饼图上，「写手稿费」会因为拿到红色而看起来像出事了。

   一套六色，够用且必须够用 —— 超过六片的饼图人已经读不出来了，第七类起并成「其他」。
   取值规矩（跟 astra-charts 那边同一条）：
     · **低饱和**，不要糖果色：这是后台不是幻灯片，一屏还有表格和数字要读
     · **同一明度带**，只换色相 —— 明度也跟着变的话，深的那几片会被读成「更重要」
     · 明暗两套各自校对，暗色档抬明度、明色档压明度，保证白字/黑字都压得住
   顺序按色相绕一圈排，相邻两片永远不同色系（挨着的扇形最容易被看成一块）。 */
:root, :root[data-mode="dark"] {
  --c1: #6e9ec5;   /* 雾蓝 */
  --c2: #8fae7e;   /* 苔绿 */
  --c3: #c9a06a;   /* 沙金 */
  --c4: #a98bb5;   /* 灰紫 */
  --c5: #7fb3ad;   /* 烟青 */
  --c6: #c4877f;   /* 陶土 */
}

/* ══ 图表序列色 · 明色 ══  同色相，压一档明度让白底上压得住 */
:root[data-mode="light"] {
  --c1: #4a7ba7;
  --c2: #6b8f58;
  --c3: #a67c3f;
  --c4: #86639a;
  --c5: #4f8f87;
  --c6: #a55f56;
}

/* 打印：中文字形保命（-apple-system 在打印管线里会整片消失，见记忆库同名条） */
@media print {
  :root { --font-sans: var(--font-print); }
}

/* 系统偏好「减少动态效果」时，全站动效归零 —— 一处改，所有组件跟着 */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur-base: 0s; }
}