/* ==========================================================================
有解 AI · Design Tokens (tokens.css)
唯一的颜色 / 尺度 / 字体 / 动效事实源。组件层与页面层只允许引用这里的变量，
禁止出现裸色值。视觉方向：D · 深空极光（磨砂玻璃 × 深空 / 电光青 / 靛蓝色板）。
作用域约定
- 暗色（默认）：:root, html[data-theme="dark"], .theme-dark, .page.theme-dark
- 亮色： html[data-theme="light"], .theme-light, .page
（PDF 文档里的 .page 默认为亮色纸面；封面 / 章首 / 封底加 class="theme-dark"）
- 任何元素加 .theme-dark / .theme-light 都可以局部切换（例如亮色正文页里放一个暗色产品窗口）。
对比度结论（WCAG 2.x，见 MASTER.md 色彩章节）
- 暗色：--text 16.7:1 · --text-2 6.9:1 · --text-3 3.7:1(仅装饰) · --primary 10.9:1
- 亮色：--text 17.6:1 · --text-2 6.0:1 · --text-3 3.0:1(仅装饰) · --primary 3.5:1(仅 ≥24px 大字)
--primary-strong 5.0:1(小字主色) · 状态色 *-text 变体均 ≥ 6:1
========================================================================== */
/* --------------------------------------------------------------------------
1. 暗色令牌（默认）· 深空
-------------------------------------------------------------------------- */
:root,
html[data-theme="dark"],
.theme-dark,
.page.theme-dark {
color-scheme: dark;
/* —— 背景 —— */
--bg: #070B14; /* 页面 / 画布底色（深空）；暗页与产品 UI 的最底层 */
--bg-2: #0E1524; /* 第二层背景：body 的径向渐变高光、侧栏、代码块背景基底 */
/* —— 玻璃三件套 + 高光线 —— */
--glass: rgba(255,255,255,.05); /* 标准玻璃卡片底色；屏幕上配 backdrop-filter，打印时退化为实色近似 */
--glass-strong: rgba(255,255,255,.08); /* 加强玻璃：按钮 / 芯片 / 产品窗口外壳，比 --glass 更「实」 */
--glass-border: rgba(255,255,255,.10); /* 玻璃卡片 1px 边线；也用于输入框、芯片描边 */
--glass-highlight: rgba(255,255,255,.30); /* 玻璃卡片顶部 1px 高光线的中心色（两端渐变到透明） */
--glass-flat: #131720; /* 玻璃卡在 --bg 上的不透明近似（PDF 内高光线两端用它代替 transparent，避免软遮罩） */
--glass-highlight-flat: #5A5D63; /* 高光线中心色的不透明近似（PDF 用） */
--primary-soft-flat: #152E39; /* --primary-soft 叠在玻璃卡上的不透明近似（PDF 内的淡青渐变卡用它代替 transparent） */
/* —— 文字 —— */
--text: #E6EDF7; /* 主文字：标题、正文、表格数据 */
--text-2: #8B9AB3; /* 次文字：说明、标签、页眉页脚、表头（6.9:1，可承载信息） */
--text-3: #5C6B85; /* 装饰文字（3.7:1 不达 AA）：分隔点、水印、标志的灰格。禁止用于正文与说明 */
/* —— 极光 / 渐变源色（只用于渐变、光斑、图表序列，不直接做小字） —— */
--aurora-1: #6366F1; /* 靛蓝：渐变终点、光斑 1、图表序列色 2 */
--aurora-2: #22D3EE; /* 电光青：渐变起点、光斑 2、图表序列色 1 */
--aurora-3: #0E7490; /* 深青：光斑 3、渐变中间色 */
/* —— 主色 —— */
--primary: #22D3EE; /* 主色（暗色上 10.9:1 任何字号可用）：图标、强调、链接、激活态 */
--primary-strong: #22D3EE; /* 小字主色（暗色与 --primary 相同；亮色上会更深）。小于 24px 的主色文字请用它 */
--primary-deep: #0891B2; /* 主色深阶：按钮渐变终点、按下态、头像底色 */
--on-primary: #04121A; /* 主色上的文字 / 图标（暗字压在青色上，10.5:1） */
--primary-soft: rgba(34,211,238,.12); /* 主色浅底：高亮列、激活菜单项、信息徽标底、聚焦环 */
--primary-line: rgba(34,211,238,.40); /* 主色描边：激活态边线、架构横条边、步骤节点圈 */
/* —— 语义色：ok / warn / danger / info —— */
--ok: #34D399; /* 成功 / 运行中：实色填充（圆点、进度、图表序列色 3） */
--ok-text: #34D399; /* 成功文字（暗色上 10.2:1，与实色相同） */
--ok-soft: rgba(52,211,153,.14); /* 成功徽标 / 提示底色 */
--warn: #FBBF24; /* 注意 / 降级：实色填充（图表序列色 4） */
--warn-text: #FBBF24; /* 注意文字（暗色上 11.8:1） */
--warn-soft: rgba(251,191,36,.14); /* 注意徽标 / 审批卡底色 */
--danger: #F87171; /* 拒绝 / 错误：实色填充（图表序列色 5，慎用） */
--danger-text: #F87171; /* 错误文字（暗色上 7.1:1） */
--danger-soft: rgba(248,113,113,.14); /* 错误徽标 / 危险按钮底色 */
--info: var(--primary); /* 信息：与主色同源（已脱敏、提示） */
--info-text: var(--primary-strong); /* 信息文字 */
--info-soft: var(--primary-soft); /* 信息徽标底 */
/* —— 线与面 —— */
--line: rgba(255,255,255,.08); /* 常规分隔线：表格行线、区块分隔、图表网格线 */
--line-strong: rgba(255,255,255,.18); /* 加强分隔线：hover 边线、架构箭头起点、目录引导线 */
--surface: rgba(7,11,20,.55); /* 产品窗口内的面板底（顶栏、侧栏、输入区） */
--surface-2: rgba(255,255,255,.04); /* 更浅的面：表头底、hover 行底、输入框底、代码内联底 */
--code-bg: rgba(0,0,0,.35); /* 代码块 / 终端输出底色 */
--track: rgba(255,255,255,.14); /* 进度条 / 开关轨道未激活底色 */
/* —— 阴影 —— */
--shadow: 0 20px 60px rgba(0,0,0,.45); /* 大阴影：产品窗口、hover 抬起的卡片 */
--shadow-sm: 0 10px 30px rgba(0,0,0,.32); /* 小阴影：玻璃卡片默认、按钮、芯片 */
--shadow-primary: 0 10px 30px rgba(34,211,238,.22); /* 主色投影：主按钮、架构横条、头像 */
/* —— 光斑 —— */
--orb-1: var(--aurora-1); /* 光斑 1（靛蓝）：封面左上、章首 */
--orb-2: var(--aurora-2); /* 光斑 2（青）：封面右侧、封底 */
--orb-3: var(--aurora-3); /* 光斑 3（深青）：低调补光；每页光斑合计 ≤ 2 个 */
--orb-opacity: .50; /* 光斑基础不透明度（暗色）；亮色页更低 */
--orb-blur: 80px; /* 屏幕上的模糊半径；print.css 在 .page 内置 0 并改用径向渐变 */
/* —— 图表序列色（详见 charts.md；顺序固定，不得调换） —— */
--chart-1: var(--aurora-2); /* 序列 1 · 青（主系列 / 「有解」） */
--chart-2: var(--aurora-1); /* 序列 2 · 靛蓝 */
--chart-3: var(--ok); /* 序列 3 · 绿 */
--chart-4: var(--warn); /* 序列 4 · 琥珀 */
--chart-5: #FB7185; /* 序列 5 · 玫红（只在确需第五系列时使用） */
--chart-muted: var(--text-3); /* 对照 / 基线系列（「其他」「行业平均」） */
--chart-grid: var(--line); /* 网格线 */
--chart-axis: var(--text-2); /* 坐标轴文字 */
/* —— 标志着色（logo-mark.svg / logo.svg 内联时读取；![]()
用法回退到 currentColor） —— */
--logo-cell: var(--text-3); /* 3×3 点阵中的 8 个灰格（SVG 内再叠 .55 不透明度） */
--logo-accent: var(--primary); /* 唯一实填的主色格 ——「局部有解」 */
--logo-text: var(--text); /* 字标「有解 AI」 */
--logo-text-2: var(--text-2); /* 小字「YOUJIE AI」 */
}
/* --------------------------------------------------------------------------
2. 亮色令牌 · 冷白纸面（PDF 正文页默认；产品 UI 的浅色模式）
-------------------------------------------------------------------------- */
html[data-theme="light"],
.theme-light,
.page {
color-scheme: light;
--bg: #F6F8FB; /* 纸面底色（冷白） */
--bg-2: #EEF2F7; /* 第二层：侧栏 / 表头 / 代码块基底 */
--glass: rgba(255,255,255,.72); /* 亮色玻璃：接近实色白，打印无需 blur 即可成立 */
--glass-strong: rgba(255,255,255,.90); /* 加强玻璃：按钮 / 芯片 / 窗口外壳 */
--glass-border: rgba(11,18,32,.10); /* 玻璃边线（墨色 10%） */
--glass-highlight: rgba(255,255,255,1); /* 顶部高光线（纯白，在冷白纸面上是细微的亮边） */
--glass-flat: #FCFDFE; /* 玻璃卡在纸面上的不透明近似（PDF 用） */
--glass-highlight-flat: #FFFFFF; /* 高光线中心色（PDF 用） */
--primary-soft-flat: #E4F2F6; /* --primary-soft 叠在玻璃卡上的不透明近似（PDF 用） */
--text: #0B1220; /* 主文字（17.6:1） */
--text-2: #52607A; /* 次文字（6.0:1，可承载信息） */
--text-3: #8290A6; /* 装饰文字（3.0:1）：仅分隔点、水印、标志灰格 */
--aurora-1: #4F46E5; /* 靛蓝（亮色加深） */
--aurora-2: #0891B2; /* 青（亮色加深） */
--aurora-3: #0E7490; /* 深青 */
--primary: #0891B2; /* 主色（3.5:1）：亮色上只允许 ≥ 24px 大字、图标、边线、填充；小字禁止 */
--primary-strong: #0E7490; /* 小字主色（5.0:1）：链接、眉标、小于 24px 的主色文字一律用它 */
--primary-deep: #155E75; /* 主色深阶（6.8:1）：按钮渐变终点，保证白字 AA */
--on-primary: #FFFFFF; /* 主色上的文字：白字压在 strong→deep 渐变上 ≥ 5.4:1 */
--primary-soft: rgba(8,145,178,.10); /* 主色浅底 */
--primary-line: rgba(8,145,178,.30); /* 主色描边 */
--ok: #059669; /* 成功实色（3.5:1，仅填充 / 图标） */
--ok-text: #046B4F; /* 成功文字（6.1:1） */
--ok-soft: rgba(5,150,105,.10); /* 成功徽标底 */
--warn: #D97706; /* 注意实色（3.0:1，仅填充 / 图标） */
--warn-text: #9A3F0B; /* 注意文字（6.4:1） */
--warn-soft: rgba(217,119,6,.12); /* 注意徽标底 */
--danger: #DC2626; /* 错误实色（4.5:1） */
--danger-text: #B91C1C; /* 错误文字（6.1:1） */
--danger-soft: rgba(220,38,38,.10); /* 错误徽标底 */
--info: var(--primary); /* 信息实色 */
--info-text: var(--primary-strong); /* 信息文字 */
--info-soft: var(--primary-soft); /* 信息徽标底 */
--line: rgba(11,18,32,.08); /* 常规分隔线 / 图表网格 */
--line-strong: rgba(11,18,32,.18); /* 加强分隔线 */
--surface: rgba(255,255,255,.55); /* 窗口面板底 */
--surface-2: rgba(11,18,32,.03); /* 表头 / hover 行 / 输入框底 */
--code-bg: rgba(11,18,32,.06); /* 代码块底 */
--track: rgba(11,18,32,.16); /* 进度轨道 */
--shadow: 0 20px 60px rgba(11,18,32,.12); /* 大阴影 */
--shadow-sm: 0 10px 30px rgba(11,18,32,.08); /* 小阴影 */
--shadow-primary: 0 10px 30px rgba(8,145,178,.22); /* 主色投影 */
--orb-1: var(--aurora-1); /* 光斑 1 */
--orb-2: var(--aurora-2); /* 光斑 2 */
--orb-3: var(--aurora-3); /* 光斑 3 */
--orb-opacity: .22; /* 亮色页光斑更淡，避免压正文 */
--orb-blur: 80px; /* 屏幕模糊半径 */
--chart-1: var(--aurora-2); /* 序列 1 · 青 */
--chart-2: var(--aurora-1); /* 序列 2 · 靛蓝 */
--chart-3: var(--ok); /* 序列 3 · 绿 */
--chart-4: var(--warn); /* 序列 4 · 琥珀 */
--chart-5: #E11D48; /* 序列 5 · 玫红（亮色加深） */
--chart-muted: var(--text-3); /* 对照系列 */
--chart-grid: var(--line); /* 网格线 */
--chart-axis: var(--text-2); /* 轴文字 */
/* —— 标志着色（logo-mark.svg / logo.svg 内联时读取；![]()
用法回退到 currentColor） —— */
--logo-cell: var(--text-3); /* 3×3 点阵中的 8 个灰格（SVG 内再叠 .55 不透明度） */
--logo-accent: var(--primary); /* 唯一实填的主色格 ——「局部有解」 */
--logo-text: var(--text); /* 字标「有解 AI」 */
--logo-text-2: var(--text-2); /* 小字「YOUJIE AI」 */
}
/* --------------------------------------------------------------------------
3. 与主题无关的尺度令牌（字体 / 字号 / 行高 / 字重 / 间距 / 圆角 / 动效）
默认值 = 屏幕 & 16:9 deck 一组；A4 文档页在第 4 节覆盖。
-------------------------------------------------------------------------- */
:root {
/* —— 字体 —— 只用自托管 fonts.css：Plus Jakarta Sans 400/500/600/700/800，JetBrains Mono 400/500/600 */
--font-sans: "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; /* 标题 / 正文；中文用自托管思源黑体（可嵌入 PDF），再回退 PingFang → 雅黑 */
--font-mono: "JetBrains Mono", "Noto Sans SC", "SF Mono", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace; /* 数字 / 代码 / 眉标 / 页码，一律 tabular-nums */
/* —— 字重 —— */
--fw-regular: 400; /* A4 长正文 */
--fw-medium: 500; /* 屏幕 / deck 正文、等宽数字 */
--fw-semibold: 600; /* 说明标题、表头、按钮次级 */
--fw-bold: 700; /* 按钮、强调、H4 */
--fw-black: 800; /* H1–H3、KPI 说明、品牌字标 */
/* —— 字号尺度（屏幕 & deck 建议值，1280×720 画布） ——
A4 建议值见第 4 节：正文 10.5pt，其余按 1.2 倍率递进。 */
--fs-xs: 11px; /* 页眉页脚、图表刻度、极小标签（deck 上 ≥ 11px，不再更小） */
--fs-sm: 12px; /* 眉标、徽标、表头、脚注 */
--fs-md: 13px; /* 说明文字、表格数据、目录条目 */
--fs-base: 15px; /* 正文（deck）；屏幕产品 UI 用 14–15px */
--fs-lg: 18px; /* 导语 .lede、卡片标题 */
--fs-xl: 22px; /* H4 / 卡片大标题 */
--fs-2xl: 28px; /* H3 */
--fs-3xl: 36px; /* H2（deck 页标题） */
--fs-4xl: 48px; /* H1（deck 封面）/ KPI 大数字 */
--fs-display: 64px; /* 展示级：封面主标题、章首大编号 */
/* —— 行高 —— */
--lh-tight: 1.1; /* 展示级标题、KPI 数字 */
--lh-snug: 1.25; /* H2 / H3 */
--lh-normal: 1.5; /* H4、按钮、表格 */
--lh-relaxed: 1.7; /* 正文（中英混排推荐 1.7–1.8） */
--lh-loose: 1.85; /* 导语、引文 */
/* —— 字距 —— */
--ls-tight: -.02em; /* 大标题收紧 */
--ls-display: -.03em; /* 展示级标题 */
--ls-caps: .14em; /* 全大写等宽眉标 / 表头 */
/* —— 间距（4px 基数） —— */
--space-1: 4px; /* 图标与文字的最小间隙 */
--space-2: 8px; /* 芯片内距、列表行距 */
--space-3: 12px; /* 卡片内小间距、按钮 gap */
--space-4: 16px; /* 卡片内距（紧）、栅格 gap（紧） */
--space-5: 20px; /* 栅格 gap（默认） */
--space-6: 24px; /* 卡片内距（默认）、段落间距 */
--space-7: 32px; /* 区块内间距 */
--space-8: 40px; /* 标题区与内容区的距离 */
--space-9: 48px; /* 区块之间 */
--space-10: 64px; /* 章节之间（deck） */
--space-11: 80px; /* 大留白 */
--space-12: 96px; /* 封面级留白 */
/* —— 圆角 —— */
--radius-sm: 10px; /* 输入框、菜单项、小节点、代码块 */
--radius-md: 16px; /* 玻璃卡片、KPI、表格容器（D 的 --radius） */
--radius-lg: 24px; /* 产品窗口外壳、封面大卡 */
--radius-pill: 999px; /* 按钮、芯片、徽标、标签 */
/* —— 动效 —— */
--dur: 200ms; /* 标准过渡时长（hover / 主题切换） */
--dur-slow: 400ms; /* 展开 / 进入 */
--ease: cubic-bezier(.2,.7,.2,1); /* 标准缓动（先快后缓） */
/* —— 图标 —— */
--icon-stroke: 1.75; /* Lucide 风格线性图标描边宽度 */
--icon-size: 18px; /* 默认图标尺寸；.icon-sm 14px */
}
/* --------------------------------------------------------------------------
4. A4 文档页尺度（自动作用于非 .slide 的 .page，也可手动加 .scale-a4）
正文 10.5pt（= 14px）；小字不低于 8pt；标题按 1.2 倍率递进。
单位用 pt 便于与打印语义对齐（1pt = 1/72in；Chromium 中 1pt = 1.333px）。
-------------------------------------------------------------------------- */
.page:not(.slide),
.scale-a4 {
--fs-xs: 8pt; /* 页眉页脚、图表刻度、脚注编号（最小可印字号） */
--fs-sm: 8.5pt; /* 眉标、徽标、表头、脚注正文 */
--fs-md: 9.5pt; /* 说明文字、表格数据、图注、目录条目 */
--fs-base: 10.5pt; /* 正文 */
--fs-lg: 12pt; /* 导语、卡片标题 */
--fs-xl: 14pt; /* H4 / 小节标题 */
--fs-2xl: 17pt; /* H3 */
--fs-3xl: 22pt; /* H2（正文页标题） */
--fs-4xl: 30pt; /* H1 / KPI 大数字 */
--fs-display: 44pt; /* 封面主标题、章首大编号 */
--lh-relaxed: 1.65; /* A4 正文行高略收（栏宽 174mm 或双栏 84mm） */
--fw-medium: 400; /* A4 长正文用 Regular，避免 500 在纸上发灰变粗 */
--space-6: 6mm; /* 卡片内距（A4 用 mm 便于对齐页边距） */
--space-8: 10mm; /* 标题区与内容区距离 */
--space-9: 12mm; /* 区块之间 */
}