/* ============================================================ WFUI Design Tokens v1.0 · "VOID SIGNAL" 虚空信号 ------------------------------------------------------------ 一套与框架无关的设计令牌（CSS Variables）。 在任何项目中引入本文件即可获得完整主题能力： 切换主题： 或 data-theme="dark" ============================================================ */ :root { color-scheme: dark; /* ---------- 1. 色彩 · 中性面 ---------- */ --wf-bg: #0b0f16; /* 页面底色（非纯黑，带星图蓝调） */ --wf-bg-soft: #0e141e; /* 次级底色 */ --wf-surface: #121a28; /* 面板表面 */ --wf-surface-2: #182338; /* 面板内嵌表面 / hover */ --wf-border: rgba(150, 168, 196, 0.16); --wf-border-strong: rgba(150, 168, 196, 0.32); /* ---------- 2. 色彩 · 文本 ---------- */ --wf-text: #e9eef6; --wf-text-dim: #9aa7bd; --wf-text-faint: #66738a; --wf-text-on-accent: #1c1508; /* 压在金色上的深色墨 */ /* ---------- 3. 色彩 · 主强调（Orokin 金） ---------- */ --wf-accent: #d9b25f; --wf-accent-strong: #f2d28a; --wf-accent-dim: rgba(217, 178, 95, 0.14); --wf-accent-border: rgba(217, 178, 95, 0.42); /* ---------- 4. 色彩 · 功能色 ---------- */ --wf-teal: #57c4b4; /* 开放世界 / 正向状态 */ --wf-teal-dim: rgba(87, 196, 180, 0.14); --wf-danger: #e07a68; /* 紧急 / 倒计时告急 */ --wf-danger-dim: rgba(224, 122, 104, 0.14); --wf-live: #7fd88f; /* 在线呼吸灯 */ /* ---------- 5. 色彩 · 派系 ---------- */ --wf-faction-grineer: #d97b64; --wf-faction-corpus: #6f9fd8; --wf-faction-infested: #9bbf62; --wf-faction-corrupted: #c9a86a; --wf-faction-oryx: #b9a0e0; /* ---------- 6. 色彩 · 遗物纪元 ---------- */ --wf-era-lith: #d9b25f; /* 古纪 */ --wf-era-meso: #aeb9cb; /* 前纪 */ --wf-era-neo: #57c4b4; /* 中纪 */ --wf-era-axi: #e07a68; /* 后纪 */ --wf-era-requiem: #b39ae0; /* 安魂 */ --wf-era-omnia: #c6cfdd; /* 万能 */ /* ---------- 7. 字体 ---------- */ --wf-font-display: "Rajdhani", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --wf-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --wf-font-num: "Rajdhani", "Consolas", "Noto Sans SC", monospace; /* ---------- 8. 间距（4px 基准） ---------- */ --wf-space-1: 4px; --wf-space-2: 8px; --wf-space-3: 12px; --wf-space-4: 16px; --wf-space-5: 20px; --wf-space-6: 28px; --wf-space-8: 44px; /* ---------- 9. 形状 ---------- */ --wf-chamfer: 10px; /* 切角尺寸（品牌标志性几何） */ --wf-radius: 4px; --wf-ring-size: 96px; --wf-ring-inset: 9px; /* ---------- 10. 阴影与玻璃 ---------- */ --wf-shadow: 0 14px 36px rgba(2, 6, 14, 0.45); --wf-shadow-sm: 0 4px 14px rgba(2, 6, 14, 0.35); --wf-glass: rgba(11, 15, 22, 0.78); /* ---------- 11. 动效 ---------- */ --wf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --wf-dur-fast: 150ms; --wf-dur-base: 240ms; --wf-dur-slow: 480ms; /* ---------- 12. 布局 ---------- */ --wf-max-w: 1400px; /* ---------- 13. 星云背景（可替换：换图只改这里） ---------- */ --wf-nebula: url("../assets/images/bg-nebula.svg"); --wf-nebula-veil: rgba(11, 15, 22, 0.38); /* 星云上的暗色罩，保证面板可读性 */ } /* ============================================================ 亮色主题（数据可读性优先的日间模式） ============================================================ */ [data-theme="light"] { color-scheme: light; --wf-bg: #f1f3f7; --wf-bg-soft: #e9edf4; --wf-surface: #ffffff; --wf-surface-2: #f4f7fb; --wf-border: rgba(28, 42, 68, 0.14); --wf-border-strong: rgba(28, 42, 68, 0.28); --wf-text: #1c2536; --wf-text-dim: #56637a; --wf-text-faint: #8a94a8; --wf-text-on-accent: #2b2008; --wf-accent: #a97e1f; --wf-accent-strong: #8a6716; --wf-accent-dim: rgba(169, 126, 31, 0.12); --wf-accent-border: rgba(169, 126, 31, 0.4); --wf-teal: #0e8c7d; --wf-teal-dim: rgba(14, 140, 125, 0.12); --wf-danger: #c04a37; --wf-danger-dim: rgba(192, 74, 55, 0.12); --wf-live: #2f8c46; --wf-faction-grineer: #b8543d; --wf-faction-corpus: #3a6fb0; --wf-faction-infested: #62873a; --wf-faction-corrupted: #92702c; --wf-faction-oryx: #7a5fb0; --wf-era-lith: #a97e1f; --wf-era-meso: #5d6b82; --wf-era-neo: #0e8c7d; --wf-era-axi: #c04a37; --wf-era-requiem: #7a5fb0; --wf-era-omnia: #5d6b82; --wf-shadow: 0 12px 30px rgba(24, 38, 66, 0.1); --wf-shadow-sm: 0 4px 12px rgba(24, 38, 66, 0.08); --wf-glass: rgba(241, 243, 247, 0.82); --wf-nebula: url("../assets/images/bg-nebula.svg"); --wf-nebula-veil: rgba(241, 243, 247, 0.88); /* 亮色下重纱遮罩，星云仅作淡纹理 */ }