/* ============================================================================ * tokens.css —— 标书智能平台 · 令牌层（候选 v1） * * 判据：`python -I check_tokens.py tokens.css`（必须全绿） * 取值来源：`app/static/console.css`（1594 行 / md5 a1b78ac9d3）实测抄录 * + 《网站设计详情 v1》§2 / §3 * * ★★ 2026-10-22 v2（按 `_design/web-20261022/` 的样板部署）： * **全站统一成一套蓝** `--brand: #165DFF`（白字 5.19:1）。上一版的站内海军蓝 * `#1B3A6B` 退成**色板里的一个预设**（`--preset-navy`），不再是默认值。 * `--accent` 与 `--brand` 同值但**语义仍分开**（链接/焦点环 vs 主按钮底/品牌块）。 * 新增两族：深色面 `--navy*`（白字 15.54:1）与**标记档**语义色 * `--ok-mark / --warn-mark / --err-mark`（只做色块/圆点/图表段，⛔ 不当文字）。 * * ⚠️⚠️ 未冻结 —— 线上 css 是 `74894e37e0`（接了样板 A 视觉层），本文件依据的是 * `a1b78ac9d3`（未接）。冻结前必须复核 S-3，见《执行顺序 v1》§6。 * 已知线上多出样板 A 的 `--bad` 等（A 套的 `.card.edge.err` 用 `--bad`， * 生产叫 `--err`）——**同一语义两个名字**是迁移时最容易静默出错的地方。 * * 三条不可动的规矩（违反即 C1/C2 破防）： * 1. 零外链 —— 字体/图标/统计脚本的 CDN 都会把平台品牌漏到代理站点上 * 2. 语义色不可被代理注入 —— 代理把"错误色"改成品牌色，用户就认不出什么是出错 * 3. `--brand` 与 `--brand-ink` 必须成对 —— 只给一个颜色 = 必然对比度事故 * ==========================================================================*/ :root{ /* ---- 底与面 ---------------------------------------------------------- */ /* ⚠️ 生产是 #F5F7FA。这里 +2 色阶到 #F7F9FC：实测 `--accent` 压 #F5F7FA 只有 **4.49:1**（差 0.01 不达 AA），压 #F7F9FC 是 4.56:1。 两阶色差肉眼不可辨，但把这条边界从「临界失败」变成「有余量」。 */ --bg: #F7F9FC; /* 页底：冷灰，让白柱浮起来 */ --surface: #FFFFFF; /* 主面 */ --surface-2: #FAFBFD; /* 次级面：表头、条纹行 */ --surface-3: #F1F4F9; /* 三级面：上下文侧栏、代码/引文块 */ /* ---- 品牌族 ★ 白标唯一注入点 ---------------------------------------- 只这三个（外加派生色）可被代理覆盖；其余令牌全站恒定。 默认值 = 样板 v2 的主色 `#165DFF`，白字 5.19:1。 */ --brand: #165DFF; --brand-ink: #FFFFFF; /* ★ 与 --brand 成对，由预设一并注入 */ --brand-soft: #EAF1FF; /* 品牌浅底：选中态、品牌强调块（ink 压它 13.7:1）*/ /* 品牌派生色 —— 由预设一并给出，**不由 CSS 现场计算** （color-mix 的结果无法在提交前算对比度，等于把合规判据让给运行时） */ --brand-700: #0E4FD8; --brand-200: #B7CCFF; --brand-100: #DAE5FF; /* ⚠️ --brand 压它只有 4.11:1 ⇒ 只做底色，不上文字 */ /* ---- 深色面（登录弹窗左栏 / 控制台侧栏 / 深色行动带）---------------- 白字 15.54:1；次级文字 10.23:1；更淡一档 6.10:1。 ⚠️ `--on-navy*` **只用于 `--navy` 面上**：放到白面板上 `--on-navy-dim` 只有约 2.5:1（白面板的账号头用 `.acct-head`，不复用 `.side-user`）。 */ --navy: #0A2540; /* ★ v3：深色面上的**最高对比**文字。⛔ 深底上不许借 `--brand-ink` —— 它和 `--brand` 成对，浅色品牌（`--preset-sky`）那一档它是**深色**的， 压在 --navy 上只有 1.x:1。深色面的文字恒为白，与品牌无关。 */ --on-navy-strong:#FFFFFF; --on-navy: #C7D3E0; --on-navy-dim: #93A4B8; --on-navy-line: rgba(255,255,255,.08); --on-navy-fill: rgba(255,255,255,.06); --on-navy-fill-2:rgba(255,255,255,.14); /* ---- 强调色（链接、主按钮、焦点环）--------------------------------- ★ 刻意不跟品牌走：链接色若随品牌变，每个品牌色都要重算一次链接对比度， 而链接是小字号、要求更严。让 --brand 只作用于「主按钮底 / 品牌强调块 / 选中态」三处，风险面最小。 */ --accent: #165DFF; --accent-700: #0E4FD8; --accent-50: #EAF1FF; /* ⚠️ 新增：浅底上的链接前景。 实测 `--accent` 压在 `--accent-50` 上只有 **4.32:1**（< 4.5）， 而这个组合是**真实存在的**：`.btn.ghost:hover{background:var(--accent-50)}` 配 `.btn.ghost{color:var(--accent)}` —— 鼠标一放上去就触发。 生产 CSS 里这条是活的缺陷。此处用 --accent-700（实测 5.78:1）修掉。 ⚠️ 组件侧要跟着改：`.btn.ghost:hover{color:var(--accent-on-soft)}` */ --accent-on-soft: #0E4FD8; /* ---- 文字 ------------------------------------------------------------ */ --ink: #1F2933; /* 正文 14.76:1 */ --ink-soft: #3E4C59; /* 次级正文 8.81:1 */ --muted: #5B6B7F; /* 说明 5.45:1 */ --muted-2: #8595A8; /* 占位/禁用 3.06:1（仅占位，不做正文）*/ /* ---- 描边（分层靠描边不靠阴影）-------------------------------------- */ --line: #E3E7ED; --line-strong: #CDD5E0; --line-soft: #EFF2F6; /* ---- 语义色（★ 换色值不换语义；代理不可注入）------------------------- ★★ v2 起分**两档**，别混用： `--ok/--warn/--err` 是**文字档**（深色，压各自的浅底都过 AA）； `--*-mark` 是**标记档**（用户口径的品牌标准绿/橙/红）， 白底只有 2.6~3.7:1 ⇒ **只做色块、圆点、环形图/风险条**，⛔ 永远不当文字。 实测（tokens.md 有表）：ok 5.16 / warn 4.83 / err 5.77 / info 7.10（压各自浅底）。 */ --ok: #0B7A3B; --ok-bg: #E8FFEA; --ok-line: #B7F0C2; --ok-mark: #00B42A; --err: #B3241F; --err-bg: #FFECE8; --err-line: #F7C6C0; --err-mark: #F53F3F; --warn: #A65A00; --warn-bg: #FFF7E8; --warn-line: #F5D8A8; --warn-mark: #FF7D00; --info: #1A5578; --info-bg: #EAF2F8; --info-line: #C4DAEA; /* ---- 间距（v2 十档；`--sp-9`/`--sp-10` 只给首屏与深色带用）------------ */ --sp-0: 0px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; --sp-7: 42px; --sp-8: 64px; --sp-9: 88px; --sp-10: 120px; /* ---- 圆角（克制；商务场景的大圆角削弱可信感）------------------------- */ --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; --r-full: 999px; /* ---- 字号（★ 正文基准 13.5px，不是 16px —— 移植时别"顺手调大"）------- */ --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 13.5px; --fs-md: 14.5px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; --fs-5xl: 46px; /* ---- 行高与字重（v3 样板把这两族也收成了令牌）------------------------ */ --lh-tight: 1.2; --lh-snug: 1.35; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- 阴影（最重的几乎看不见；层级感来自描边）------------------------ */ --sh-1: 0 1px 2px rgba(16,28,48,.05); --sh-2: 0 2px 8px rgba(16,28,48,.07); --sh-3: 0 12px 34px rgba(16,28,48,.14); /* ★ v3「发光卡片边框」：第一层是品牌描边（跟着 --brand-200 走，白标自动换色）， 第二层刻意用**中性**阴影而不是品牌色光晕 —— 光晕一旦跟着品牌变， 浅色品牌（--preset-sky）在深色页面上会糊成一团。 */ --glow-sh: 0 0 0 1px var(--brand-200), 0 10px 28px rgba(16,28,48,.08); --glow-sh-hover: 0 0 0 1px var(--brand), 0 16px 40px rgba(16,28,48,.14); /* ---- 面（v3：简约渐变蓝底 + 深蓝首屏）-------------------------------- ⚠️ `--grad-hero` 里的深蓝**是设计恒量，不随品牌走** —— 理由同 `--navy`： 它是"深色面"这一层的身份，不是代理商的主色。品牌色只出现在按钮、 描边、强调块上（注入点仍然是那 6 个 `--brand*`）。 */ --grad-page: linear-gradient(180deg, #EEF4FF 0%, #F7F9FC 40%, #F7F9FC 100%); --grad-hero: linear-gradient(135deg, #0A2540 0%, #123C6E 54%, #0E4FD8 100%); /* ---- 焦点环（v2 起是令牌：`--accent` 换值时环要跟着走）--------------- */ --ring: 0 0 0 3px rgba(22,93,255,.22); /* ---- 环形统计的占比入参 --------------------------------------------- `.ring` 的三段颜色写死在 conic-gradient 里（只认标记档），**颜色不从参数过**； 这里只在页面行内覆盖百分比：`style="--p-ok:82%;--p-warn:94%"`。 默认 `0%` 有两个用处：没有入参时 `.ring` 不报错；tokenlint 认它们是已定义令牌。 */ --p-ok: 0%; --p-warn: 0%; /* ---- 布局 ------------------------------------------------------------ */ --w-page: 1440px; /* 外壳总宽（含左右细线）*/ --w-wide: 1160px; /* 内容区（样板 v2 的读数）*/ --w-side: 216px; /* 上下文侧栏 */ --topbar-h: 58px; --w-read: 920px; /* 长文白卡最大宽 */ --w-auth: 400px; /* 已登录态那张小面板 */ --side-w: 232px; /* 控制台左侧固定栏 */ --ch: 74ch; /* 正文行宽上限 */ --z-nav: 50; /* 站点顶栏（sticky）*/ --z-pop: 80; /* 弹窗 / 浮层 */ /* ---- 白标预设色板（§3.3 实测 16 候选的幸存者）----------------------- ★ 每个预设**自带配对的 ink**，代理只选一个色块 ⇒ 写不进对比度事故。 深色系 12 个配白字；浅色系 2 个配深字。 ⚠️ 已剔除：`#3B82F6`（最"标准"的品牌蓝）—— 白字 3.68 / 深字 4.01 两个方向都 < 4.5。它是最常见的品牌色，也是最不能直接当按钮底的。 */ --preset-navy: #1B3A6B; --preset-slate: #334155; --preset-ink: #2C3E50; --preset-plum: #4C1D95; --preset-wine: #7F1D1D; --preset-indigo: #3730A3; --preset-moss: #14532D; --preset-crimson:#8C1D18; --preset-teal: #065F46; --preset-burnt: #9A3412; --preset-ochre: #92400E; --preset-cyan: #0E7490; --preset-sky: #60A5FA; /* ★ 配深字 5.80:1 */ --preset-amber: #F59E0B; /* ★ 配深字 6.87:1 */ /* 深字色（浅色系品牌配套用） */ --ink-on-light-brand: #1F2933; } /* ============================================================================ * 白标注入（代理租户）—— 由服务端在 里插一段 inline