/* ============================================================================= MyApollo v3 — Design tokens Lives alongside v2 sheets. Pages opted in to v3 import this BEFORE v3-components.css. v2 pages stay untouched until cut-over. ============================================================================= */ :root { /* ── Color · dark (default) ───────────────────────────────────────────── */ --bg: #0d0c0a; --surface: #15130f; --surface-2: #1c1915; --ink: #f5f0e6; --ink-dim: rgba(245, 240, 230, 0.66); --ink-faint: rgba(245, 240, 230, 0.42); --line: rgba(245, 240, 230, 0.08); --line-2: rgba(245, 240, 230, 0.14); --gold: #c9a84c; --gold-light: #e4cc7a; --gold-soft: rgba(201, 168, 76, 0.12); --rose: #b85c5c; --cream: #f0ebe3; --grad-warm: linear-gradient(135deg, #c9a84c 0%, #b85c5c 100%); --grad-gold: linear-gradient(135deg, #c9a84c 0%, #e4cc7a 100%); --grad-rose: linear-gradient(135deg, #b85c5c 0%, #c9a84c 100%); --glass-bg: rgba(245, 240, 230, 0.04); --glass-border: rgba(245, 240, 230, 0.10); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); /* Status accents */ --ok: #6fae6f; --warn: #d6a84f; --err: #c96c6c; /* ── Typography ──────────────────────────────────────────────────────── */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-display-xl: 700 clamp(2.5rem, 5vw, 4.5rem) / 1.05 var(--font-display); --font-display-lg: 700 clamp(2rem, 3.6vw, 3rem) / 1.08 var(--font-display); --font-display-md: 600 clamp(1.5rem, 2.4vw, 2rem) / 1.15 var(--font-display); --font-italic-accent: italic 500 1.25rem/1.35 var(--font-display); --font-body-lg: 400 1.0625rem/1.55 var(--font-body); --font-body-md: 400 0.9375rem/1.55 var(--font-body); --font-body-sm: 400 0.8125rem/1.5 var(--font-body); --font-mono-sm: 500 0.8125rem/1.4 var(--font-mono); --kicker-size: 0.6875rem; --kicker-tracking: 0.12em; --kicker-weight: 700; /* ── Radii ───────────────────────────────────────────────────────────── */ --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* ── Spacing scale ───────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; /* ── Shadow & elevation ──────────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.18); --shadow-md: 0 8px 24px rgba(0,0,0,0.28); --shadow-card: 0 14px 38px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.04) inset; --shadow-glow: 0 0 32px rgba(201, 168, 76, 0.22); /* ── Motion ──────────────────────────────────────────────────────────── */ --t-fast: 150ms; --t-base: 250ms; --t-slow: 450ms; --ease: cubic-bezier(0.2, 0.9, 0.2, 1); --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ── Layout ──────────────────────────────────────────────────────────── */ --container-max: 1280px; --container-pad: clamp(16px, 4vw, 32px); --nav-h: 64px; /* ── Z-index scale ───────────────────────────────────────────────────── */ --z-base: 1; --z-sticky: 50; --z-nav: 100; --z-modal: 1000; --z-toast: 1100; } /* ── Color · light theme ──────────────────────────────────────────────── Toggled via [data-theme="light"] on . Gold + rose hold constant so brand recognition survives the flip. ───────────────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #f9f5ec; --surface: #f3eedf; --surface-2: #ebe4d2; --ink: #1a1814; --ink-dim: #5a5550; --ink-faint: #8a847d; --line: rgba(26, 24, 20, 0.08); --line-2: rgba(26, 24, 20, 0.14); --glass-bg: rgba(26, 24, 20, 0.03); --glass-border: rgba(26, 24, 20, 0.10); --gold-soft: rgba(201, 168, 76, 0.16); --shadow-sm: 0 2px 8px rgba(60, 40, 10, 0.08); --shadow-md: 0 8px 24px rgba(60, 40, 10, 0.12); --shadow-card: 0 14px 38px rgba(60, 40, 10, 0.14); --shadow-glow: 0 0 32px rgba(201, 168, 76, 0.28); } /* ── Reduced motion ───────────────────────────────────────────────────── Respected globally. Components that animate must `transition: var(--t-base) var(--ease)` so this override flattens them to opacity-only. ───────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; } }