/* ───────────────────────────────────────────────────────────────────────── VINAR Life OS — Design Tokens Usage: import this file first in every HTML page Theme switching: add data-theme="light" on for light mode ───────────────────────────────────────────────────────────────────────── */ /* ── Dark Mode (default) ─────────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg: #0B1520; --s1: #131F2E; /* card surface */ --s2: #1A2A3A; /* nested card */ --s3: #243040; /* hover / pressed */ --s4: #2E3D50; /* active selected */ /* Borders */ --border: rgba(255, 255, 255, 0.07); --border-md: rgba(255, 255, 255, 0.12); /* Brand colors */ --teal: #0FD4A0; --teal-dim: rgba(15, 212, 160, 0.12); --teal-glow: rgba(15, 212, 160, 0.25); --violet: #7B61FF; --violet-dim: rgba(123, 97, 255, 0.12); --violet-glow: rgba(123, 97, 255, 0.25); /* Semantic colors */ --amber: #F59E0B; --red: #EF4444; --green: #10B981; --blue: #3B82F6; /* Text */ --text-1: #F0F6FF; /* primary */ --text-2: #8FA4B8; /* secondary */ /* Muted labels on dark bg — lightened vs legacy #4A6070 for ~AA on small caps/footnotes */ --text-3: #6D8699; /* muted */ --text-4: #2E3D50; /* disabled */ /* Border radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5); --shadow-teal: 0 0 20px rgba(15, 212, 160, 0.2); --shadow-violet: 0 0 20px rgba(123, 97, 255, 0.2); /* Transitions */ --ease: 0.2s ease; --ease-slow: 0.35s ease; /* Bottom nav height */ --nav-h: 64px; --nav-safe: max(8px, env(safe-area-inset-bottom)); } /* ── Light Mode ──────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #F0F4F8; --s1: #FFFFFF; --s2: #EBF0F5; --s3: #DDE5ED; --s4: #CDD8E3; --border: rgba(0, 0, 0, 0.08); --border-md: rgba(0, 0, 0, 0.14); --text-1: #0B1520; --text-2: #4A6070; --text-3: #8FA4B8; --text-4: #C4D0DC; --shadow-sm: 0 1px 3px rgba(0,0,0,0.10); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --shadow-teal: 0 0 20px rgba(15, 212, 160, 0.15); --shadow-violet: 0 0 20px rgba(123, 97, 255, 0.15); /* Brand colors unchanged in light mode */ } /* ── Archetype colors ────────────────────────────────────────────────────── */ :root { --arch-gold: #F5C842; --arch-red: #EF4444; --arch-green: #10B981; --arch-blue: #3B82F6; --arch-orange: #F97316; --arch-purple: #8B5CF6; }