/* ============================================================================ 设计令牌（P0-1）· 2026-10-01 ---------------------------------------------------------------------------- 为什么有这个文件：全项目实测 **1085 种十六进制颜色 / 46 种媒体查询断点 / 186 个类名前缀 / 4 套页面外壳**（见 docs/全项目评估-20261001.md）， 同一个"蓝"在 6 个模块里写成 6 个不同色值。本文件把颜色、字号、间距、圆角、 阴影收敛成**唯一一份**，后续所有页面只允许引用这里的变量。 规则： ① 只允许在这里出现字面量色值；其它文件写 var(--ui-*)。 ② 新颜色必须先在这里登记；确需一次性特殊色时用 `--ui-x-*` 前缀并在注释写明原因。 ③ 兼容：本文件只定义变量，不改任何现有选择器 ⇒ 先并存、后逐页替换，零风险。 色板总量：品牌 6 阶 + 中性 10 阶 + 语义 4 组 × 4（字/底/边/实心） + 状态 3 档 = 40 个，封顶。 ========================================================================== */ :root { /* ── 品牌蓝（唯一品牌色，梯度 6 阶） ── */ --ui-brand-900: #444444; /* 深：标题/渐变尾 */ --ui-brand-700: #565656; /* 主：强调文字 */ --ui-brand-600: #5e5e5e; /* 亮：主按钮/描边（全站出现最多，195 次） */ --ui-brand-500: #6e6e6e; /* 次亮：图形/环 */ --ui-brand-100: #f2f2f2; /* 浅底 */ --ui-brand-050: #f9f9f9; /* 最浅底/悬停 */ /* ── 中性（文字 5 阶 + 线 2 + 底 3） ── */ --ui-ink-900: #1c1c1c; /* 主文字 */ --ui-ink-700: #3e3e3e; /* 次主文字/数字 */ --ui-ink-500: #616161; /* 正文灰 */ --ui-ink-400: #767676; /* 标签灰 */ --ui-ink-300: #939393; /* 占位/禁用 */ --ui-line-200: #ebebeb; /* 分隔线/卡边 */ --ui-line-100: #f3f3f3; /* 更浅分隔线 */ --ui-bg-page: #f6f6f6; /* 页面底 */ --ui-bg-card: #FFFFFF; /* 卡片底 */ --ui-bg-soft: #fafafa; /* 卡内浅底（表头/胶囊底） */ /* ── 语义色 4 组：成功 / 警示 / 危险 / 信息（字-底-边-实心） ── */ --ui-ok-ink: #04603A; --ui-ok-bg: #E9F7F0; --ui-ok-line: #BFE6D3; --ui-ok-solid: #0A7043; --ui-warn-ink: #B45309; --ui-warn-bg: #FEF5E7; --ui-warn-line: #F7DCB0; --ui-warn-solid: #D97706; --ui-danger-ink: #B3202E; --ui-danger-bg: #FDEEF0; --ui-danger-line: #F5C6CC; --ui-danger-solid: #DC2626; --ui-info-ink: #565656; --ui-info-bg: #f3f3f3; --ui-info-line: #dfdfdf; --ui-info-solid: #5e5e5e; /* 中性"无状态/未知" */ --ui-mute-ink: #616161; --ui-mute-bg: #f6f6f6; --ui-mute-line: #e9e9e9; --ui-mute-solid: #888888; /* ── 工序功能色（2026-10-07 登记） ────────────────────────────────────── 合成=品牌蓝 / 氨解=青 / 接酯=琥珀 / 纯化=成功绿 / 分装=品红。 前四个直接用语义色组，只有「青」和「品红」在语义组里没有对应， 在这里登记为 --pl-*（polish-apply.cjs 已把各自色相族的近似值收敛到这几档）。 */ --pl-cyan: #0C9AB8; --pl-cyan-ink: #075E75; --pl-cyan-bg: #E8F6F9; --pl-cyan-line: #BEE3EB; --pl-pink: #D9538A; --pl-pink-ink: #B03A6A; --pl-pink-bg: #FDF0F5; --pl-pink-line: #F6D3E2; /* ── 字号阶（页面上只允许这 8 档；不再出现 9px / 9.5px / 10.5px 这类碎档） ── */ --ui-fs-11: 11px; /* 极辅：单位/角标 */ --ui-fs-12: 12px; /* 辅：表头、注释 */ --ui-fs-13: 13px; /* 正文 */ --ui-fs-14: 14px; /* 小标题 */ --ui-fs-16: 16px; /* 卡片标题 */ --ui-fs-20: 20px; /* 区块数字 */ --ui-fs-26: 26px; /* 关键数字（参考平台同级） */ --ui-fs-32: 32px; /* 一级页主数字 */ --ui-fw-6: 600; --ui-fw-7: 700; --ui-fw-8: 800; --ui-fw-9: 900; /* ── 间距阶（4 的倍数为主） ── */ --ui-sp-1: 4px; --ui-sp-2: 6px; --ui-sp-3: 8px; --ui-sp-4: 10px; --ui-sp-5: 12px; --ui-sp-6: 16px; --ui-sp-7: 20px; --ui-sp-8: 24px; /* ── 圆角 4 档 ── */ --ui-r-1: 8px; /* 胶囊/输入 */ --ui-r-2: 10px; /* 按钮 */ --ui-r-3: 12px; /* 卡片 */ --ui-r-4: 14px; /* 大卡/弹窗 */ /* ── 阴影 3 档（克制：只表达层级，不做发光） ── */ --ui-sh-1: 0 1px 2px rgba(28,28,28, .04); --ui-sh-2: 0 6px 16px rgba(50,50,50, .08); --ui-sh-3: 0 12px 28px rgba(50,50,50, .12); --ui-ring: 0 0 0 3px rgba(115,115,115, .16); /* 聚焦/选中光环 */ /* ── 控件与版式尺寸 ── */ --ui-h-ctl: 32px; /* 常规控件高 */ --ui-h-ctl-lg: 36px; /* 大控件高 */ --ui-h-row: 44px; /* 表格行高 */ --ui-h-card-h: 44px; /* 卡头高 */ --ui-rail: 452px; /* 产线执行左栏宽（样板页基准） */ --ui-font: inherit; /* 字体跟随系统（中文优先，不用花体） */ --ui-dur: .14s; /* 过渡时长（统一，不再 0.12/0.16/0.18 混用） */ /* ── 关于老变量（--line / --txt / --panel-solid / --brand / --grad …） ── ★ 2026-10-01 P2-①-1 已完成去重：原来 `app.css` 与 `theme.css` **各定义一份且值不同** （#3f3f3f 系 vs #444444 系，即"同一屏两种蓝"的根因），现在： · 九个重复变量（brand / brand-2 / brand-glow / bg-0 / bg-1 / line / line-strong / grad / shadow） 只在 **theme.css** 定义一次，app.css 那份已删除（并留下说明注释）； · app.css 独有的变量（--panel* / --card / --cyan* / --bio / --amber / --red / --violet / --txt* / --r） 原地保留。 对应关系登记在 theme.css 的注释里；P2-③ 做深色主题时按那张表替换成 var(--ui-*) 即可。 */ } /* 令牌自检：把这一行注释去掉，页面会显示当前主色块（仅开发期用） body::after{content:"";position:fixed;left:0;bottom:0;width:60px;height:4px;background:var(--ui-brand-600);z-index:9999} */ /* ══════════════════════════════════════════════════════════════════════════ 深色主题覆盖（P2 收官）· 2026-10-01 触发：（由 index.html 头部的内联 boot 脚本在**任何 defer 脚本之前**写入， 初值来自 localStorage.ui-theme；顶栏的切换按钮只负责改写它并重载） 要点：**两套变量一起覆盖** —— ① --ui-*（已令牌化的页面用它）； ② app.css / theme.css 的老变量（--brand/--txt/--panel*/--line/--bg-*）—— 尚未逐处令牌化的页面靠这一层跟着变深，所以不需要先把 913 处全改完也能整体成色。 图表侧由 echarts-theme.js 读同一个 data-theme，切 'blw-dark'。 ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { /* 品牌：深色底上提亮一档，保证对比度 */ --ui-brand-900: #444444; --ui-brand-700: #878787; --ui-brand-600: #6e6e6e; --ui-brand-500: #767676; --ui-brand-100: #282828; --ui-brand-050: #212121; /* 中性：反相 */ --ui-ink-900: #eeeeee; --ui-ink-700: #d8d8d8; --ui-ink-500: #939393; --ui-ink-400: #888888; --ui-ink-300: #6b6b6b; --ui-line-200: #3c3c3c; --ui-line-100: #313131; --ui-bg-page: #181818; --ui-bg-card: #202020; --ui-bg-soft: #272727; /* 语义四组：底/边换深色版，字提亮 */ --ui-ok-ink: #5FE0A8; --ui-ok-bg: #0F2A20; --ui-ok-line: #1E4D38; --ui-ok-solid: #12A06A; --ui-warn-ink: #F5C77E; --ui-warn-bg: #2A2113; --ui-warn-line: #4D3C1E; --ui-warn-solid: #D97706; --ui-danger-ink: #FF9AA5; --ui-danger-bg: #2C161A; --ui-danger-line: #52262D; --ui-danger-solid: #E04553; --ui-info-ink: #9e9e9e; --ui-info-bg: #242424; --ui-info-line: #444444; --ui-info-solid: #6e6e6e; --ui-mute-ink: #939393; --ui-mute-bg: #272727; --ui-mute-line: #3c3c3c; --ui-mute-solid: #6b6b6b; --ui-sh-1: 0 1px 2px rgba(0, 0, 0, .35); --ui-sh-2: 0 6px 16px rgba(0, 0, 0, .45); --ui-sh-3: 0 12px 28px rgba(0, 0, 0, .55); --ui-ring: 0 0 0 3px rgba(134,134,134, .28); /* ② 老变量（未令牌化页面的兜底） */ --brand: #6e6e6e; --brand-2: #878787; --brand-glow: rgba(134,134,134, .28); --bg-0: #181818; --bg-1: #121212; --panel: rgba(32,32,32, .92); --panel-2: rgba(39,39,39, .94); --panel-solid: #202020; --card: #272727; --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .18); --txt: #eeeeee; --txt-2: #939393; --txt-3: #888888; --cyan: #767676; --cyan-bright: #9e9e9e; --violet: #939393; --grad: linear-gradient(135deg, #5e5e5e, #444444); } /* 深色下把页面底色与文字渲染一起接管（老壳没走 --ui-* 的地方） */ /* ⚠ 必须带 !important：实测 app.css 里有 `body.is-super{background:#f6f6f6 !important}` 这类 高优先级底色（body 在运行时会挂 is-super 类），不加 !important 时深色只改得动变量、 改不动这块实际渲染的底。作用域限定在深色主题内，浅色不受影响。 */ html[data-theme="dark"] body, html[data-theme="dark"] body.is-super { background: var(--ui-bg-page) !important; color: var(--ui-ink-900); } html[data-theme="dark"] .view { background: var(--ui-bg-page) !important; } html[data-theme="dark"] .main, html[data-theme="dark"] .app { background: var(--ui-bg-page); } html[data-theme="dark"] .sidebar, html[data-theme="dark"] .topbar { background: var(--ui-bg-card); border-color: var(--ui-line-200); } /* ⚠ 2026-10-01 补：深色变量块（原块未被浏览器解析 —— 顶层只解析出 4 条深色规则，缺变量定义）。 这里用最朴素的选择器重写一遍，放在文件最后，确保被解析并以最后顺序生效。 */ html[data-theme=dark]{ /* ★ 2026-10-01 深色收尾②：把"走老变量 / 硬编码白色"的容器一并接管。 实测深色下 `SECTION.panel.oc-tbl-wrap` 仍是 rgba(255,255,255,.86)、`.mqz-card` 仍是 #fff —— 它们用的是各模块自己写的白色，不跟变量，所以这里按"常见容器类名"统一改深。 */ } html[data-theme=dark] .panel, html[data-theme=dark] .oc-tbl-wrap, html[data-theme=dark] .oc-filtercard, html[data-theme=dark] .ui-card, html[data-theme=dark] .pd2-card, html[data-theme=dark] .pd3-top, html[data-theme=dark] .pd3-rail-card, html[data-theme=dark] .pd3-fold, html[data-theme=dark] .mqz-card, html[data-theme=dark] .mqz-head, html[data-theme=dark] .mqz-tabs, html[data-theme=dark] .mqs-card, html[data-theme=dark] .fqc-card, html[data-theme=dark] .app-tab, html[data-theme=dark] .pd3-kpirow .hv-kpi, html[data-theme=dark] .pd3-md-left .pd3-mc3, html[data-theme=dark] .dv-types .dv-type { background: var(--ui-bg-card) !important; background-image: none !important; color: var(--ui-ink-900); border-color: var(--ui-line-200) !important; } html[data-theme=dark] .oc-chip, html[data-theme=dark] .pd3-kpirow .hv-kpi span, html[data-theme=dark] .pd3-kpirow .hv-kpi b { color: var(--ui-ink-700); } html[data-theme=dark] { /* 变量块（保持在同一选择器族内，便于维护） */ --ui-ink-900:#eeeeee;--ui-ink-700:#d8d8d8;--ui-ink-500:#939393;--ui-ink-400:#888888;--ui-ink-300:#6b6b6b; --ui-line-200:#3c3c3c;--ui-line-100:#313131; --ui-bg-page:#181818;--ui-bg-card:#202020;--ui-bg-soft:#272727; --ui-brand-600:#6e6e6e;--ui-brand-700:#878787;--ui-brand-050:#212121;--ui-brand-100:#282828; --ui-ok-ink:#5FE0A8;--ui-ok-bg:#0F2A20;--ui-ok-line:#1E4D38;--ui-ok-solid:#12A06A; --ui-warn-ink:#F5C77E;--ui-warn-bg:#2A2113;--ui-warn-line:#4D3C1E;--ui-warn-solid:#D97706; --ui-danger-ink:#FF9AA5;--ui-danger-bg:#2C161A;--ui-danger-line:#52262D;--ui-danger-solid:#E04553; --ui-info-ink:#9e9e9e;--ui-info-bg:#242424;--ui-info-line:#444444;--ui-info-solid:#6e6e6e; --ui-mute-ink:#939393;--ui-mute-bg:#272727;--ui-mute-line:#3c3c3c;--ui-mute-solid:#6b6b6b; --txt:#eeeeee;--txt-2:#939393;--txt-3:#888888;--line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.18); --panel-solid:#202020;--panel:#181818;--panel-2:#272727;--card:#272727;--bg-0:#181818;--bg-1:#121212;--brand:#6e6e6e;--brand-2:#878787; }