/* ========================================================================== VidSpark AI — Design Tokens (single source of truth) Phase 0 created this file; Phase 4 activates it as the live theme. Status: LINKED from dashboard.html (see in ). The bare :root block below is what actually renders today — the light + orange theme validated across Phases 1-3. dashboard.html's own inline :root now aliases every shared token to these --vs-* custom properties instead of hardcoding its own hex values, so this file is the one place to change a color/radius/shadow across the whole app. The former dark theme is preserved, unchanged, under .vs-tokens-dark-archive — not applied anywhere, kept only as a reference /rollback point (e.g. if a future dark-mode toggle is built). ========================================================================== */ :root{ /* ---- light + orange accent — the live theme (Phase 4) ---- */ --vs-bg: #FBF8F3; --vs-surface: #FFFFFF; --vs-surface-2: #F4EFE6; --vs-surface-3: #FDFBF7; --vs-border-1: #E7E0D3; --vs-border-2: #DCD3C2; --vs-border-3: #D8CEBB; --vs-text: #211D16; --vs-muted: #756D5E; --vs-faint: #A69C89; --vs-accent: #F2900F; --vs-accent-2: #E8830A; --vs-accent-soft: #FDECD1; --vs-accent-line: #F3C888; --vs-accent-glow: rgba(242,144,15,.22); --vs-green: #167A45; --vs-red: #C23B22; --vs-amber: #B25E09; --vs-radius: 16px; --vs-radius-sm: 12px; --vs-shadow: 0 16px 40px -18px rgba(33,29,22,.16); --vs-shadow-sm: 0 8px 20px -12px rgba(33,29,22,.12); --vs-side-w: 270px; --vs-side-w-collapsed: 72px; --vs-ease: cubic-bezier(.4,0,.2,1); } /* ---- archived (former dark theme) — inactive, kept for reference/rollback ---- */ .vs-tokens-dark-archive{ --vs-bg: #0B0F19; --vs-surface: #141c2e; --vs-surface-2: #0c1220; --vs-surface-3: #18203353; --vs-border-1: rgba(255,255,255,.06); --vs-border-2: rgba(255,255,255,.10); --vs-border-3: rgba(255,255,255,.16); --vs-text: #eaecf3; --vs-muted: #8b92a7; --vs-faint: #5b6276; --vs-accent: #FF9D1F; --vs-accent-2: #ff7a18; --vs-accent-light: #ffb85c; --vs-accent-soft: rgba(255,157,31,.12); --vs-accent-line: rgba(255,157,31,.32); --vs-accent-glow: rgba(255,157,31,.30); --vs-green: #34d399; --vs-red: #f87171; --vs-amber: #fbbf24; --vs-radius: 16px; --vs-radius-sm: 9px; --vs-shadow: 0 18px 50px -18px rgba(0,0,0,.65); --vs-shadow-sm: 0 8px 24px -12px rgba(0,0,0,.6); --vs-side-w: 270px; --vs-side-w-collapsed: 72px; --vs-ease: cubic-bezier(.4,0,.2,1); }