:root { /* ── Colors ───────────────────────────────── */ --color-bg: #0d0d0f; --color-surface: #18181c; --color-surface-2: #222228; --color-surface-3: #2a2a32; --color-border: #2e2e38; --color-accent: #7c3aed; --color-accent-hover: #6d28d9; --color-accent-glow: rgba(124, 58, 237, 0.35); --color-text: #f0f0f5; --color-text-muted: #8888a0; --color-text-subtle: #55556a; --color-error: #ef4444; --color-success: #22c55e; /* ── Typography ──────────────────────────── */ --font-base: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.6; /* ── Spacing ──────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ── Layout ───────────────────────────────── */ --max-width: 1440px; --content-width: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); --header-height: 64px; /* ── Radii ────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* ── Shadows ──────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 24px var(--color-accent-glow); /* ── Transitions ──────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ── Z-index layers ───────────────────────── */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; } /* ── THEMES ─────────────────────────────────────────────────────────── Applied via [data-theme="..."] on . Only override what changes from the :root dark baseline. -------------------------------------------------------------------- */ /* 1. Dark (default — defined in :root above, no override needed) */ /* 2. Light — clean Apple-esque */ [data-theme="light"] { --color-bg: #f2f2f7; --color-surface: #ffffff; --color-surface-2: #f0f0f2; --color-surface-3: #e5e5ea; --color-border: #d1d1d6; --color-accent: #7c3aed; --color-accent-hover: #6d28d9; --color-accent-glow: rgba(124, 58, 237, 0.25); --color-text: #1c1c1e; --color-text-muted: #6c6c70; --color-text-subtle: #aeaeb2; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.10); --shadow-glow: 0 0 24px rgba(124, 58, 237, 0.25); } /* 3. Midnight — deep space blue */ [data-theme="midnight"] { --color-bg: #080c18; --color-surface: #0f1629; --color-surface-2: #162040; --color-surface-3: #1e2d52; --color-border: #243566; --color-accent: #38bdf8; --color-accent-hover: #0ea5e9; --color-accent-glow: rgba(56, 189, 248, 0.30); --color-text: #e8f4fd; --color-text-muted: #7ba7c8; --color-text-subtle: #3d6080; --shadow-glow: 0 0 24px rgba(56, 189, 248, 0.30); } /* 4. Crimson — bold red */ [data-theme="crimson"] { --color-bg: #0d0505; --color-surface: #1a0a0a; --color-surface-2: #240e0e; --color-surface-3: #2e1212; --color-border: #3d1515; --color-accent: #e50914; --color-accent-hover: #c40812; --color-accent-glow: rgba(229, 9, 20, 0.30); --color-text: #f5edec; --color-text-muted: #a07878; --color-text-subtle: #5a3535; --shadow-glow: 0 0 24px rgba(229, 9, 20, 0.30); } /* 5. Forest — dark emerald */ [data-theme="forest"] { --color-bg: #050f08; --color-surface: #0a1a10; --color-surface-2: #0f2418; --color-surface-3: #142e20; --color-border: #1a3d29; --color-accent: #10b981; --color-accent-hover: #059669; --color-accent-glow: rgba(16, 185, 129, 0.30); --color-text: #edfaf4; --color-text-muted: #6fac8a; --color-text-subtle: #2d5c42; --shadow-glow: 0 0 24px rgba(16, 185, 129, 0.30); } /* 6. Amber — warm gold */ [data-theme="amber"] { --color-bg: #0f0900; --color-surface: #1a1200; --color-surface-2: #261a00; --color-surface-3: #332200; --color-border: #4a3300; --color-accent: #f59e0b; --color-accent-hover: #d97706; --color-accent-glow: rgba(245, 158, 11, 0.30); --color-text: #fdf8ee; --color-text-muted: #b89a5a; --color-text-subtle: #6b5523; --shadow-glow: 0 0 24px rgba(245, 158, 11, 0.30); } /* ── Theme transition ───────────────────────────────────────────────── Class toggled by JS around theme switch to animate color changes. -------------------------------------------------------------------- */ .theme-transitioning, .theme-transitioning * { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease !important; /* !important: override component transitions */ }