/* ========================================================================== theme.css —— 主题令牌层（默认白底，深色为可选变体） -------------------------------------------------------------------------- 单一真源：--c-* 存 RGB 三元组，供 Tailwind 的 rgb(var(--c-x) / ) 使用； 再派生出 --cg-* 给 app.css 那 4121 行老组件用。改色只改这一处。 切主题： 即可，不需要改任何组件代码。 加载顺序：tokens.css → theme.css → app.css → tw.build.css ========================================================================== */ :root { /* 白底是主动选择，不是跟随系统。light only 可防 iOS / 微信把 高风险红反色成青绿 —— 健康场景下这是严重事故。 */ color-scheme: light only; /* ── 表面：白 → 次级 → 浮层 ──────────────────────────────────── */ --c-bg: 255 255 255; --c-bg-sub: 250 250 250; --c-card: 255 255 255; --c-overlay: 244 244 245; /* ── 描边：白底靠边框分层，不靠阴影 ─────────────────────────── */ --c-line: 228 228 231; --c-line-sub: 239 239 241; --c-line-strong: 212 212 216; /* ── 文字：四级，最浅一级仍有 4.5:1 ─────────────────────────── */ --c-ink: 24 24 27; --c-ink-2: 63 63 70; --c-ink-3: 82 82 91; --c-ink-4: 113 113 122; /* ── 强调色：低饱和墨绿，和 logo 同族。只用于主操作与选中态 ───── */ /* 强调色：低饱和墨绿，和 logo 同族。 原来是 indigo（90 95 214）—— 那是「AI 生成界面」最默认的一支颜色， 放在这个页面里，主按钮和链接都长着同一张模板脸。 换成墨绿后，冷绿的「守护」和橙红的风险色形成冷暖分工，不打架。 */ --c-accent: 45 106 87; --c-accent-hover: 36 88 72; --c-accent-soft: 30 74 60; --c-accent-dim: 234 243 239; --c-accent-border: 199 222 213; /* ── 状态 ────────────────────────────────────────────────────── */ --c-ok: 21 128 61; --c-ok-dim: 240 253 244; --c-warn: 180 83 9; --c-warn-dim: 255 251 235; --c-danger: 185 28 28; --c-danger-dim: 254 242 242; /* ── 五档风险：白底上全部 ≥ 4.5:1 ───────────────────────────── */ --c-risk-very-low: 15 118 110; --c-risk-low: 21 128 61; --c-risk-mid: 180 83 9; --c-risk-high: 194 65 12; --c-risk-very-high: 185 28 28; --c-risk-very-low-bg: 240 253 250; --c-risk-very-low-bd: 153 246 228; --c-risk-low-bg: 240 253 244; --c-risk-low-bd: 187 247 208; --c-risk-mid-bg: 255 251 235; --c-risk-mid-bd: 253 230 138; --c-risk-high-bg: 255 247 237; --c-risk-high-bd: 254 215 170; --c-risk-very-high-bg: 254 242 242; --c-risk-very-high-bd: 254 202 202; /* ── 进度/刻度的未填充底色、中性前景 ────────────────────────── */ --c-track: 228 228 231; --c-neutral-fg: 161 161 170; /* ── 焦点环 ─────────────────────────────────────────────────── */ --c-focus: 90 95 214; /* ══ 以下是派生值，不要单独改 ═════════════════════════════════ */ --cg-color-bg: rgb(var(--c-bg)); --cg-color-surface: rgb(var(--c-card)); --cg-color-surface-sunk: rgb(var(--c-overlay)); --cg-color-line: rgb(var(--c-line)); --cg-color-line-strong: rgb(var(--c-line-strong)); --cg-color-line-only: rgb(var(--c-line-strong)); --cg-color-ink: rgb(var(--c-ink)); --cg-color-ink-2: rgb(var(--c-ink-2)); --cg-color-text: rgb(var(--c-ink-3)); --cg-color-text-2: rgb(var(--c-ink-3)); --cg-color-text-3: rgb(var(--c-ink-4)); --cg-color-primary: rgb(var(--c-accent)); --cg-color-primary-dark: rgb(var(--c-accent-hover)); --cg-color-primary-deep: rgb(var(--c-accent-soft)); --cg-color-primary-light: rgb(var(--c-accent-dim)); --cg-color-primary-border: rgb(var(--c-accent-border)); --cg-color-blue: #3B82F6; --cg-color-blue-dark: #2563EB; --cg-color-blue-light: #EFF6FF; --cg-color-purple: #8B5CF6; --cg-color-purple-light: #F5F3FF; --cg-color-risk-very-low: rgb(var(--c-risk-very-low)); --cg-color-risk-low: rgb(var(--c-risk-low)); --cg-color-risk-mid: rgb(var(--c-risk-mid)); --cg-color-risk-high: rgb(var(--c-risk-high)); --cg-color-risk-very-high: rgb(var(--c-risk-very-high)); --cg-color-risk-very-low-bg: rgb(var(--c-risk-very-low-bg)); --cg-color-risk-low-bg: rgb(var(--c-risk-low-bg)); --cg-color-risk-mid-bg: rgb(var(--c-risk-mid-bg)); --cg-color-risk-high-bg: rgb(var(--c-risk-high-bg)); --cg-color-risk-very-high-bg: rgb(var(--c-risk-very-high-bg)); --cg-color-success: rgb(var(--c-ok)); --cg-color-warning: rgb(var(--c-warn)); --cg-color-danger: rgb(var(--c-danger)); --cg-color-info: #3B82F6; --cg-color-info-bg: #EFF6FF; --cg-color-error-bg: rgb(var(--c-danger-dim)); --cg-color-error-line: rgb(var(--c-risk-very-high-bd)); --cg-color-flag-line: #FCA5A5; --cg-color-focus: rgb(var(--c-focus)); /* 白底阴影要极淡，只用来托住浮层 */ --cg-shadow-1: 0 1px 2px rgba(24, 24, 27, .05); --cg-shadow-2: 0 4px 16px rgba(24, 24, 27, .07); --cg-shadow-3: 0 -8px 32px rgba(24, 24, 27, .09); --cg-shadow-card: none; --cg-shadow-hover: 0 6px 20px rgba(24, 24, 27, .08); } /* ========================================================================== 深色变体： 柔和石墨灰，不是纯黑。只覆盖 --c-*，--cg-* 自动跟随。 ========================================================================== */ :root[data-theme='dark'] { color-scheme: dark; --c-bg: 42 42 44; --c-bg-sub: 48 48 51; --c-card: 54 54 58; --c-overlay: 63 63 68; --c-line: 78 78 85; --c-line-sub: 69 69 73; --c-line-strong: 94 94 102; --c-ink: 244 243 245; --c-ink-2: 220 219 223; --c-ink-3: 184 183 189; --c-ink-4: 160 160 167; --c-accent: 122 184 162; --c-accent-hover: 142 199 179; --c-accent-soft: 168 214 197; --c-accent-dim: 40 62 55; --c-accent-border: 62 92 81; --c-ok: 120 205 162; --c-ok-dim: 51 80 63; --c-warn: 228 188 105; --c-warn-dim: 78 67 48; --c-danger: 240 140 132; --c-danger-dim: 80 54 54; --c-risk-very-low: 120 205 162; --c-risk-low: 163 214 160; --c-risk-mid: 228 188 105; --c-risk-high: 229 151 111; --c-risk-very-high: 240 140 132; --c-risk-very-low-bg: 51 80 63; --c-risk-very-low-bd: 69 107 83; --c-risk-low-bg: 58 81 54; --c-risk-low-bd: 78 106 73; --c-risk-mid-bg: 78 67 48; --c-risk-mid-bd: 102 89 61; --c-risk-high-bg: 78 58 47; --c-risk-high-bd: 102 78 63; --c-risk-very-high-bg: 80 54 54; --c-risk-very-high-bd: 104 72 72; --c-track: 78 78 85; --c-neutral-fg: 94 94 102; --c-focus: 184 188 241; --cg-color-blue: #9BB9EC; --cg-color-blue-dark: #AAC6F1; --cg-color-blue-light: #353D50; --cg-color-purple: #BBB0EE; --cg-color-purple-light: #3E3B54; --cg-color-info: #9BB9EC; --cg-color-info-bg: #353D50; --cg-color-flag-line: #845252; --cg-shadow-1: 0 1px 2px rgba(0, 0, 0, .18); --cg-shadow-2: 0 4px 16px rgba(0, 0, 0, .24); --cg-shadow-3: 0 -8px 32px rgba(0, 0, 0, .3); --cg-shadow-hover: 0 6px 20px rgba(0, 0, 0, .22); }