/* ═══════════════════════════════════════════════ 设计令牌：色调（7 套）× 明暗（2 套） 切换方式： ═══════════════════════════════════════════════ */ :root { /* 默认主色（靛蓝） */ --h1: #4F46E5; --h2: #06B6D4; /* 浅色基底 */ --bg: #F1F5F9; --card: #FFFFFF; --card2: #F8FAFC; --bd: #E2E8F0; --bd2: #CBD5E1; --tx: #0F172A; --tx2: #475569; --mu: #64748B; --mu2: #94A3B8; /* 语义色 */ --ok: #10B981; --wn: #F59E0B; --er: #EF4444; --sh: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .05); } /* ── 色调 ── */ html[data-hue="pink"] { --h1: #DB2777; --h2: #F472B6 } html[data-hue="green"] { --h1: #059669; --h2: #34D399 } html[data-hue="violet"] { --h1: #7C3AED; --h2: #D946EF } html[data-hue="amber"] { --h1: #D97706; --h2: #FBBF24 } html[data-hue="ocean"] { --h1: #0284C7; --h2: #22D3EE } html[data-hue="rainbow"] { --h1: #4F46E5; --h2: #EC4899 } /* ── 深色基底 ── */ html[data-theme="dark"] { --bg: #0B1220; --card: #131C31; --card2: #0F172A; --bd: #253149; --bd2: #334155; --tx: #E2E8F0; --tx2: #CBD5E1; --mu: #94A3B8; --mu2: #64748B; --sh: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25); } /* ── 派生变量：组件只使用这两个，换色即全站生效 ── */ :root { --pri: var(--h1); --cy: var(--h2); --pri-w: #EEF2FF; --grad: linear-gradient(135deg, var(--h1), var(--h2)); } html[data-theme="dark"] { --pri-w: rgba(148, 163, 184, .13); }