/* ═══════════════════════════════════════════════════════════════════
   tokens.css —— 取值层。整个前端只有这一份实现，任何页面不另抄一份。
   替换 style.css 顶部那一段。这里只有变量，没有构件（构件在 ui.css）。

   四个轴，全部由根元素上的属性驱动，运行时可切：
     data-tone    = light | dark      （默认 light）
     data-density = dense | loose     （默认 dense）
     --fs-mult    = 0.85 … 1.25       （默认 1）
     --w-strong   = 400 | 600         （默认 400）
     --acc-h      = 强调色色相，个性化里可换（默认 44，珊瑚）

   配色是「Claude 浅」那一套：暖米白的纸、墨色的字、珊瑚的强调。
   与交底给的取值有一处出入：`--acc` 用的是比 #d97757 深一档的珊瑚。
   理由是 #d97757 同时承担按钮底与链接字两件事，而它在米白底上作字色
   只有 2.9:1，13px 读不清；深一档之后作字色 4.7:1、作按钮底配白字 4.9:1，
   两头都够，色相与暖度不变。要那个更亮的珊瑚，改 --acc 的明度即可。

   深色那一套原来是没人认真看过的冷灰＋蓝，这里换成同一族的暖近黑
   （Claude 桌面那种色温），强调色仍是珊瑚，所以切配色时界面的辨识
   特征不变（`02-界面风格.md` 第三节，答案取「不变」）。
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 字体：全部系统自带，不下载 ────────────────────────────── */
  --font-ui: var(--font-pick, ), "Segoe UI", -apple-system, "SF Pro Text",
             "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",
             "Noto Sans SC", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono",
               "Noto Sans Mono", monospace;

  /* ── 字号：随容器宽度自适应，再乘个性化倍率 ────────────────── */
  --fs-mult: 1;
  --fs-base: calc(clamp(13px, 11.6px + 0.32vw, 16px) * var(--fs-mult));
  --fs1: calc(var(--fs-base) * 0.79);   /* 表头、标签、说明 */
  --fs2: calc(var(--fs-base) * 0.86);   /* 表格内容、次要文字 */
  --fs3: var(--fs-base);                /* 正文与全部控件 */
  --fs4: calc(var(--fs-base) * 1.14);   /* 标题 */
  --fs5: calc(var(--fs-base) * 1.45);   /* 统计数值 */

  /* ── 字重：默认不加粗，层级靠字号与字色 ────────────────────── */
  --w-strong: 400;

  /* ── 间距、圆角、行高：五档／两档，没有第六档 ──────────────── */
  --sp1: 4px;  --sp2: 8px;  --sp3: 12px; --sp4: 16px; --sp5: 24px;
  --r-sm: 4px; --r-md: 6px;
  --cell-y: 5px; --cell-x: 10px;
  --lh: 1.5;
  --zebra-on: 0;      /* 斑马纹只在宽松版式下开 */
  --card-line: 1px;   /* 卡片边框只在致密版式下画 */
  --stick-h: 0px;     /* 表头吸附的顶边。默认 0：滚动区顶上没有别的固定东西 */
}

/* 选择器不锁在根元素上：这样任意一块子树都能重新声明这一套值，
   状态册里那种「同一页里并排看深浅」才成立。根元素上照旧生效。 */
[data-density="loose"] {
  --fs1: calc(var(--fs-base) * 0.82);
  --fs2: calc(var(--fs-base) * 0.88);
  --fs4: calc(var(--fs-base) * 1.16);
  --fs5: calc(var(--fs-base) * 1.70);
  --sp1: 6px;  --sp2: 12px; --sp3: 18px; --sp4: 24px; --sp5: 36px;
  --r-sm: 6px; --r-md: 10px;
  --cell-y: 9px; --cell-x: 14px;
  --lh: 1.62;
  --zebra-on: 1;
  --card-line: 0px;
}

/* ── 浅：暖米白＋墨＋珊瑚 ────────────────────────────────────
   --fg3 对 --bg 是 5.2:1；它承担每一段说明与统计块的键名，不是装饰字。 */
:root, [data-tone="light"] {
  --acc-h: 44;

  --bg:        #faf9f5;
  --surface:   #ffffff;
  --surface2:  #f2f0ea;
  --line:      #e0ddd1;
  --fg:        #141413;
  --fg2:       #3d3d3a;
  --fg3:       #757168;

  --acc:       oklch(53% 0.128 var(--acc-h));
  --acc-2:     oklch(45% 0.118 var(--acc-h));
  --acc-soft:  oklch(96.5% 0.018 var(--acc-h));
  --acc-line:  oklch(84% 0.062 var(--acc-h));
  --on-acc:    #ffffff;

  --ok:        #4a7b00; --ok-soft:   #f1f7e8; --ok-line:   #cfe0b3;
  --warn:      #8a5a00; --warn-soft: #fbf6ea; --warn-line: #e8d8a8;
  --bad:       #b03a30; --bad-soft:  #f9eded; --bad-line:  #eec4c4;

  --hover:     #f5f2ec;
  --sel:       oklch(94.5% 0.03 var(--acc-h));
  --zebra:     #fbfaf7;

  --scrim:     rgba(30, 26, 20, 0.38);
  --shadow:    0 10px 30px rgba(40, 33, 24, 0.16);

  /* 序列色：只用于图表，规则见文件末尾 */
  --sr1: oklch(53% 0.128 44);
  --sr2: oklch(53% 0.105 96);
  --sr3: oklch(50% 0.105 150);
  --sr4: oklch(52% 0.085 190);
  --sr5: oklch(50% 0.115 227);
  --sr6: oklch(50% 0.115 300);
}

/* ── 深：同一族的暖近黑，强调色仍是珊瑚 ─────────────────────── */
[data-tone="dark"] {
  --acc-h: 44;

  --bg:        #1b1a18;
  --surface:   #262523;
  --surface2:  #30302c;
  --line:      #3e3c37;
  --fg:        #f2efe8;
  --fg2:       #b3aea4;
  --fg3:       #8e887e;

  --acc:       oklch(74% 0.108 var(--acc-h));
  --acc-2:     oklch(82% 0.085 var(--acc-h));
  --acc-soft:  oklch(28% 0.045 var(--acc-h));
  --acc-line:  oklch(45% 0.075 var(--acc-h));
  --on-acc:    #1b1a18;

  --ok:        #86c34e; --ok-soft:   #1d2617; --ok-line:   #3b5227;
  --warn:      #dca63f; --warn-soft: #272016; --warn-line: #4e3d1d;
  --bad:       #e2726a; --bad-soft:  #2b1a19; --bad-line:  #513230;

  --hover:     #2e2d29;
  /* 当前项／选中行的底：色度比浅色那一套低一档。深色里同样的色度看上去
     像一块红棕，比浅色重得多——它只是一个状态底，不该抢过内容。 */
  --sel:       oklch(31% 0.038 var(--acc-h));
  --zebra:     #221f1d;

  --scrim:     rgba(0, 0, 0, 0.56);
  --shadow:    0 10px 30px rgba(0, 0, 0, 0.5);

  /* 序列色：与浅色那一套同色相、同次序，只提亮 */
  --sr1: oklch(74% 0.108 44);
  --sr2: oklch(76% 0.095 96);
  --sr3: oklch(74% 0.095 150);
  --sr4: oklch(75% 0.080 190);
  --sr5: oklch(74% 0.095 227);
  --sr6: oklch(74% 0.095 300);
}
/* 
   ── 序列色（图表用）─────────────────────────────────────────
   `02-界面风格.md` 第十一节留的空位：颜色表里没有任何用于区分数据序列的
   颜色。这里补六个，规则三条：

     一、**只用于图表里区分序列**，界面上一律不用。界面的语义色照旧是那三个
         状态色，强调色照旧只用在四个地方。
     二、**次序固定**：一条序列时用 --acc（不用 --sr1），两条起按 --sr1…--sr6
         依次取，图与图之间同一个序号指同一件事。
     三、六个色相是从强调色那个色相出发按大致等距取的（44 / 96 / 150 / 190 /
         227 / 300），明度与色度在同一套里保持一致——所以它们看起来是一家人，
         而不是六个从别处捡来的颜色。浅色一套压暗（在白底上要读得出线与点），
         深色一套提亮（在近黑底上同理），两套只差明度与色度。

   色盲：只靠色相分序列在红绿色盲上会并成两组，所以图表那一层还要给第二个
   通道（线型、点形、直接标注），这一条属于画图的人，不属于取值表。
 */