/* ============================================================================ 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: #67738B; /* meta / mono labels */ --vx-text-faint: #444F66; /* disabled / hairline labels */ --vx-on-accent: #FFFFFF; /* text on accent fills */ --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: #6E7B93; --vx-text-faint: #A6B1C5; --vx-on-accent: #FFFFFF; --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:#0B7E69; --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); } /* 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{}