/* ═══════════════════════════════════════════════════════════════ 三国·重启 — 设计令牌 (Design Tokens) 方案三 UI 重构 · 阶段 A 用法：组件样式一律引用 var(--xxx)，禁止硬编码色值。 主题：，默认 dark。 ═══════════════════════════════════════════════════════════════ */ /* ── 主题 A：水墨暗夜（默认） ───────────────────────────── */ :root, html[data-theme="dark"] { color-scheme: dark; /* 底色层级 */ --bg: #1a0e05; /* 页面最底层 */ --bg-panel: #2a1a0a; /* 面板底色 */ --bg-panel-2: #2d1d0d; /* 次级面板（侧栏/浮层） */ --bg-raise: #3a2515; /* 抬升面（卡片渐变起点） */ --bg-raise-2: #503c1e; /* 更高抬升面 */ --bg-hover: #3a2a15; /* 悬停底色 */ /* 边框 */ --line: #8b7355; /* 主边框 */ --line-dim: #5a4a30; /* 次级边框 */ --line-soft: #3a2a15; /* 弱边框/分隔线 */ --line-btn: #6b5030; /* 按钮边框 */ /* 文字 */ --text: #d4c5a0; /* 主文字 */ --text-bright: #e8d8a0; /* 强调文字 */ --text-mid: #c0b080; /* 次级文字 */ --text-dim: #8a7a5a; /* 弱文字 */ --text-faint: #6a5a3a; /* 最弱文字 */ --text-label: #a89060; /* 标签文字 */ /* 强调/功能色 */ --gold: #d4a843; /* 金色强调（主按钮/选中/标题） */ --gold-hover: #c89840; --gold-rgb: 212,168,67; --ok: #44dd44; /* 成功/健康 */ --ok-rgb: 68,221,68; --warn: #ffcc00; /* 警告 */ --warn-rgb: 255,204,0; --danger: #ff6644; /* 危险/损失 */ --danger-strong: #ff4444; --danger-soft: #ff8844; /* 提醒橙 */ --info: #44aaff; /* 情报蓝 */ --info-soft: #88ddff; --resource: #ddaa44; /* 资源金棕 */ --announce: #ffd700; /* 全服广播金 */ /* 按钮渐变 */ --btn-grad-1: #4a3020; --btn-grad-2: #241408; --btn-grad-h1: #5a4030; --btn-grad-h2: #3d2d1d; /* 其他 */ --shadow: rgba(0,0,0,0.5); --bg-raise-rgb: 60,40,20; --line-dim-rgb: 90,74,48; --bg-panel-rgb: 42,26,10; } /* ── 主题 B：亮色绢帛 ───────────────────────────────── */ html[data-theme="light"] { color-scheme: light; --bg: #f5e6c8; /* 绢帛米白 */ --bg-panel: #fbf0d9; --bg-panel-2: #f0dfc0; --bg-raise: #e8d4ac; --bg-raise-2: #dcc28f; --bg-hover: #e0d0b0; --line: #a08050; --line-dim: #b39a6e; --line-soft: #e0d0b0; --line-btn: #b09560; --text: #4a3520; --text-bright: #2a1a0a; --text-mid: #5f4a2a; --text-dim: #7a5a30; --text-faint: #8a6a40; --text-label: #6b4a2a; --gold: #8a5a10; --gold-hover: #a07020; --gold-rgb: 138,90,16; --ok: #2d9d4a; --ok-rgb: 45,157,74; --warn: #c89000; --warn-rgb: 200,144,0; --danger: #c04030; --danger-strong: #b03020; --danger-soft: #c85a20; --info: #2a6ab0; --info-soft: #4a90cc; --resource: #a07420; --announce: #b07000; --btn-grad-1: #e0c898; --btn-grad-2: #c8a870; --btn-grad-h1: #ecd8ac; --btn-grad-h2: #d8c090; --shadow: rgba(90,60,20,0.25); --bg-raise-rgb: 232,212,172; --line-dim-rgb: 201,178,138; --bg-panel-rgb: 251,240,217; }