/* ============================================================ V2 Design System — Tokens Single source of truth for colors, spacing, radii, shadows, z-index, and typography aliases. Theme switching: set data-theme="light" on . Default (no attribute) = dark theme. ============================================================ */ /* ── Dark theme (default) ── */ :root { /* Surface */ --bg: #0a0e14; --bg2: #0f1319; --bg3: #151b24; --bg4: #1a2230; /* Borders */ --border: rgba(255,255,255,0.07); --border-hover: rgba(255,255,255,0.15); /* Text */ --text: rgba(240,244,255,0.92); --text-sec: rgba(240,244,255,0.55); --text-muted: rgba(240,244,255,0.3); /* Accent — red */ --red: #e05252; --red-lt: rgba(224,82,82,0.12); --red-glow: rgba(224,82,82,0.15); /* Accent — blue */ --blue: #4a9eff; --blue-lt: rgba(74,158,255,0.10); --blue-glow: rgba(74,158,255,0.12); /* Accent — green */ --green: #3dd68c; --green-lt: rgba(61,214,140,0.10); --green-glow: rgba(61,214,140,0.12); /* Accent — orange */ --orange: #ff8c42; --orange-lt: rgba(255,140,66,0.10); --orange-glow: rgba(255,140,66,0.12); /* Accent — slate */ --slate: #7b93a8; --slate-lt: rgba(123,147,168,0.10); --slate-glow: rgba(123,147,168,0.12); /* Accent — violet / gold (supporting) */ --violet: #b57bee; --violet-lt: rgba(181,123,238,0.10); --violet-glow: rgba(181,123,238,0.12); --gold: #f0b429; --gold-lt: rgba(240,180,41,0.10); --gold-glow: rgba(240,180,41,0.12); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); --shadow-lg: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04); --shadow-frame: 0 16px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3); /* Typography */ --font-display: 'Unbounded', sans-serif; --font-mono: 'Martian Mono', monospace; --font-body: 'Libre Baskerville', Georgia, serif; /* Slide dimensions (16:9) */ --slide-w: 1280px; --slide-h: 720px; /* Spacing scale */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 40px; /* Border radii */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; /* Easing */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Z-index layers */ --z-base: 1; --z-progress: 10; --z-overlay: 100; /* Text on accent backgrounds (badges, circles) */ --text-on-accent: #fff; /* Transitions */ --duration: 150ms; /* Progress bar track */ --progress-track: rgba(255,255,255,0.04); /* Slide body typography floor */ --fs-slide-body: 10.5px; } /* ── Light theme ── */ [data-theme="light"] { /* Surface */ --bg: #f7f8fa; --bg2: #ffffff; --bg3: #f0f2f5; --bg4: #e8ecf0; /* Borders */ --border: rgba(0,0,0,0.08); --border-hover: rgba(0,0,0,0.18); /* Text */ --text: #1a1f2e; --text-sec: #5a6478; --text-muted: #9aa3b4; /* Accent — red */ --red: #c0392b; --red-lt: #fdf0ef; --red-glow: rgba(192,57,43,0.08); /* Accent — blue */ --blue: #2563eb; --blue-lt: #eff4ff; --blue-glow: rgba(37,99,235,0.07); /* Accent — green */ --green: #16a34a; --green-lt: #ecfdf5; --green-glow: rgba(22,163,74,0.07); /* Accent — orange */ --orange: #d97706; --orange-lt: #fffbeb; --orange-glow: rgba(217,119,6,0.07); /* Accent — slate */ --slate: #475569; --slate-lt: #f1f5f9; --slate-glow: rgba(71,85,105,0.07); /* Accent — violet / gold (supporting) */ --violet: #7c3aed; --violet-lt: rgba(124,58,237,0.06); --violet-glow: rgba(124,58,237,0.08); --gold: #b45309; --gold-lt: rgba(180,83,9,0.06); --gold-glow: rgba(180,83,9,0.08); /* Text on accent backgrounds */ --text-on-accent: #fff; /* Transitions */ --duration: 150ms; /* Progress bar track */ --progress-track: rgba(0,0,0,0.06); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04); --shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04); --shadow-frame: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); }