/* 全站 token 的唯一定义处。
 *
 * 组件样式一律引用 var(--x),不写字面量 —— 组件的 CSS 进不了 shadow root
 * (toc-component / code-block / expand-panel / ui-graph 都在自己的
 * shadow 里渲染),而自定义属性是唯一能穿过 shadow 边界的东西。正因如此,
 * 布局常量(--header-h)也放在这里:两侧抽屉将要按它算偏移,而抽屉在
 * shadow root 里,走的是同一条继承链 —— 放进组件文件只会让它在 shadow
 * 里失效。
 *
 * toc.html 那种 shell 自己也会 link 一份本文件(toc.typ 也走 template),
 * 但那不是 token 生效的原因 —— 继承才是。shell 里 link 不 link 都一样,
 * var(--bg) 在 shadow 里都解析得到。toc.css 顶上那条"只有 style.css /
 * template.css / toc.css 在 shadow 里生效"的注释说的是**样式表能不能选到
 * 元素**,与自定义属性能否继承到是两回事,别混。
 *
 * 深色值只在下面 :root[data-theme="dark"] 一处出现,不散落成各文件的
 * 覆盖块 —— 两份副本迟早漂移。data-theme 由 lib/js/theme.js 在第一帧
 * 之前写到 documentElement 上。 */

:root {
    color-scheme: light;

    /* 底与面 */
    --bg: #fdfdfd;
    --surface: #fff;

    /* 字 */
    --fg: #19181f;
    --muted: #565565;
    --subtle: #7a7c86;

    /* 强调 */
    --accent: #11566c;
    --link: #3964fe;

    /* 线与状态。hover / active 是**盖在面上的一层状态色**,不是结构线,
     * 两者的深色值必须刻意错开 —— 同值会让「有边的东西一 hover 就没反应」。 */
    --border: #e2e3e8;
    --border-soft: #d7d9e2;
    --hover: #eff0f3;
    --active: #e4e5ea;

    /* 折叠面板。panel-border 是面板自身的描边,历史上写的是命名色 black,
     * 比同页的 --border 深得多;panel-head-hover 是头部 hover 那一层,
     * 原先写的是 silver。两者都按原值立 token,不在浅色下换档。 */
    --panel: #efefef;
    --panel-head: #dcdcdc;
    --panel-border: black;
    --panel-head-hover: silver;

    /* 代码。code-inline-fg 是 Typst 高亮里出现最多的那个色 —— 全站 1047 处
     * 内联 color,涂的是 Rust 关键字(`if`、`-` …)和路径里的标点(`/`)。
     * style.typ 的 show text 只要 text.fill 不是默认值就写内联 color,
     * 浅色下就是 #d73948 本身。深色下才换值。 */
    --code-bg: #fdfdfd;
    --code-inline-bg: #eff3f8;
    --code-inline-fg: #d73948;

    /* Typst 高亮里另外几种 token 色。同样是内联 style,同样压得过普通规则,
     * 改写由 code_block.css 末尾那组 [style*="#xxxxxx"] 规则做(逐个色值,
     * 不是一个通配)。这里的浅色值**就是 Typst 现在吐出来的原值**,记的是事实,
     * 不是另挑的一套;规则只在深色下生效,所以浅色一个字都不动。
     * 角色按 span 里实际长什么样划的,不是按色值也不是按编号:
     *   comment   注释 `//` `///` `/*`
     *   string    字符串字面量
     *   literal   数字与常量(0x00 / 111 / DSL)
     *   symbol    类型名与函数名 —— Typst 给这两者同一个色值,故并成一个角色
     *   member    字段与属性名(`.` `:` 之后那个)
     *   macro     宏调用 `vec!` `cargo!`
     *   markup    标记语言原文 `<custom-element>` / 转义 `\<`
     *   attribute Rust 属性 `#[..]` `#![..]`
     *   keyword   关键字(摆弄页的语义高亮专用,Typst 代码块里用不到)
     *   plain     围栏 / 反引号等没有高亮的原文 */
    --code-syn-comment: #74747c;
    --code-syn-string: #198810;
    --code-syn-literal: #b60157;
    --code-syn-symbol: #4b69c6;
    --code-syn-member: #8b41b1;
    --code-syn-macro: #16718d;
    --code-syn-markup: #1d6c76;
    --code-syn-attribute: #301414;
    /* 关键字单开一色:红。浅色底上 #d73948 对比度 4.6:1,够用。 */
    --code-syn-keyword: #d73948;
    --code-syn-plain: #6b6b6f;

    /* 代码块控件(经 ::part() 进 code-block 的 shadow) */
    --badge-bg: #2563eb;
    --badge-fg: #ffffff;
    --copy-bg: #7c3aed;
    --copy-fg: #ffffff;
    --copy-hover-bg: #6d28d9;
    --copy-hover-fg: #ede9fe;
    --copied-bg: #98c379;
    --copied-fg: #ffffff;

    /* 关闭按钮。outline.css 的 .outline-close 和 toc.css 的 .drawer-close
     * 是同一颗按钮的两份实现,共用这一组。 */
    --close-bg: #f0f0f0;
    --close-border: #ddd;

    /* 投影与遮罩。按角色命名,不是按深浅:rest / hover 是代码块的一对
     * 抬升,drawer 是两侧抽屉的投影,float 是顶栏按钮和卡片 hover 的那层薄影。 */
    --shadow-rest: #59556533;
    --shadow-hover: rgba(0, 0, 0, 0.12);
    --shadow-drawer: rgba(0, 0, 0, 0.18);
    --shadow-float: rgba(0, 0, 0, 0.10);
    --overlay: rgba(0, 0, 0, 0.5);

    /* 锚点 hover 高亮(lib/js/style.js 加的 .highlight) */
    --highlight-bg: rgba(255, 152, 0, 0.08);
    --highlight-fg: #ff9800;

    /* ui-card 三种提示。每组四个: 底 / 边 / 字 / 图标。 */
    --card-info-bg: #D1ECF1;
    --card-info-border: #BEE5EB;
    --card-info-fg: #0C5460;
    --card-info-icon: #17A2B8;

    --card-tip-bg: #D4EDDA;
    --card-tip-border: #C3E6CB;
    --card-tip-fg: #155724;
    --card-tip-icon: #28A745;

    --card-attention-bg: #FFF3CD;
    --card-attention-border: #FFEEBA;
    --card-attention-fg: #856404;
    --card-attention-icon: #FFC107;

    /* 节点图。graph.css 管画布(light DOM),graph.js 的内联 <style> 管
     * shadow 里的节点盒子、连线、控件 —— 两边同名引用同一个 token。
     * accent 在 graph.js 里同时是连线描边、节点 hover/热边框、控件底色、
     * data-node 描边和重置按钮文字,是一个角色而非「一种边」。 */
    --graph-canvas: #fbfbfd;
    --graph-box: #fff;
    --graph-border: #c9cbd4;
    --graph-accent: #11566c;
    /* 系统调用节点的标题按控制流形态分三色:纯数据(没有控制引脚)、
     * 事件(只有控制出)、其它(有控制入)。三色和 accent 拉开距离,
     * 免得和连线/边框混成一种角色。 */
    --graph-title-pure: #9a5b00;
    --graph-title-event: #6b3aa0;
    --graph-title-exec: #1f6b3a;
    --graph-reset-bg: rgba(255, 255, 255, 0.9);
    /* 未定义时露出来的说明框,与画布底色刻意不同 */
    --graph-fallback-bg: #f7f8fa;

    /* 顶栏高度。header.css 的 .site-header 在 shadow root 里用它定高,
     * 两侧抽屉和遮罩的 top / 高度也全部从它算 —— 改高度只改这一处。 */
    --header-h: 48px;

    /* 摆弄页的状态行。三个值分别沿用 tip 的绿、attention 的黄、
     * 行内代码的红 —— 那三处已经按 WCAG 算过对比度,不再编新颜色。 */
    --ok: #155724;
    --warn: #856404;
    --err: #d73948;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #16161a;
    --surface: #1f1f24;

    --fg: #e6e6ea;
    --muted: #a0a0aa;
    --subtle: #8a8a95;

    --accent: #4fd1e0;
    --link: #8ab4ff;

    /* 深色下这一组要按角色分开:
     *   border-soft  #26262f  结构线里最弱的一档(只在 ui-graph 上)
     *   border       #6a6a78  控件自己的那一圈边。顶栏三个按钮的底是
     *                          --surface #1f1f24,边框压到 #33333c 时按钮
     *                          与底色只差 1.3:1,深色下整个按钮看不见;
     *                          这一档对 --surface 实测 3.1:1。
     *   hover        #363643  状态层,压在 surface / panel 之上,要比
     *                          surface 明显,否则 hover 不可见
     *   active       #4a4a57  比 hover 再抬一档 */
    --border: #6a6a78;
    --border-soft: #26262f;
    --hover: #363643;
    --active: #4a4a57;

    /* 深色下纯黑描边会在页底消失,面板边换成实打实看得见的灰:浅色的 black
     * 对 --panel 有 18.3:1,这一档要保住「面板是个有边的盒子」这件事 ——
     * 实测对 --panel(#1c1c21) 3.4:1、对 --bg(#16161a) 3.7:1、对
     * --surface(#1f1f24) 3.3:1、对 --close-bg(#26262e) 3.0:1,都在 3 之上。
     * --close-border 复用同一个值(两者都是「控件自己的一圈边」),故一并改。
     * hover 则是 --panel-head(#24242b) 之上的一档,对应浅色的 silver。 */
    --panel: #1c1c21;
    --panel-head: #24242b;
    --panel-border: #6f6f7d;
    --panel-head-hover: #32323c;

    --code-bg: #1a1a1f;
    --code-inline-bg: #26262e;
    /* #d73948 压在深色上只有 3.3:1,读不出来;换成同色相提亮后的红。
     * 对 --code-inline-bg 是 6.2:1、对 --code-bg 是 7.1:1,都在 4.5 之上。 */
    --code-inline-fg: #ff8080;

    /* 深色代码底上,Typst 那套为暗底设计的浅色值反而读不出来(注释色
     * #74747c 对 --code-inline-bg 只有 3.2:1,属性色 #301414 更只有
     * 1.1:1,等于没有)。下面每个值都是**保住原色相、只提亮**之后挑的,
     * 对 --code-inline-bg(#26262e)与 --code-bg(#1a1a1f)都在 4.5 之上,
     * 实测见 code_block.css 的注释。 */
    --code-syn-comment: #969aa6;
    --code-syn-string: #7ec87e;
    --code-syn-literal: #e58ec0;
    --code-syn-symbol: #82aaff;
    --code-syn-member: #c39ae8;
    --code-syn-macro: #4fc4d4;
    /* 比 macro 暗一档,两个青靠明度分开而不是靠色相 */
    --code-syn-markup: #3f9fa8;
    --code-syn-attribute: #dfa3ad;
    /* 关键字的浅色值 #d73948 压在深色底上只有 3.3:1,读不出来 —— 跟
     * --code-inline-fg 一样,换成同色相提亮后的红(那个值的实测数据
     * 见上面那段注释)。 */
    --code-syn-keyword: #ff8080;
    /* plain 比 comment 亮一档:没高亮的正文该最显眼,注释该退后 */
    --code-syn-plain: #a8a8b0;

    --badge-bg: #1d4ed8;
    --badge-fg: #e0e7ff;
    --copy-bg: #6d28d9;
    --copy-fg: #f5f3ff;
    --copy-hover-bg: #7c3aed;
    --copy-hover-fg: #ede9fe;
    /* 「已复制」徽标底色压深,好让 12px 的 --copied-fg 上去 4.5。 */
    --copied-bg: #35804c;
    --copied-fg: #f0fdf4;

    --close-bg: #26262e;
    /* 与 --panel-border 同一个值,理由见上面那段 */
    --close-border: #6f6f7d;

    --shadow-rest: #00000066;
    --shadow-hover: rgba(0, 0, 0, 0.5);
    --shadow-drawer: rgba(0, 0, 0, 0.6);
    --shadow-float: rgba(0, 0, 0, 0.35);
    --overlay: rgba(0, 0, 0, 0.65);

    --highlight-bg: rgba(255, 152, 0, 0.18);
    --highlight-fg: #ffb74d;

    --card-info-bg: #12303a;
    --card-info-border: #1d4b5a;
    --card-info-fg: #9fdcea;
    --card-info-icon: #4dd0e1;

    --card-tip-bg: #12301c;
    --card-tip-border: #1d4a2c;
    --card-tip-fg: #a5e0b0;
    --card-tip-icon: #4ade80;

    --card-attention-bg: #3a2c0d;
    --card-attention-border: #5c4713;
    --card-attention-fg: #f0cf85;
    --card-attention-icon: #fbbf24;

    --graph-canvas: #101014;
    --graph-box: #24242c;
    --graph-border: #3a3a45;
    --graph-accent: #4fd1e0;
    /* 系统调用标题的三色,浅色版提亮到深底上够读。 */
    --graph-title-pure: #f0b45c;
    --graph-title-event: #c9a0f5;
    --graph-title-exec: #8fdc9e;
    /* 比 --graph-box(#24242c) 亮一档,否则 .g-reset:hover 在深色下等于
     * 没变化(hover 目标 --graph-box 恰好就是 rest 的实色)。 */
    --graph-reset-bg: rgba(58, 58, 69, 0.9);
    --graph-fallback-bg: #17171c;

    --ok: #a5e0b0;
    --warn: #f0cf85;
    --err: #ff8080;
}