/* ========================================================================== 7wuxing 主题 · 单一来源（Single Source of Truth） 水墨青靛 · 金水用神 深色主推「玄水为体，月白为文」（默认） 浅色 「留白养金，墨字立骨」 -------------------------------------------------------------------------- 全站唯一主题变量来源： · index.html —— · styles.css —— @import "theme.css";（6 个子页面经 styles.css 自动获得） 组件 CSS 仍引用旧变量名（--gold / --bg-deep / --text-primary …）， 本文件用「兼容别名」把旧名映射到新体系，故组件无需改动即切换配色。 ★ 新代码请直接用 --color-* 语义变量，勿再用旧别名。 ========================================================================== */ :root { /* ---------- 原子色板 palette（hex）---------- */ /* 主色 · 水 */ --ink-900:#12161C; --ink-700:#232B36; --indigo-600:#2F4A78; --indigo-500:#3D5F97; --water-400:#5E86BE; /* 喜神 · 金 */ --paper-0:#F7F9FB; --paper-50:#EEF1F5; --silver-300:#D3DAE2; --metal-400:#AEB9C6; /* 喜神 · 湿土 */ --slate-500:#6B7889; --slate-600:#4E5A6B; /* 语义 */ --info:#3D5F97; --success:#3E8C8C; --warning:#9A7B54; --error:#8E3B3B; /* ---------- 排版 / 间距 token（不随主题）---------- */ --font-display:'ZCOOL XiaoWei','Noto Serif SC',serif; --font-body:'Noto Serif SC',serif; --font-en:'Cormorant Garamond',serif; --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px; --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:36px; --text-5xl:48px; --text-6xl:64px; --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px; --space-xl:40px; --space-2xl:64px; --space-3xl:96px; /* 圆角 · 中庸（原规范 2px，本次定为 6px；全站走 var(--radius)）*/ --radius:6px; --radius-lg:10px; --radius-pill:999px; /* ---------- 五行色（数据用，独立于主题，降饱和合清贵气）---------- */ --elem-wood:oklch(52% 0.09 150); --elem-fire:oklch(55% 0.13 30); --elem-earth:oklch(60% 0.08 80); --elem-metal:oklch(70% 0.015 245); --elem-water:oklch(45% 0.08 245); } /* ========================================================================== 深色 —— 玄水为体，月白为文（★ 主推 / 默认） :root 即深色，故未设 data-theme 时全站默认深色 ========================================================================== */ :root, [data-theme="dark"], [data-theme="xuanye"] { /* xuanye = 旧深色名，兼容存量 localStorage */ --color-bg: var(--ink-900); --color-surface: var(--ink-700); --color-surface-2: #2A3441; --color-border: var(--slate-600); --color-text: var(--paper-0); --color-text-soft: var(--silver-300); --color-text-mute: var(--slate-500); --color-primary: var(--water-400); --color-primary-hover: #7A9ED2; --color-on-primary: var(--ink-900); --color-link: var(--water-400); --color-accent-metal: var(--metal-400); --color-seal: #A84A4A; --color-on-seal: var(--paper-0); --shadow: 0 2px 8px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.25); --atmos: radial-gradient(120% 80% at 50% -8%, rgba(47,74,120,.5) 0%, transparent 55%); /* ---------- 兼容别名：旧变量名 → 新体系（组件无需改）---------- */ --bg-deep:var(--color-bg); --bg-surface:var(--color-surface); --bg-card:var(--color-surface); --bg-card-hover:var(--color-surface-2); --bg-input:color-mix(in srgb, var(--color-surface-2) 60%, transparent); --gold:var(--color-primary); --gold-light:var(--color-primary-hover); --gold-dark:var(--color-primary); --gold-dim:color-mix(in srgb, var(--color-primary) 10%, transparent); --gold-glow:color-mix(in srgb, var(--color-primary) 22%, transparent); --gold-ambient:color-mix(in srgb, var(--color-primary) 5%, transparent); --text-primary:var(--color-text); --text-secondary:var(--color-text-soft); --text-muted:var(--color-text-mute); --text-inverse:var(--color-on-primary); --border-subtle:var(--color-border); --border-gold:var(--color-primary); --border-color:var(--color-border); --seal:var(--color-seal); --seal-soft:color-mix(in srgb, var(--color-seal) 15%, transparent); --shadow-card:var(--shadow); --shadow-deep:var(--shadow); --shadow-gold:0 2px 20px color-mix(in srgb, var(--color-primary) 18%, transparent); --star-color:color-mix(in srgb, var(--color-primary) 40%, transparent); --glow-color:color-mix(in srgb, var(--color-primary) 30%, transparent); } /* ========================================================================== 浅色 —— 留白养金，墨字立骨 ========================================================================== */ [data-theme="light"], [data-theme="xuanzhi"] { /* xuanzhi = 旧浅色名，兼容存量 localStorage */ --color-bg: var(--paper-0); --color-surface: var(--paper-50); --color-surface-2: var(--silver-300); --color-border: var(--silver-300); --color-text: var(--ink-900); --color-text-soft: var(--slate-600); --color-text-mute: var(--slate-500); --color-primary: var(--indigo-600); --color-primary-hover: var(--indigo-500); --color-on-primary: var(--paper-0); --color-link: var(--indigo-600); --color-accent-metal: var(--metal-400); --color-seal: var(--error); --color-on-seal: var(--paper-0); --shadow: 0 1px 3px rgba(18,22,28,.05), 0 8px 30px rgba(18,22,28,.04); --atmos: none; /* ---------- 兼容别名（浅色）---------- */ --bg-deep:var(--color-bg); --bg-surface:var(--color-surface); --bg-card:var(--color-surface); --bg-card-hover:var(--color-surface-2); --bg-input:color-mix(in srgb, var(--color-surface-2) 50%, transparent); --gold:var(--color-primary); --gold-light:var(--color-primary-hover); --gold-dark:var(--color-primary); --gold-dim:color-mix(in srgb, var(--color-primary) 8%, transparent); --gold-glow:color-mix(in srgb, var(--color-primary) 15%, transparent); --gold-ambient:color-mix(in srgb, var(--color-primary) 4%, transparent); --text-primary:var(--color-text); --text-secondary:var(--color-text-soft); --text-muted:var(--color-text-mute); --text-inverse:var(--color-on-primary); --border-subtle:var(--color-border); --border-gold:var(--color-primary); --border-color:var(--color-border); --seal:var(--color-seal); --seal-soft:color-mix(in srgb, var(--color-seal) 8%, transparent); --shadow-card:var(--shadow); --shadow-deep:var(--shadow); --shadow-gold:0 2px 20px color-mix(in srgb, var(--color-primary) 12%, transparent); --star-color:transparent; --glow-color:transparent; }