/* ============================================================================ VILKAX — Dark Wolf · Unified role tokens (--vx-*) The single source of truth every app pulls from. Migrate raw hex → roles. Roles: SURFACE · TEXT · LINE · ACCENT · SIGNAL · SEVERITY (risk green→red) Themes: dark (default / [data-theme="dark"]) and light ([data-theme="light"]). ---------------------------------------------------------------------------- Usage: (or "light") ============================================================================ */ :root, [data-theme="dark"] { color-scheme: dark; /* ---- base ramp -------------------------------------------------------- */ --vx-void: #06080D; /* app backdrop, behind everything */ --vx-bg: #090C12; /* page background */ /* ---- SURFACE (raised planes; 0 lowest → 3 highest) -------------------- */ --vx-surface-0: #0B0E16; --vx-surface-1: #10141F; /* default panel */ --vx-surface-2: #161B29; /* raised panel / hover */ --vx-surface-3: #1E2536; /* chips, inputs, wells */ /* ---- TEXT ------------------------------------------------------------- */ --vx-text: #EEF2FA; /* primary */ --vx-text-muted: #9AA6BC; /* secondary / body */ --vx-text-dim: #828EA6; /* meta / mono labels. Was #67738B: 3.9:1 on the surfaces, under WCAG AA 4.5 */ --vx-text-faint: #7A869E; /* disabled / hairline labels. Was #444F66 (2.4:1); 162 rules use it as text, so it must clear AA */ --vx-on-accent: #FFFFFF; /* text on accent fills */ --vx-accent-fill: #8E3DCC; /* accent as a FILL under white text: #B14CFF measured 3.9:1, this is 5.7:1 */ --vx-on-signal: #04211B; /* text on bright mint/emerald */ /* ---- LINE / border ---------------------------------------------------- */ --vx-line: rgba(255,255,255,0.07); --vx-line-2: rgba(255,255,255,0.13); --vx-line-3: rgba(255,255,255,0.20); /* ---- ACCENT (signature violet) --------------------------------------- */ --vx-accent: #B14CFF; --vx-accent-br: #CB95FF; /* bright — text/icons on dark */ --vx-accent-ink: #CB95FF; /* readable accent text on surface */ --vx-accent-sf: rgba(177,76,255,0.12); /* tint fill */ --vx-accent-ln: rgba(177,76,255,0.34); /* tint border */ --vx-accent-glow: rgba(177,76,255,0.28); /* ---- SIGNAL hues (info / identity / verified) ------------------------ */ --vx-blue: #4C8CFF; --vx-blue-br:#86B4FF; --vx-blue-sf:rgba(76,140,255,0.12); --vx-blue-ln:rgba(76,140,255,0.32); --vx-mint: #00E5B8; --vx-mint-br:#5BF5DA; --vx-mint-sf:rgba(0,229,184,0.12); --vx-mint-ln:rgba(0,229,184,0.30); --vx-emerald: #34D399; --vx-emerald-br:#5BE3AD;--vx-emerald-sf:rgba(52,211,153,0.12);--vx-emerald-ln:rgba(52,211,153,0.30); /* ---- SEVERITY (risk scale: safe → low → elevated → high → critical) -- */ --vx-sev-safe: #00E5B8; --vx-sev-safe-sf:rgba(0,229,184,0.12); --vx-sev-safe-ln:rgba(0,229,184,0.32); --vx-sev-low: #34D399; --vx-sev-low-sf:rgba(52,211,153,0.12); --vx-sev-low-ln:rgba(52,211,153,0.32); --vx-sev-elevated: #F5B544; --vx-sev-elevated-sf:rgba(245,181,68,0.13);--vx-sev-elevated-ln:rgba(245,181,68,0.32); --vx-sev-high: #FF8A4C; --vx-sev-high-sf:rgba(255,138,76,0.13); --vx-sev-high-ln:rgba(255,138,76,0.34); --vx-sev-critical: #FF6B6B; --vx-sev-critical-sf:rgba(255,107,107,0.13);--vx-sev-critical-ln:rgba(255,107,107,0.34); /* ---- elevation shadows ----------------------------------------------- */ --vx-shadow-1: 0 8px 24px -16px rgba(0,0,0,0.8); --vx-shadow-2: 0 20px 50px -28px rgba(0,0,0,0.9); --vx-shadow-pop: 0 30px 70px -36px rgba(0,0,0,0.92); /* ---- type + motion (shared across themes) ---------------------------- */ --vx-f-disp:"Bricolage Grotesque",sans-serif; --vx-f-body:"Manrope",sans-serif; --vx-f-serif:"Instrument Serif",serif; --vx-f-mono:"JetBrains Mono",monospace; --vx-ease:cubic-bezier(0.22,1,0.36,1); --vx-radius:16px; --vx-radius-sm:10px; } /* ============================================================================ LIGHT THEME — premium "Dawn Wolf": cool near-whites, deepened signal hues so accent/severity stay legible on light surfaces. Not a naive invert. ============================================================================ */ [data-theme="light"] { color-scheme: light; --vx-void: #E7EBF3; --vx-bg: #F3F6FB; --vx-surface-0: #FBFCFE; --vx-surface-1: #FFFFFF; --vx-surface-2: #F6F8FC; --vx-surface-3: #EDF1F8; --vx-text: #0E1422; --vx-text-muted: #45536B; --vx-text-dim: #56637A; /* was #6E7B93: 3.96:1 on #F3F6FB, under AA */ --vx-text-faint: #5E6B83; /* was #A6B1C5: 2.0:1 on #F3F6FB, used as text */ --vx-on-accent: #FFFFFF; --vx-accent-fill: #9D3CF0; /* 4.8:1 under white */ --vx-on-signal: #04211B; --vx-line: rgba(14,20,34,0.10); --vx-line-2: rgba(14,20,34,0.16); --vx-line-3: rgba(14,20,34,0.26); /* accent: keep the brand fill, deepen the readable "ink" for text on white */ --vx-accent: #9D3CF0; --vx-accent-br: #B14CFF; --vx-accent-ink: #7A1FC6; --vx-accent-sf: rgba(157,60,240,0.10); --vx-accent-ln: rgba(157,60,240,0.26); --vx-accent-glow: rgba(157,60,240,0.16); --vx-blue: #2563EB; --vx-blue-br:#1D4FD0; --vx-blue-sf:rgba(37,99,235,0.10); --vx-blue-ln:rgba(37,99,235,0.26); --vx-mint: #0E9E84; --vx-mint-br:#08705D; --vx-mint-sf:rgba(14,158,132,0.12); --vx-mint-ln:rgba(14,158,132,0.28); --vx-emerald: #15976B; --vx-emerald-br:#0F7A57;--vx-emerald-sf:rgba(21,151,107,0.12);--vx-emerald-ln:rgba(21,151,107,0.28); --vx-sev-safe: #0E9E84; --vx-sev-safe-sf:rgba(14,158,132,0.12); --vx-sev-safe-ln:rgba(14,158,132,0.28); --vx-sev-low: #15976B; --vx-sev-low-sf:rgba(21,151,107,0.12); --vx-sev-low-ln:rgba(21,151,107,0.28); --vx-sev-elevated: #C7860E; --vx-sev-elevated-sf:rgba(199,134,14,0.12);--vx-sev-elevated-ln:rgba(199,134,14,0.30); --vx-sev-high: #E0632A; --vx-sev-high-sf:rgba(224,99,42,0.12); --vx-sev-high-ln:rgba(224,99,42,0.30); --vx-sev-critical: #DC4B4B; --vx-sev-critical-sf:rgba(220,75,75,0.12);--vx-sev-critical-ln:rgba(220,75,75,0.30); --vx-shadow-1: 0 8px 24px -18px rgba(20,30,60,0.30); --vx-shadow-2: 0 20px 50px -30px rgba(20,30,60,0.34); --vx-shadow-pop: 0 30px 70px -38px rgba(20,30,60,0.40); } /* ============================================================================ FUTURE THEME — "Night Run": deeper void than dark, violet pushed brighter, mint promoted across trust surfaces, glassier lines and glows. A third user-selectable shell, not a replacement for dark. ============================================================================ */ [data-theme="future"] { color-scheme: dark; --vx-void: #030409; --vx-bg: #05060B; --vx-surface-0: #080B13; --vx-surface-1: #0B0F1A; --vx-surface-2: #121A2B; --vx-surface-3: #1B2438; --vx-text: #F4F7FF; --vx-text-muted: #C9D2E8; --vx-text-dim: #93A0BF; --vx-text-faint: #566180; --vx-on-accent: #FFFFFF; --vx-on-signal: #04211B; --vx-line: rgba(177,76,255,0.10); --vx-line-2: rgba(177,76,255,0.18); --vx-line-3: rgba(199,125,255,0.30); --vx-accent: #B14CFF; --vx-accent-br: #D5A6FF; --vx-accent-ink: #D5A6FF; --vx-accent-sf: rgba(177,76,255,0.16); --vx-accent-ln: rgba(177,76,255,0.42); --vx-accent-glow: rgba(177,76,255,0.40); --vx-blue: #4C8CFF; --vx-blue-br:#8FC6FF; --vx-blue-sf:rgba(76,140,255,0.14); --vx-blue-ln:rgba(76,140,255,0.36); --vx-mint: #00E5B8; --vx-mint-br:#66FFE0; --vx-mint-sf:rgba(0,229,184,0.15); --vx-mint-ln:rgba(0,229,184,0.38); --vx-emerald: #34D399; --vx-emerald-br:#6BF2BC;--vx-emerald-sf:rgba(52,211,153,0.15);--vx-emerald-ln:rgba(52,211,153,0.36); --vx-sev-safe: #00E5B8; --vx-sev-safe-sf:rgba(0,229,184,0.15); --vx-sev-safe-ln:rgba(0,229,184,0.40); --vx-sev-low: #34D399; --vx-sev-low-sf:rgba(52,211,153,0.15); --vx-sev-low-ln:rgba(52,211,153,0.38); --vx-sev-elevated: #F5C84B; --vx-sev-elevated-sf:rgba(245,200,75,0.15);--vx-sev-elevated-ln:rgba(245,200,75,0.36); --vx-sev-high: #FF9E3C; --vx-sev-high-sf:rgba(255,158,60,0.15); --vx-sev-high-ln:rgba(255,158,60,0.38); --vx-sev-critical: #FF6B7F; --vx-sev-critical-sf:rgba(255,107,127,0.15);--vx-sev-critical-ln:rgba(255,107,127,0.38); --vx-shadow-1: 0 10px 30px -16px rgba(177,76,255,0.25), 0 8px 24px -16px rgba(0,0,0,0.85); --vx-shadow-2: 0 24px 60px -30px rgba(177,76,255,0.28), 0 20px 50px -28px rgba(0,0,0,0.92); --vx-shadow-pop: 0 34px 80px -38px rgba(177,76,255,0.32), 0 30px 70px -36px rgba(0,0,0,0.94); } /* theme changes should SNAP: engines don't reliably animate a property when only its referenced custom property changes (theme switch). Add .vx-anim-off to the root for one frame around the data-theme change to force a clean instant swap. Normal hover/state transitions are unaffected the rest of the time. */ .vx-anim-off, .vx-anim-off *{transition:none !important;} /* convenience hook (kept as a no-op marker class) */ .vx-themed{}