/* =============================================================================
 * theme.css — 设计令牌 + 明暗主题（运行时 Agent 拥有）
 * 契约来源：作者本地《开发规范》第七章（7.1 语义色 / 7.2 可视化色 / 7.3 字体）
 *
 * 红线 R5：全站只允许使用本文件定义的令牌，禁止硬编码颜色/字号/圆角。
 *
 * 视觉方向：**教科书编辑部风**（editorial / print）
 *   —— 这是一本要陪着读者读下去的书，不是产品官网。所以：
 *     1) 三种声音分工明确：书页（衬线）/ 讲义与界面（黑体）/ 代码（等宽）；
 *        开发规范第六章那条「英文原文衬线、讲解无衬线」的惯例就是它的第一层。
 *     2) 色彩走「纸 + 墨」：暖调纸白 + 近黑墨字 + 单一墨蓝强调色。
 *        不用纯黑（#000），不用高饱和，不用渐变。
 *     3) 立体感来自**发丝线与留白**，不来自阴影与圆角。圆角收到 2–6px。
 *     4) 没有网络字体（零依赖红线），字体栈全部落在系统已装字体上：
 *        思源宋体 / 思源黑体 / Palatino / Georgia / Cascadia Code。
 *
 * 主题策略：
 *   - 默认（:root，无 data-theme 属性）= 明色。
 *   - [data-theme="dark"] = 强制暗色。
 *   - 未显式选择时（无 data-theme 属性）跟随系统 prefers-color-scheme。
 *     JS（store.setThemePref）只写 'light' | 'dark' | 'auto'；'auto' 即移除属性。
 * ========================================================================== */

/* ---------- 7.3 字体栈 ----------
 * 顺序有讲究：拉丁字形取前面的西文字体，中文字形自动落到后面的中文字体。
 * 每个栈都给足跨平台回退（macOS 的 Songti SC / PingFang，Android 的 Noto）。
 */
:root {
  /* 界面与讲义：黑体。标签、按钮、导航、小标题、表格头 */
  --font-sans: "Source Han Sans CN", "Noto Sans SC", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;

  /* 书页：衬线。英文原文引述 + 书页感的正文 */
  --font-serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Cambria,
    "Songti SC", "Source Han Serif SC", "Noto Serif SC", STSong, SimSun, serif;

  /* 展示：书的身份。书名、章节号、Part 编号 */
  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
    "Songti SC", "Source Han Serif SC", "Noto Serif SC", STSong, SimSun, serif;

  /* 代码与伪代码 */
  --font-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas,
    "SFMono-Regular", "DejaVu Sans Mono", monospace;
}

/* ---------- 7.1 语义色（明色 = 纸） ---------- */
:root {
  /* 背景层级：页面纸底 / 卡片与书页 / 内嵌块 */
  --bg-0: #f1eee6;
  --bg-1: #fbf9f4;
  --bg-2: #e8e4d9;

  /* 前景层级：墨字 / 次级 / 弱提示 */
  --fg-0: #1c1a17;
  --fg-1: #4c4740;
  --fg-2: #867f72;

  /* 边框：发丝线 / 强调线 */
  --bd-0: #dcd6c8;
  --bd-1: #c3bba9;

  /* 原文 vs 讲解底色（核心视觉惯例，配合 data-kind）
   * 原文 = 书页暖色；讲解 = 冷墨洗色。冷暖对比是它们最主要的区分手段，
   * 因为两者只差一层底色，靠色相而非明度来分开，长时间阅读不刺眼。 */
  --c-source: #f7f2e5;
  --c-note: #e9eff5;

  /* 原书插图的「纸」：切图来自白底 PDF，暗色下也要保持白纸，
   * 否则黑底上贴一块白图会刺眼 —— 让它看起来就是「夹了一页书」。
   * 图区永远用同一色，不跟随主题反转（这是刻意的，别改成变量继承）。 */
  --fig-paper: #fffdf8;
  --fig-edge: #d8d2c2;

  /* 状态色：正确 / 提示 / 错误（都往低饱和压，避免跳出纸墨体系） */
  --c-ok: #2c6b4a;
  --c-warn: #8a5a12;
  --c-err: #a3352c;

  /* 强调色：墨蓝。全站只有一个强调色。 */
  --accent: #1d4e79;
  --accent-fg: #fbf9f4;

  /* 代码框语法高亮（core/highlight.js 产出的 6 个 class 用）
     原则：注释退到背景、字符串与数字给暖冷两色、关键词就是全站那个墨蓝。 */
  --tok-comment: #665f51;   /* 与代码底色对比度 4.6:1，仍比正文淡 */
  --tok-str:     #7a4f2a;
  --tok-num:     #2f6160;
  --tok-kw:      #1d4e79;
  --tok-pre:     #5c4a80;
  --tok-fn:      #55541b;

  /* 可视化上的文字颜色（绘制标签/数字时用） */
  --viz-fg: #fbf9f4;
  --viz-track: #e2ded3; /* 柱/条轨道背景 */
  --viz-grid: #c9c3b4;  /* 网格线 */
}

/* ---------- 7.2 可视化专用色（色盲友好，灰阶也可分） ----------
 * 设计要点：不使用「纯红/纯绿」配对；各状态同时给足色相与明度差异。
 * 下游可视化 agent 只引用这些变量名，不自行定义。
 * 每个状态都建议再叠加形状/纹理/文字标签（由可视化层负责）。
 *
 * 明度阶梯（明色下由浅到深）：idle < compare < move < result < done < active < mark < violation
 * 「搬移」与「当前操作」同属紫系：只差一档明度，再叠加交叉斜纹与文字标签，共三通道区分。
 * 刻意不为它引入第 8 个色相 —— 色相越多，整块色板在色盲与灰阶下的可分辨性越差。
 * 灰阶下仍能靠这层阶梯区分，色相只作第二重线索。
 */
:root {
  --viz-idle: #9a927f;      /* 未处理 · 中性暖灰 */
  --viz-compare: #c98a2b;   /* 比较中 · 琥珀 */
  --viz-active: #6b4ea8;    /* 当前操作 · 紫（最深，视线焦点） */
  --viz-move: #9a63c9;      /* 搬移中 · 同色相的另一档明度（比 active 亮，靠明度+斜纹+文字区分） */
  --viz-done: #2f6fa8;      /* 已确定 · 蓝 */
  --viz-result: #1f8a8f;    /* 结果/路径 · 青 */
  --viz-mark: #55503f;      /* 已访问标记 · 深岩 */
  --viz-violation: #b33a2f; /* 违反不变量 · 砖红 */
}

/* ---------- 排版：字号刻度（禁止硬编码 px 字号） ----------
 * 正文基准抬到 17px：中文在 16px 以下长读会挤，这是整站观感的第一根支柱。
 * 中文行高给到 1.85（--lh-read），界面行高 1.6（--lh-base）。
 */
:root {
  --fs-xs: 0.8125rem;  /* 13px · 标签、页码锚点 */
  --fs-sm: 0.9375rem;  /* 15px · 界面、次要信息 */
  --fs-md: 1.0625rem;  /* 17px · 正文基准 */
  --fs-lg: 1.1875rem;  /* 19px · 引导句、原文引述 */
  --fs-xl: 1.5rem;     /* 24px · 小节标题 */
  --fs-2xl: 2rem;      /* 32px · 章标题 */
  --fs-3xl: 2.75rem;   /* 44px · 关卡标题 / 书名 */
  --fs-4xl: 3.5rem;    /* 56px · 章节号、Part 编号等展示字 */

  --lh-tight: 1.2;  /* 大字标题 */
  --lh-base: 1.6;   /* 界面与列表 */
  --lh-read: 1.85;  /* 中文长文正文 */

  /* 正文行宽上限：中文约 34em 换行最舒服；超过就该分栏或加边距 */
  --measure: 34em;
}

/* ---------- 形状：圆角（禁止硬编码 px 圆角） ----------
 * 印刷物没有 12px 大圆角。收到 2/4/6，pill 只留给状态胶囊。
 */
:root {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --bd-w: 1px;
}

/* ---------- 阴影 ----------
 * 编辑部风不用漂浮阴影，改用「纸层差 + 发丝线」。阴影只用于真正浮起的层
 * （下拉、模态），且极浅。
 */
:root {
  --shadow-1: 0 1px 0 rgba(28, 26, 23, 0.04);
  --shadow-2: 0 2px 10px rgba(28, 26, 23, 0.07), 0 1px 0 rgba(28, 26, 23, 0.04);
}

/* ---------- 间距 / 布局 ---------- */
:root {
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;   /* 版块之间 */
  --sp-8: 4.5rem; /* 大版块之间 */
  --sp-9: 7rem;   /* 页首尾留白 */
  --maxw: 1180px;
  --maxw-read: 46rem; /* 纯阅读页的内容宽（比 --measure 宽，含边注） */
  --header-h: 3.5rem;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 160ms;
  --z-header: 50;
  --z-modal: 100;
}

/* =============================================================================
 * 暗色主题（夜读：纸墨反转，不是简单反相）
 *   - 不用纯黑底，用带一点暖调的炭墨色，纸感仍在
 *   - 文字用暖白而非纯白，避免暗底上刺眼的光晕
 *   - 强调色提亮到能在深底上达到 AA
 * ========================================================================== */
[data-theme="dark"] {
  /* 切图是白底书页，暗色下压一档亮度，别让它像块发光的板子 */
  --fig-paper: #efece3;
  --fig-edge: #55514a;

  --bg-0: #17171a;
  --bg-1: #1e1e22;
  --bg-2: #27272c;

  --fg-0: #eae6dd;
  --fg-1: #b5afa3;
  --fg-2: #7d786d;

  --bd-0: #33333a;
  --bd-1: #45454e;

  --c-source: #262118; /* 暗色下仍是偏暖的书页感 */
  --c-note: #1b2430;

  --c-ok: #63c08d;
  --c-warn: #d9a54e;
  --c-err: #e8746a;

  --accent: #86b4dc;
  --accent-fg: #14161a;

  /* 暗色下同一族颜色整体提亮，保证在深底上够对比 */
  --tok-comment: #9c9484;
  --tok-str:     #d9a06a;
  --tok-num:     #7fc3bd;
  --tok-kw:      #86b4dc;
  --tok-pre:     #b79ad9;
  --tok-fn:      #cfc777;

  --viz-fg: #14161a;
  --viz-track: #2c2c33;
  --viz-grid: #3d3d45;

  /* 暗色下整体提亮，保证在深色底上可分辨 */
  --viz-idle: #77726a;
  --viz-compare: #dda44e;
  --viz-active: #a58ce0;
  --viz-move: #c9a6f0;
  --viz-done: #6fa6d8;
  --viz-result: #46c0c6;
  --viz-mark: #a09a8c;
  --viz-violation: #e8746a;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* 未显式选择主题时，跟随系统偏好（auto = 无 data-theme 属性） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-0: #17171a;
    --bg-1: #1e1e22;
    --bg-2: #27272c;

    --fg-0: #eae6dd;
    --fg-1: #b5afa3;
    --fg-2: #7d786d;

    --bd-0: #33333a;
    --bd-1: #45454e;

    --c-source: #262118;
    --c-note: #1b2430;

    --fig-paper: #efece3;
    --fig-edge: #55514a;

    --c-ok: #63c08d;
    --c-warn: #d9a54e;
    --c-err: #e8746a;

    --accent: #86b4dc;
    --accent-fg: #14161a;

    /* 暗色下同一族颜色整体提亮，保证在深底上够对比 */
    --tok-comment: #9c9484;
    --tok-str:     #d9a06a;
    --tok-num:     #7fc3bd;
    --tok-kw:      #86b4dc;
    --tok-pre:     #b79ad9;
    --tok-fn:      #cfc777;

    --viz-fg: #14161a;
    --viz-track: #2c2c33;
    --viz-grid: #3d3d45;

    --viz-idle: #77726a;
    --viz-compare: #dda44e;
    --viz-active: #a58ce0;
  --viz-move: #c9a6f0;
    --viz-done: #6fa6d8;
    --viz-result: #46c0c6;
    --viz-mark: #a09a8c;
    --viz-violation: #e8746a;

    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 0, 0, 0.35);
  }
}

/* 降低动效（尊重 prefers-reduced-motion）：由 stepper 也读取此偏好，
   这里兜底关掉过渡/动画，避免 CSS 侧仍闪动。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
    --ease: linear;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}