/* ============================================================
   WorldOfQuality | Quality ToolKit — tokens.css
   设计令牌（Design Tokens）· 单一来源
   —— 混合视觉系统：全站深色外壳（顶栏 / 首页 / 仪表盘 / 应用 / 页脚，#0B0E14）
      + 浅色工作层（讲解 / 培训 / 文档等内容页，#F6F7F9 白卡 / #E3E6EB 边框）。
   —— 主题切换发生在「页面跳转」层级（page-level theming），不在同一页滚动里交替。
   —— 图表关键高亮用品牌青 #22d3ee，异常点用珊瑚红 #F2555A。
   —— 整体克制、精密、工业控制室感，避免纯黑纯白。
   —— 任何页面只需在本文件之后加载自己的样式即可复用同一套设计语言。零外链、离线可用。
   ============================================================ */

:root {
  /* ---------- 深色外壳（品牌层 / 仪表盘 / 营销长页深色章节） ---------- */
  --shell-bg:   #0B0E14;   /* 全局深色外壳：顶栏、首屏、页脚、仪表盘底 */
  --shell-bg2:  #11151D;
  --shell-panel: #151A23;
  --shell-panel2: #1B212C;
  --shell-line:  #232A36;
  --shell-line2: #2E3744;
  --shell-txt:   #E6EAF0;
  --shell-muted: #9AA4B2;
  --shell-dim:   #6B7585;

  /* ---------- 浅色工作层（文档 / 教程 / 试算 / app 内容页） ---------- */
  --work-bg:    #F6F7F9;
  --work-panel: #FFFFFF;
  --work-panel2: #F0F2F5;
  --work-line:  #E3E6EB;
  --work-line2: #D2D7DF;
  --work-tint:  #EEF1F4;     /* 工作层浅灰底：提交矩阵「不适用」胶囊底（CR-2026-098）*/
  --work-txt:   #1A2230;   /* 避免纯黑 */
  --work-muted: #5A6472;
  --work-dim:   #8A93A1;

  /* ---------- 语义 / 高亮（深浅层通用） ---------- */
  --brand: #22d3ee;            /* 品牌青：logo、关键高亮、链接强调、图表关键点 */
  --brand-strong: #0FBBD6;     /* 渐变深青（标题渐变终点） */
  --brand-soft: rgba(34,211,238,.14);
  --brand-ink: #0E7C8C;        /* 浅色层上更可读的深青文字（阶段标签 / 编号 / 图形副标） */
  --brand-light: #0e7490;       /* P0（CR-2026-129d）浅色页 --brand 重映射目标：深青 #0e7490 在 #F6F7F9 上 5.00:1（达 WCAG AA），优于原 #22d3ee 的 1.69:1；仅 theme-light 作用域启用 */
  --alert: #F2555A;            /* 异常点红：克制珊瑚红，非纯红 */
  --alert-soft: rgba(242,85,90,.14);
  --ok: #2BB673;
  --warn: #E6B04A;

  /* ---------- CR-2026-103 VDA6.3 模块语义色（浅色工作层） ----------
     星号提问 / 降级等级 / 审核员高亮 / 乌龟图与流程图图形色。
     页面内联 <style> 只允许 var() 引用，色值单一真源在本文件。 */
  --vd-star:      #C0392B;   /* 星号主色（深红）：徽标、条款编号、星号条款标题 */
  --vd-star-hi:   #E0402F;   /* 星号徽标渐变亮端 */
  --vd-star-soft: rgba(224,64,47,.12);  /* 星号条款摘要从左淡入 */
  --vd-star-ink:  #A5281B;   /* 星号条款题干深红字 */
  --vd-amber:     #8A6300;   /* 琥珀文字（B 级 / 有条件） */
  --vd-amber-bd:  #D99E00;   /* 琥珀描边（降级列左边线） */
  --vd-amber-bg:  #FBECCD;   /* 琥珀底（B 级卡） */
  --vd-red-ink:   #B42318;   /* 红字（C 级） */
  --vd-red-deep:  #7A1A12;   /* 否决条深红字 */
  --vd-red-bg:    #FDECEA;   /* 红底（C 级卡 / 否决条） */
  --vd-ok:        #1F7A3D;   /* 深绿文字（A 级 / 交付满足） */
  --vd-ok-bg:     #E6F4EA;   /* 绿底（A 级卡 / 流程图末节点） */
  --vd-mark:      #FFE08A;   /* 资格表关键高亮（年限/资质/审核员卡） */
  --vd-blue:      #1F6FEB;   /* 乌龟图 / 流程图主蓝（描边、箭头、节点线） */
  --vd-blue-d:    #0B3D91;   /* 龟壳渐变深端 */
  --vd-blue-bg:   #E8F0FE;   /* 流程节点底 / 乌龟四肢填充 */
  --vd-blue-line: #CFE0FF;   /* 龟壳内圈虚线 */
  --vd-blue-txt:  #DBE7FF;   /* 龟壳内英文小字 */
  --vd-green-svg: #34A853;   /* 乌龟头 / 尾 / 输入输出标识 */

  /* ---------- 兼容别名（现有组件引用，默认指向深色外壳） ---------- */
  --bg: var(--shell-bg);
  --bg2: var(--shell-bg2);
  --panel: var(--shell-panel);
  --panel2: var(--shell-panel2);
  --line: var(--shell-line);
  --line2: var(--shell-line2);
  --txt: var(--shell-txt);
  --muted: var(--shell-muted);
  --dim: var(--shell-dim);

  /* 旧 --accent / --cyan 系列：统一为品牌青，平滑迁移 */
  --accent: var(--brand);
  --accent-d: var(--brand-strong);
  --accent-2: var(--brand-strong);
  --cyan: var(--brand);
  --blue: #2f7de0;            /* 预留：idx 渐变、冷色点缀 */
  --green: var(--ok);
  --red: var(--alert);        /* 旧 --red 指向异常红 */
  --amber: var(--warn);

  /* 浅色层阴影（柔和、低投影） */
  --shadow-work: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);

  /* ---------- P1（CR-2026-129d 后续）三阶表面角色别名 ----------
     纯增量：指向既有浅色层 token，不引入新色值，默认无任何页面引用 → 零视觉变化。
     命名按角色（卡面 / 下沉 / 发丝线 / 卡片投影），便于换肤与统一引用。
       --surface      = --work-panel  #FFFFFF  卡面（第二阶，配 hairline + shadow-1）
       --surface-sunk = --work-panel2 #F0F2F5  下沉（第三阶：表头 / 嵌入区 / 徽标底）
       --hairline     = --work-line   #E3E6EB  发丝线（1px，层级分隔）
     克制暗岛（真黑）不设 token——仅限功能性图表按需在页面/词汇表内联，见 subject.css .woq-island。 */
  --surface:      var(--work-panel);
  --surface-sunk: var(--work-panel2);
  --hairline:     var(--work-line);
  --shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);

  /* 页脚深色底 */
  --footer-bg: #080B11;

  /* 渐变过渡（保留备用：页面级主题下一般无需同页明暗交替；如未来做跨页过渡动画可复用） */
  --grad-d2l: linear-gradient(180deg, #0B0E14 0%, #20242E 46%, #C9CFDA 78%, #F6F7F9 100%);
  --grad-l2d: linear-gradient(180deg, #F6F7F9 0%, #C9CFDA 22%, #20242E 54%, #0B0E14 100%);

  /* ---------- 字体 ---------- */
  --font-cn: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-en: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-hero: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei", "PingFang SC", sans-serif;
  /* 等宽：代码/数值表格/谱图标签（CR-2026-072a 由页面字面量收敛而来）
     CR-2026-128：扩展为「本地优先」栈——优先采用系统自带的高质量等宽体（SF Mono / JetBrains Mono /
     Cascadia Code），无外链、离线可用，缺失时回退 Consolas / Courier。强化工程仪表盘质感。 */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  /* 公式字体：MathJax 渲染的Cambria Math 需与等宽回退搭配 */
  --font-mono-math: Consolas, "Cambria Math", monospace;

  /* ---------- 字号 ---------- */
  --fs-display: clamp(34px, 6vw, 60px);
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 18px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;

  /* 首页 Hero 专属字阶（CR-2026-128 对标科技大厂打磨：放大展示字、收紧行高与字距，
     原 clamp(30,4.6vw,46) 在 1440px 仅 46px，偏弱；提升至 58px 上限、行高 1.08 更贴 Apple/Meta 首屏气场）*/
  --fs-hero: clamp(34px, 5.4vw, 58px);
  --fs-hero-lead: clamp(16px, 1.4vw, 20px);

  /* ---------- 字重（中英视觉等效，英文比中文降一档） ---------- */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-cn-brand: 800;       /* 质擎 */
  --fw-en-brand: 700;       /* QualEngine：同字号下与中文 800 视觉等粗 */
  --fw-cn-h: 700;           /* H1–H3 中文 */
  --fw-en-h: 600;           /* H1–H3 英文 */
  --fw-btn: 600;
  --fw-body: 400;

  /* ---------- 间距 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-8: 64px;

  /* ---------- 圆角 ---------- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* ---------- 阴影（深色层） ---------- */
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.28);
  --shadow-glow: 0 6px 18px rgba(34,211,238,.30);
  --shadow-glow-h: 0 10px 26px rgba(34,211,238,.42);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;

  /* ---------- 布局 ---------- */
  --wrap: 1160px;
  --topbar-h: 64px;

  /* ===================================================================
     浅色工作层 · 语义色扩展（CR-2026-072a / DS-01 §3.3）
     -------------------------------------------------------------------
     为什么新增：此前 96 个工具页各自在 `:root` 与规则体里写死 91 种色值
     （全站 7768 处），其中 12 种状态/底色与本文件已有令牌**完全同值**。
     令牌已存在却不用，等于没有单一真源 —— 一处改色要改 96 个文件。
     故把散落值收敛为语义令牌，页面只允许 `var(--*)`。
     命名按**角色**而非色相，便于换肤（换令牌值即全站换色）。
     =================================================================== */

  /* ---- 状态色（浅底上的文字/描边可读版本，与 --alert/--ok/--warn 的深底版区分）---- */
  --alert-ink: #D64550;      /* 异常/不合格：浅底文字与描边 */
  --warn-ink:  #B07D12;      /* 警示/待处理：浅底文字与描边 */
  --warn-tint: #FBF1DC;      /* 警示浅底：提交矩阵「视需要」胶囊底（CR-2026-098）*/
  --warn-line: #E6CE9A;      /* 警示描边：提交矩阵「视需要」胶囊边框 */
  --ok-ink:    #1F9D63;      /* 合格/通过：浅底文字与描边 */

  /* ---- 品牌浅色底纹（渐变、hover 底、徽标底）---- */
  --brand-tint:   #E6F6F9;   /* 主浅青：卡片渐变起点、hover 底 */
  --brand-tint-2: #E4F7FA;   /* 页面顶部径向渐变 */
  --brand-tint-3: #EAF9FB;   /* 次级浅青渐变 */
  --brand-tint-4: #DFF3F7;   /* 顶栏按钮 hover 底（CR-2026-071s 引入）*/
  --blue-tint:    #EAF2FB;   /* 冷色浅底 */

  /* ---- 状态浅色底纹 ---- */
  --alert-tint: #F9E9E8;     /* 异常说明块底 */
  --ok-tint:    #E8F5EE;     /* 合格说明块底 */

  /* ---- 图表/分类系列色（多序列图表的类别标识）---- */
  --series-blue:         #4A90C4;
  --series-blue-ink:     #3F7BB0;
  --series-purple:       #7C6BE0;
  --series-purple-ink:   #6D5FCB;
  --series-purple-soft:  #9B8CFF;

  /* ---- 深色强调组件（控制图培训页的样图查看器 / 迷你谱图等）----
     注意：这些是**有意的深底组件**，不是 071q 漏网的浅色页残留，
     深色是为了让样图与谱图在浅色页面上聚焦。独立成层以便整体调亮。 */
  --dk-panel:      #1C3A57;   /* 深底面板 */
  --dk-panel-2:    #11314E;   /* 深底次级面板 */
  --dk-panel-3:    #1C4A72;   /* 深底强调面板 */
  --dk-sunken:     #08182A;   /* 下沉区（图片查看器背板）*/
  --dk-line:       #2F5D86;   /* 深底描边 */
  --dk-line-2:     #4F7EA8;   /* 深底高亮描边 / 谱图条 */
  --dk-line-3:     #9FB6CC;   /* 深底分隔线 */
  --dk-txt:        #10324F;   /* 深底主文字 */
  --dk-txt-2:      #0F2238;   /* 深底标题 */
  --dk-txt-3:      #274257;   /* 深底次文字 */
  --dk-txt-4:      #61788F;   /* 深底弱文字 */
  --dk-ok-bg:      #0F3326;   /* 深底合格块 */
  --dk-ok-ink:     #C6E9D8;
  --dk-warn-bg:    #3A2F14;   /* 深底警示块 */
  --dk-warn-ink:   #F2CE7E;
  --dk-plot-line:  #B9C9D8;   /* 谱图网格线 */
  --dk-plot-axis:  #3A5A7E;
  --dk-accent:     #5FD0E0;   /* 深底强调（青）*/
  --dk-alert:      #E0524A;   /* 深底异常 */
  --dk-ok:         #27AE60;   /* 深底合格 */
  --dk-blue:       #7FB2DD;   /* 深底冷色 */
  --dk-blue-2:     #2F6EA3;
  --dk-panel-tint: #DCE9F5;
  --dk-blue-tint:  #BFE3F2;
  --dk-panel-tint-2:#E8F1FB;
  --dk-panel-tint-3:#DBE9F7;
  --dk-panel-tint-4:#9DB4CC;
  --dk-panel-tint-5:#8AA3BF;
  --dk-plot-grid:  #1F3A52;
  --dk-plot-fill:  #1C3550;
  --dk-ok-stroke:  #36C28A;   /* 深底合格块的描边/标记（配 --dk-ok-bg）*/
  --dk-warn-stroke:#E0A83A;   /* 深底警示块的描边/标记（配 --dk-warn-bg）*/

  /* ---- 导航器（tools/navigator）专属深色层 ----
     该页是工具自带的深色导航壳，不复用 --shell-*（它有独立的卡片/悬停层次）。*/
  --nav-panel:    #13283D;
  --nav-panel-2:  #13314F;
  --nav-panel-3:  #10253A;
  --nav-ink:      #06222E;

  /* ---- 打印层（白纸深墨；与屏幕浅色层是两套语义，不可混用）---- */
  --print-bg:        #F4F7FB;
  --print-panel:     #E8EEF6;
  --print-panel-2:   #EEF3F9;
  --print-panel-3:   #EEF4FA;
  --print-panel-4:   #EEF2F7;
  --print-panel-5:   #E7EEF8;
  --print-ink:       #16283A;
  --print-ink-2:     #123A55;
  --print-ink-3:     #33475C;
  --print-ink-4:     #0A1726;
  --print-ink-5:     #0F2233;
  --print-text:      #CDD9E6;
  --print-muted:     #4A5A6B;
  --print-muted-2:   #3C556E;
  --print-muted-3:   #5B7794;
  --print-muted-4:   #6B7F94;
  --print-dim:       #6B7684;
  --print-dim-2:     #808C99;
  --print-line:      #CCD6E2;
  --print-line-2:    #9FB3C8;
  --print-line-3:    #9FB0C0;
  --print-line-4:    #D6DEE8;
  --print-accent:    #1F5F92;
  --print-brand-ink: #0E7F93;
  --print-alert:     #B2322B;
  --print-alert-2:   #C0392B;
  --print-ok:        #128057;
  --print-ok-2:      #12805A;
  --print-ok-3:      #1A7F4B;
  --print-warn-ink:  #8A5A00;
  --print-warn-ink-2:#9A6C12;
  --print-warn-ink-3:#8A6416;
}

/* ---------- P0（CR-2026-129d）浅色页强调色双轨 ----------
   问题：浅色工作层（讲解/培训/文档）上品牌青 #22d3ee 仅 1.69:1（WCAG AA 要求 4.5:1），
   等于整个品牌色在内容页"失声"，页面只剩灰白灰白 → 用户感知"寡淡"。
   靶点修正：报告初稿误写为重映射 --accent，但只读扫描确认浅色页组件（subject.css 的
   .ap- 系列侧栏、components.css 侧栏、site.css 的 .t- 与 .sec-nav）主要引用 --brand 作文字/边框/图标，
   几乎不引用 --accent（--accent 仅在深色页脚 .legal a 与宜保持青填充的 .btn-primary 出现）。
   故正确做法是仅在 body.theme-light 作用域内把 --brand 重映射为可读深青 --brand-light，
   一次性修复链接/编号/强调/徽标/边框等全部低对比点；深色外壳（首页/顶栏/页脚/暗岛）零影响，
   且不改动 --brand-ink 值（避免压低 L-Index 深色侧栏文字对比度）。
   验证：浅色页强调色变为深青（≥5:1），首页/深色页截图 diff 应为 0。 */
body.theme-light { --brand: var(--brand-light); }