/* ============================================================ 慵懒半径 · 设计变量（Fresh Dopamine 2026 设计语言） 职责：色彩/圆角/阴影/动效曲线/布局尺寸/色彩工具类 页面专属样式放 yl-css/<页面名>.css，不要写进本文件 ============================================================ */ /* ================= 1. 品牌色板与主题变量 ================= */ :root { /* 顶栏页头控件统一高度：输入下拉 / 日期框 / 月份胶囊 / 各类按钮都取这一档， 保证顶栏一行控件（含 .tb-ic 圆钮、主按钮）高度完全对齐。窄屏可在 responsive.css 里覆盖 */ --tb-h: 38px; /* 品牌主色别名：随下方 data-brand 层的 --violet 联动（demo 词表里的 --brand）， home.css 等按设计稿词表书写的规则统一从这里取色 */ --brand: var(--violet); /* 生效中/禁休提醒色（小组卡禁休徽章 / 禁休弹窗状态格）：默认借用 warn 橙。 var() 在 html 元素上解析，自动随 light/dark 取对应主题的 --warn/--warn-bg。 与品牌主色同族的色卡（b4 赤霞橙 / b5 节日红）在下方 html[data-brand] 层 换成分离色相的提醒色，避免状态色和界面主色撞成一团。 */ --live: var(--warn); --live-bg: var(--warn-bg); /* ---- 内容伴生色 v4（2026-10-02 派生制，替代 v3 固定值）---- 8 个内容色不再全局固定，而是以品牌锚点 --av-h 为基准旋转派生（可视化对照见 demo-color.html）： 色相 = H + 固定偏移（mint+30 / cyan+45 / blue+75 / teal+90 / pink+185 / orange+240 / amber+265 / yellow+290）， 彩度 C 0.10~0.13、明度按角色沿用 v3 档；避让约束（设计期算定，定值见下方各品牌块）： 距品牌主色 ≥26°、距语义色 ≥12°、槽间距 ≥14°。语义四色（--ok/--warn/--danger/--info）恒定不派生。 :root 下列的是 b3 森屿绿的派生值（data-brand 未生效首帧兜底用）； -soft 柔底改由本色 color-mix 派生，自动随品牌走（历史使用量≈0）。 手工疏排（oklch 黄绿区 90°~140° 色相压缩，等角距不足以分辨，经像素验收后微调）： b4 --blue→105°、b5 --teal→118°/--blue→142°、b7 --teal→130°/--pink→113°。 */ --violet: oklch(0.58 0.12 165); --violet-soft: oklch(0.94 0.04 165); --orange: oklch(0.70 0.13 45); /* 柿橙 · 考试/签到 */ --orange-soft: color-mix(in srgb, var(--orange) 12%, #fff); --mint: oklch(0.72 0.115 195); /* 海雾青 · 请假 */ --mint-soft: color-mix(in srgb, var(--mint) 12%, #fff); --pink: oklch(0.68 0.115 350); /* 莓玫 · 表单 */ --pink-soft: color-mix(in srgb, var(--pink) 12%, #fff); --yellow: oklch(0.80 0.125 109); /* 麦金 · 金标 */ --yellow-soft: color-mix(in srgb, var(--yellow) 12%, #fff); --plum: oklch(0.62 0.13 305); /* 藕紫 · 团建（恒定不派生，同语义四色口径） */ /* amber 暖金：yellow 的同族深阶；专用于「暂未开放/等待中/待审」状态。 不再混中性灰——混灰会把色相拉到红褐，浅底上发暗发土 */ --amber: oklch(0.66 0.115 84); --blue: oklch(0.60 0.115 240); /* 晴空蓝 · 学习 */ --blue-soft: color-mix(in srgb, var(--blue) 12%, #fff); /* teal 黛蓝：blue 深一档（与考试 orange 对偶，c-teal 驱动学习类主题色）；名承 teal 实为深蓝 */ --teal: oklch(0.54 0.115 255); --teal-soft: color-mix(in srgb, var(--teal) 12%, #fff); --cyan: oklch(0.72 0.10 210); /* 湖青 · 他人请假卡专属色 */ --cyan-soft: color-mix(in srgb, var(--cyan) 12%, #fff); /* ---- 身份色板 v2（头像 / 成员标识）---- 六色渐变，按 ERP 哈希取色的机制不变，但**取色方式由「固定 hex」改为「围绕当前色卡派生」**： 六个色位以当前品牌主色的 oklch 色相 --av-h 为锚，在 ±60° 内按 24° 等差展开 （-60 / -36 / -12 / +12 / +36 / +60），明度错落（L 0.54~0.64）再拉开一层辨识度。 好处：整组头像永远落在当前色卡所属的色族里 —— 旧版固定 hex 里那支暖橙，落在冷色 色卡（b2 蓝 / b3 绿 / b6 青）界面上是满屏唯一的暖色，跳色很明显；v2 从根上消除撞色。 弧长控制在 120°（类比色区间）：既能一眼区分成员，又不会跨到对侧色族 （早前试过 ±75°，b4 橙会派生出 128° 的绿头像，同样跳色）。换 data-brand 即整组换调。 定义处仍是唯一真源：core.js FACES、score.js / rest-detail.js 数组， 以及 home.css / publish.css / groups.css / analytics.css 均只引用 --av-N 令牌。 */ --av-h: 165; /* 品牌主色锚点色相（默认 b3 森屿绿；各 data-brand 层覆写） */ --av-1: linear-gradient(135deg, oklch(0.58 0.16 calc(var(--av-h) - 60)), oklch(0.50 0.15 calc(var(--av-h) - 51))); --av-2: linear-gradient(135deg, oklch(0.62 0.15 calc(var(--av-h) - 36)), oklch(0.54 0.14 calc(var(--av-h) - 27))); --av-3: linear-gradient(135deg, oklch(0.56 0.16 calc(var(--av-h) - 12)), oklch(0.48 0.15 calc(var(--av-h) - 3))); --av-4: linear-gradient(135deg, oklch(0.60 0.15 calc(var(--av-h) + 12)), oklch(0.52 0.14 calc(var(--av-h) + 21))); --av-5: linear-gradient(135deg, oklch(0.64 0.14 calc(var(--av-h) + 36)), oklch(0.56 0.13 calc(var(--av-h) + 45))); --av-6: linear-gradient(135deg, oklch(0.54 0.16 calc(var(--av-h) + 60)), oklch(0.46 0.15 calc(var(--av-h) + 69))); /* 布局尺寸（1:1 demo：侧栏 250 / 收缩 86） */ --side-w: 250px; --side-w-min: 86px; --top-h: 64px; --nav-h: 66px; /* 品牌标：= 品牌区「标题 + 副标题」文字块高度（20px×lh28 + 1px + 9px×lh11）， 侧栏（展开/收缩态）与登录页共用，保证三处 logo 尺寸一致 */ --brand-mark: 40px; /* 圆角 */ --r-lg: 22px; --r-md: 16px; --r-sm: 11px; /* 动效曲线 */ --spring: cubic-bezier(0.34, 1.4, 0.5, 1); --ease: cubic-bezier(0.3, 0.8, 0.3, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 动效时长档（2026-09-30 全站统一，见 UI-STYLE-AUDIT §动效）： 按压反馈 120 / 微交互(hover/开关) 160 / 浮层下拉淡入 200 / 弹层·页面入场 320。 新代码一律取令牌；存量离群值按报告 P1/P2 逐步并轨。 */ --t-press: 120ms; --t-fast: 160ms; --t-med: 200ms; --t-slow: 320ms; /* ---- 全局刻度（2026-09-30 组件库规格化，见 UI-STYLE-AUDIT 文档）---- 间距刻度 --sp-*：页面 padding / gap / margin 一律取这 8 档， 不再随手写 13 / 17 / 19px 这类离群值（存量逐步迁移）。 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* 奖牌金银铜（Top3 领奖台/奖章唯一用色，calendar 与 score 共用；不随品牌色卡变） */ --gold-grad: linear-gradient(160deg, #ffe08a, #f2a71c); --silver-grad: linear-gradient(160deg, #e9eef5, #aeb9c9); --bronze-grad: linear-gradient(160deg, #eeb482, #c9783a); --gold-c: #f2a71c; --silver-c: #aeb9c9; --bronze-c: #c9783a; /* 染底/描边色源 */ /* 表单控件高度档：--f-h 标准（42，与设置页 --set-h 同档）； --f-h-sm 紧凑行（34，行内编辑/双列小卡用）。core.css .inp 家族消费。 */ --f-h: 42px; --f-h-sm: 34px; /* 焦点环全站唯一口径：品牌 3px 柔环（原 3px / 3.5px 两种写法并轨到 3px） */ --focus-ring: 0 0 0 3px var(--brand-tint, color-mix(in srgb, var(--violet) 9%, transparent)); /* ---------------- 设计稿词表（design-preview 同名别名 · 单一真源） ---------------- 外壳/首页/登录页按 demo 词表书写，取值统一指回上方真源； 老页面继续用 --card/--well 等。两套名字永远同值，杜绝双体系割裂。 --tint/--grad 依赖 data-brand 层，保留兜底以兼容未设色卡的首帧（如登录页）。 */ --shell: var(--card); /* 卡片 / 面板底 */ --soft: var(--well); /* 柔底（输入框 / 浅块） */ --soft2: var(--well-line); /* 更柔底 · 细描边 */ --rail-bg: var(--bg-2); /* 侧栏 / 主面板底 */ --page-bg: var(--bg); /* 最外层页面底 */ --sub: var(--ink-2); /* 次文字 */ --faint: var(--ink-3); /* 弱文字 */ --tint: var(--brand-tint, color-mix(in srgb, var(--violet) 9%, transparent)); --grad: var(--brand-grad, linear-gradient(135deg, var(--violet), var(--pink))); /* 进度环弧色：品牌色压暗到 90%（几乎就是品牌色本身，仅轻微加深保证在白底上不发虚）； 低百分比时环上大部分是底环，底环同源取 26%，整只环才有「颜色」而不是一圈虚影。 */ --ring: color-mix(in srgb, var(--brand) 90%, #000); --ring-track: color-mix(in srgb, var(--ring) 26%, transparent); --sh: var(--shadow); /* 面板阴影 */ /* 侧栏菜单悬停底：同为色卡淡染，但比 --tint 浓一档（浅色 13% / 深色 22%，见下方主题层）， 因为侧栏底是 --bg-2，浅色下和中性灰 --card-2 几乎同色（旧写法等于没反馈）。 随色卡走：换 data-brand 即换悬停色，不用改 core.css。 */ --nav-hover: color-mix(in srgb, var(--brand) 13%, transparent); } html[data-theme="light"] { color-scheme: light; /* 灰色/墨色/分隔线/阴影：所有 brand 共享同一套，切 brand 不变灰 */ --bg: #ffffff; --bg-2: #f5f6fa; --card: #ffffff; --card-2: #f0f2f8; --well: #f0f2f8; --well-line: #e8ebf4; --ink: #1c1f30; --ink-2: #757c95; --ink-3: #a6acc2; --line: #e8eaf3; --hover: #f0f2f8; --mask: rgba(28, 31, 48, .42); --shadow-sm: 0 6px 16px rgba(28, 31, 48, .06); --shadow: 0 14px 34px rgba(28, 31, 48, .10), 0 1px 2px rgba(28, 31, 48, .06); --shadow-pop: 0 24px 60px rgba(28, 31, 48, .22); /* 语义色：所有 brand 共享（1:1 demo shared.css :root）。 2026-10-02 色彩诊断：C 统一收敛到 0.13~0.16，hue 不动 */ --ok: #10a06c; --warn: #d98f3f; --danger: #da5b79; --info: #5575cd; --ok-bg: rgba(16,160,108,.10); --warn-bg: rgba(217,143,63,.12); --danger-bg: rgba(218,91,121,.10); --info-bg: rgba(85,117,205,.12); } html[data-theme="dark"] { color-scheme: dark; /* 灰色/墨色/分隔线/阴影：所有 brand 共享同一套（b1 dark 值） */ --bg: #0e1322; --bg-2: #131a2e; --card: #232b48; --card-2: #2d3758; --well: #2d3758; --well-line: #384368; --ink: #e9ecf8; --ink-2: #9aa3c6; --ink-3: #6b7398; --line: rgba(150, 162, 220, .13); --hover: #343f63; --mask: rgba(2, 6, 18, .60); --shadow-sm: 0 6px 16px rgba(0, 0, 0, .34), 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 14px 34px rgba(0, 0, 0, .44), 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 24px 60px rgba(0, 0, 0, .6); /* 语义色（2026-10-02 色彩诊断：旧值 L 0.76+ 偏粉蜡笔，压深半档更沉稳，hue 不动） */ --ok: #4ec491; --warn: #e2a355; --danger: #ee7d8d; --info: #819ae9; --ok-bg: rgba(78,196,145,.13); --warn-bg: rgba(226,163,85,.13); --danger-bg: rgba(238,125,141,.13); --info-bg: rgba(129,154,233,.13); /* 深色档内容色提亮（ΔL：teal +0.20 / cyan +0.08 / amber +0.12，其余沿用亮色档明度）； 各品牌块的深色值按同一规则派生，见下方品牌色调层 */ --teal: oklch(0.74 0.115 255); --cyan: oklch(0.80 0.10 210); --amber: oklch(0.78 0.115 84); --plum: oklch(0.76 0.10 305); /* 侧栏悬停底：深色底更吸光，淡染要加一档才和浅色观感一致 */ --nav-hover: color-mix(in srgb, var(--brand) 22%, transparent); /* 身份色板 v2 深色档：整体抬亮一档（L +0.06），暗底上才够「亮」，色相与浅色档一致 */ --av-1: linear-gradient(135deg, oklch(0.64 0.16 calc(var(--av-h) - 60)), oklch(0.58 0.16 calc(var(--av-h) - 51))); --av-2: linear-gradient(135deg, oklch(0.68 0.15 calc(var(--av-h) - 36)), oklch(0.62 0.15 calc(var(--av-h) - 27))); --av-3: linear-gradient(135deg, oklch(0.62 0.16 calc(var(--av-h) - 12)), oklch(0.56 0.16 calc(var(--av-h) - 3))); --av-4: linear-gradient(135deg, oklch(0.66 0.15 calc(var(--av-h) + 12)), oklch(0.60 0.15 calc(var(--av-h) + 21))); --av-5: linear-gradient(135deg, oklch(0.70 0.14 calc(var(--av-h) + 36)), oklch(0.64 0.14 calc(var(--av-h) + 45))); --av-6: linear-gradient(135deg, oklch(0.60 0.16 calc(var(--av-h) + 60)), oklch(0.54 0.16 calc(var(--av-h) + 69))); } /* ================= 2. 色彩工具类 ================= 同时驱动 --tc（标签/按钮色）与 --sc（弹窗图标色）， 配合 color-mix 使用：柔色底 = color-mix(in oklch, C 12~14%, card) */ .c-violet { --tc: var(--violet); --sc: var(--violet); } .c-mint { --tc: var(--mint); --sc: var(--mint); } .c-pink { --tc: var(--pink); --sc: var(--pink); } .c-orange { --tc: var(--orange); --sc: var(--orange); } .c-blue { --tc: var(--blue); --sc: var(--blue); } .c-teal { --tc: var(--teal); --sc: var(--teal); } /* 学习主题：与考试 orange 对偶，任务执行端 c-blue 同语义但更深一档 */ .c-cyan { --tc: var(--cyan); --sc: var(--cyan); } /* 表单 · 信息 */ .c-yellow { --tc: var(--yellow); --sc: var(--yellow); } .c-plum { --tc: var(--plum); --sc: var(--plum); } .c-gray { --tc: var(--ink-3); --sc: var(--ink-3); } /* ── 语义色工具类（按钮/图标「按色卡取色」的唯一入口）──────────── 上面 c-violet…c-yellow 是**内容分类色**（标签/卡片主题，用于区分「不同类」）； 下面这组 c-danger/c-warn/c-ok/c-info 是**语义色**（用于区分「不同含义」）。 做破坏/警示/成功类按钮与图标时必须用语义组，不要用内容组的 c-pink / c-orange 去"兼职"表意 —— 那正是过去同一语义出现两种红的根源（--pink 与 --danger 并非同色）。 颜色定义见 :root 的 --danger / --warn / --ok / --info。 */ .c-danger { --tc: var(--danger); --sc: var(--danger); } .c-warn { --tc: var(--warn); --sc: var(--warn); } .c-ok { --tc: var(--ok); --sc: var(--ok); } .c-info { --tc: var(--info); --sc: var(--info); } /* 生效中/禁休提醒：走 --live（默认 warn；b4/b5 色卡下自动换 danger/info 防撞色）， 禁休/排位类状态标签用它，不要直接 c-warn（橙/红主色卡下撞主色）。 */ .c-live { --tc: var(--live); --sc: var(--live); } /* ============================================================ 品牌色调层（单页 · data-brand 变量驱动，不是七套页面） ──────────────────────────────────────────────────────────── 色卡规范 v4（2026-10-02 派生制落地）：在 v3 定标（主色收饱和、brand2 降档）基础上， 8 个内容伴生色改为「品牌锚点 + 固定偏移」派生，每套品牌卡自带一整套协调的辅助色—— 换色卡时按钮色与全部类型/状态内容色一起换调，且按构造保证不撞主色。 派生规则与七卡定值见文件头「内容伴生色 v4」注释；语义四色恒定不派生。 每套仅覆写令牌，页面样式一律引用令牌，「换色卡 = 换一次 html[data-brand]」不变。 色相环（OKLCH H，间距≥28°）： b1 极光紫 300° b2 深海蓝 263° b3 森屿绿 165° b4 赤霞橙 45° b5 节日红 24° b6 青碧 222° b7 藕荷粉 330° 覆写内容： --violet 品牌主色（= 全站 primary，:root 里 --brand 指向它） --violet-soft 主色柔底 --brand2 渐变副色（--brand-grad 的另一端） --brand-grad 主渐变（按钮/高亮底） --brand-tint 主色淡染（focus 环 / 选中底） 明暗各一套。soft 统一用 color-mix 派生（light 10% 混白， dark 18% 混卡片底 #232b48），保证 7 套派生规则完全一致。 ============================================================ */ /* ---------- b1 极光紫（v3：收饱和去霓虹感，副色海光青保持极光意象） ---------- */ html[data-theme="light"][data-brand="b1"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 330); --cyan: oklch(.72 0.1 345); --blue: oklch(.6 0.115 29); --teal: oklch(.54 0.115 44); --pink: oklch(.68 0.115 125); --orange: oklch(.7 0.13 180); --amber: oklch(.66 0.115 205); --yellow: oklch(.8 0.125 230); --violet: #8451c9; --violet-soft: color-mix(in srgb, #8451c9 10%, #ffffff); --brand2: #60bacd; --brand-grad: linear-gradient(135deg, #8451c9, #60bacd); --brand-tint: rgba(132,81,201,.09); } html[data-theme="dark"][data-brand="b1"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 330); --cyan: oklch(.8 0.1 345); --blue: oklch(.6 0.115 29); --teal: oklch(.74 0.115 44); --pink: oklch(.68 0.115 125); --orange: oklch(.7 0.13 180); --amber: oklch(.78 0.115 205); --yellow: oklch(.8 0.125 230); --violet: #a17adf; --violet-soft: color-mix(in srgb, #a17adf 18%, #232b48); --brand2: #6dc7da; --brand-grad: linear-gradient(135deg, #a17adf, #6dc7da); --brand-tint: rgba(161,122,223,.18); } /* ---------- b2 深海蓝（v3：微降饱和成沉稳皇家蓝） ---------- */ html[data-theme="light"][data-brand="b2"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 293); --cyan: oklch(.72 0.1 308); --blue: oklch(.6 0.115 338); --teal: oklch(.54 0.115 353); --pink: oklch(.68 0.115 88); --orange: oklch(.7 0.13 143); --amber: oklch(.66 0.115 182); --yellow: oklch(.8 0.125 207); --violet: #3d6cce; --violet-soft: color-mix(in srgb, #3d6cce 10%, #ffffff); --brand2: #67b7d6; --brand-grad: linear-gradient(135deg, #3d6cce, #67b7d6); --brand-tint: rgba(61,108,206,.09); } html[data-theme="dark"][data-brand="b2"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 293); --cyan: oklch(.8 0.1 308); --blue: oklch(.6 0.115 338); --teal: oklch(.74 0.115 353); --pink: oklch(.68 0.115 88); --orange: oklch(.7 0.13 143); --amber: oklch(.78 0.115 182); --yellow: oklch(.8 0.125 207); --violet: #6793eb; --violet-soft: color-mix(in srgb, #6793eb 18%, #232b48); --brand2: #74c4e3; --brand-grad: linear-gradient(135deg, #6793eb, #74c4e3); --brand-tint: rgba(103,147,235,.18); } /* ---------- b3 森屿绿（v3：主色保留；brand2 从 186° 同族青绿挪到 210° 海雾青， 渐变从「绿→绿」变「林→海」，副色与全局 --mint(192°) 也拉开） ---------- */ html[data-theme="light"][data-brand="b3"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 195); --cyan: oklch(.72 0.1 210); --blue: oklch(.6 0.115 240); --teal: oklch(.54 0.115 255); --pink: oklch(.68 0.115 350); --orange: oklch(.7 0.13 45); --amber: oklch(.66 0.115 84); --yellow: oklch(.8 0.125 109); --violet: #17906a; --violet-soft: color-mix(in srgb, #17906a 10%, #ffffff); --brand2: #51b5c5; --brand-grad: linear-gradient(135deg, #17906a, #51b5c5); --brand-tint: rgba(23,144,106,.09); } html[data-theme="dark"][data-brand="b3"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 195); --cyan: oklch(.8 0.1 210); --blue: oklch(.6 0.115 240); --teal: oklch(.74 0.115 255); --pink: oklch(.68 0.115 350); --orange: oklch(.7 0.13 45); --amber: oklch(.78 0.115 84); --yellow: oklch(.8 0.125 109); --violet: #2caf84; --violet-soft: color-mix(in srgb, #2caf84 18%, #232b48); --brand2: #5fc2d2; --brand-grad: linear-gradient(135deg, #2caf84, #5fc2d2); --brand-tint: rgba(44,175,132,.18); } /* ---------- b4 赤霞橙（v3：从亮橙收成陶土赤霞，白底对比 2.5→3.3:1； 副色金橙压暗半档，渐变不再「橙上加荧光橙」） ---------- */ html[data-theme="light"][data-brand="b4"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 89); --cyan: oklch(.72 0.1 104); --blue: oklch(.6 0.115 105); --teal: oklch(.54 0.115 135); --pink: oklch(.68 0.115 230); --orange: oklch(.7 0.13 285); --amber: oklch(.66 0.115 310); --yellow: oklch(.8 0.125 335); --violet: #db703b; --violet-soft: color-mix(in srgb, #db703b 10%, #ffffff); --brand2: #e6b14e; --brand-grad: linear-gradient(135deg, #db703b, #e6b14e); --brand-tint: rgba(219,112,59,.09); } html[data-theme="dark"][data-brand="b4"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 89); --cyan: oklch(.8 0.1 104); --blue: oklch(.6 0.115 105); --teal: oklch(.74 0.115 135); --pink: oklch(.68 0.115 230); --orange: oklch(.7 0.13 285); --amber: oklch(.78 0.115 310); --yellow: oklch(.8 0.125 335); --violet: #f08e54; --violet-soft: color-mix(in srgb, #f08e54 18%, #232b48); --brand2: #ebbc63; --brand-grad: linear-gradient(135deg, #f08e54, #ebbc63); --brand-tint: rgba(240,142,84,.18); } /* ---------- b5 节日红（v3：主色保留纯正中国红；brand2 收饱和让渐变不发闷） ---------- */ html[data-theme="light"][data-brand="b5"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 82); --cyan: oklch(.72 0.1 97); --blue: oklch(.6 0.115 142); --teal: oklch(.54 0.115 118); --pink: oklch(.68 0.115 209); --orange: oklch(.7 0.13 250); --amber: oklch(.66 0.115 289); --yellow: oklch(.8 0.125 314); --violet: #d21f2f; --violet-soft: color-mix(in srgb, #d21f2f 10%, #ffffff); --brand2: #f16f78; --brand-grad: linear-gradient(135deg, #d21f2f, #f16f78); --brand-tint: rgba(210,31,47,.09); } html[data-theme="dark"][data-brand="b5"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 82); --cyan: oklch(.8 0.1 97); --blue: oklch(.6 0.115 142); --teal: oklch(.74 0.115 118); --pink: oklch(.68 0.115 209); --orange: oklch(.7 0.13 250); --amber: oklch(.78 0.115 289); --yellow: oklch(.8 0.125 314); --violet: #f25563; --violet-soft: color-mix(in srgb, #f25563 18%, #232b48); --brand2: #ff8d97; --brand-grad: linear-gradient(135deg, #f25563, #ff8d97); --brand-tint: rgba(242,85,99,.18); } /* ---------- b6 青碧（v3：主色保留；brand2 薄荷收饱和一档） ---------- */ html[data-theme="light"][data-brand="b6"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 252); --cyan: oklch(.72 0.1 281); --blue: oklch(.6 0.115 297); --teal: oklch(.54 0.115 312); --pink: oklch(.68 0.115 47); --orange: oklch(.7 0.13 102); --amber: oklch(.66 0.115 127); --yellow: oklch(.8 0.125 180); --violet: #0e9dc0; --violet-soft: color-mix(in srgb, #0e9dc0 10%, #ffffff); --brand2: #56cda8; --brand-grad: linear-gradient(135deg, #0e9dc0, #56cda8); --brand-tint: rgba(14,157,192,.09); } html[data-theme="dark"][data-brand="b6"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 252); --cyan: oklch(.8 0.1 281); --blue: oklch(.6 0.115 297); --teal: oklch(.74 0.115 312); --pink: oklch(.68 0.115 47); --orange: oklch(.7 0.13 102); --amber: oklch(.78 0.115 127); --yellow: oklch(.8 0.125 180); --violet: #35c2df; --violet-soft: color-mix(in srgb, #35c2df 18%, #232b48); --brand2: #3fe0b6; --brand-grad: linear-gradient(135deg, #35c2df, #3fe0b6); --brand-tint: rgba(53,194,223,.18); } /* ---------- b7 藕荷粉（v3：从热品红收成真正的藕荷——灰调藕紫， 副色同步柔化；旧值 C 0.196 在浅底上艳得发荧光） ---------- */ html[data-theme="light"][data-brand="b7"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 28); --cyan: oklch(.72 0.1 43); --blue: oklch(.6 0.115 87); --teal: oklch(.54 0.115 130); --pink: oklch(.68 0.115 113); --orange: oklch(.7 0.13 210); --amber: oklch(.66 0.115 235); --yellow: oklch(.8 0.125 288); --violet: #a758a1; --violet-soft: color-mix(in srgb, #a758a1 10%, #ffffff); --brand2: #db84b2; --brand-grad: linear-gradient(135deg, #a758a1, #db84b2); --brand-tint: rgba(167,88,161,.09); } html[data-theme="dark"][data-brand="b7"] { /* 派生内容伴生色（锚点旋转，见文件头 v4 注释） */ --mint: oklch(.72 0.115 28); --cyan: oklch(.8 0.1 43); --blue: oklch(.6 0.115 87); --teal: oklch(.74 0.115 130); --pink: oklch(.68 0.115 113); --orange: oklch(.7 0.13 210); --amber: oklch(.78 0.115 235); --yellow: oklch(.8 0.125 288); --violet: #c579be; --violet-soft: color-mix(in srgb, #c579be 18%, #232b48); --brand2: #f097c5; --brand-grad: linear-gradient(135deg, #c579be, #f097c5); --brand-tint: rgba(197,121,190,.18); } /* ---------- 品牌级语义色挪位（唯一保留的特例层） ---------- v4 派生制已按构造避开「内容色 vs 主色」撞色，旧的 b2 --teal、b4 --orange 挪位块删除。 语义色不派生，故只保留语义色撞主色的特例（与 --live 换色同机制）： b2 深海蓝 263°：--info(267°) 与主色几乎同相 → 挪紫藤 295°； b4/b5 的 --live 换色见上方状态提醒色块。b3 的 --ok 与主色同相为语义和声，有意保留。 */ html[data-theme="light"][data-brand="b2"] { --info: #8168be; --info-bg: rgba(129,104,190,.12); } html[data-theme="dark"][data-brand="b2"] { --info: #9d8ad5; --info-bg: rgba(157,138,190,.14); } /* ---------- 状态提醒色：与主色同族色卡的撞色规避 ---------- 与明暗无关（背景是半透明染底、前景取中明度），故用不含 data-theme 的选择器。 --warn 橙（40°）在 b4 赤霞橙（28°）/ b5 节日红（24°）的界面里和主色融成一团： b4 → 换 --danger 玫红（347°），b5 → 换 --info 蓝（230°），其余卡沿用 warn。 */ html[data-brand="b4"] { --live: var(--danger); --live-bg: var(--danger-bg); } html[data-brand="b5"] { --live: var(--info); --live-bg: var(--info-bg); } /* ---------- 身份色板锚点：各色卡主色在 oklch 空间的实测色相 ---------- 与明暗无关（只看色相），故用不含 data-theme 的选择器，一处定义两态通用。 实测值由上方各 --violet 的 light 档换算：b1 #8451c9=300 / b2 #3d6cce=263 / b3 #17906a=165 / b4 #db703b=45 / b5 #d21f2f=24 / b6 #0e9dc0=222 / b7 #a758a1=330。 */ html[data-brand="b1"] { --av-h: 300; } html[data-brand="b2"] { --av-h: 263; } html[data-brand="b3"] { --av-h: 165; } html[data-brand="b4"] { --av-h: 45; } html[data-brand="b5"] { --av-h: 24; } html[data-brand="b6"] { --av-h: 222; } html[data-brand="b7"] { --av-h: 330; }