/* ============================================================ 2K Systems — Design Tokens Single source of truth for brand colours, type, spacing. Light is the default. Dark via [data-theme="dark"] on . ============================================================ */ :root { /* Brand colours, derived from the 2K logo gradient. Cyan -> Violet -> Magenta. Violet is the primary accent because it sits at the centre of the mark and reads strategic, not loud. */ --brand-cyan: #22D3EE; --brand-violet: #7C3AED; --brand-magenta: #EC4899; --brand-gradient: linear-gradient(135deg, #22D3EE 0%, #7C3AED 50%, #EC4899 100%); --brand-gradient-soft: linear-gradient(135deg, rgba(34,211,238,0.12) 0%, rgba(124,58,237,0.12) 50%, rgba(236,72,153,0.12) 100%); /* ---- Light theme (default) ---- */ --bg: #FAFAF7; --bg-alt: #F2F1EC; --surface: #FFFFFF; --surface-2: #F5F4EF; --text-primary: #0E0E14; --text-secondary: #4A4A55; --text-muted: #8B8B95; --border: rgba(15, 15, 25, 0.08); --border-strong: rgba(15, 15, 25, 0.14); --accent: #6D28D9; /* deeper violet on light bg */ --accent-soft: rgba(109, 40, 217, 0.08); --accent-border: rgba(109, 40, 217, 0.22); --shadow-sm: 0 1px 2px rgba(15, 15, 25, 0.04); --shadow-md: 0 4px 16px rgba(15, 15, 25, 0.06); --shadow-lg: 0 12px 40px rgba(15, 15, 25, 0.08); /* ---- Typography ---- */ --font-display: 'Instrument Serif', 'Fraunces', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; --fs-eyebrow: 0.72rem; --fs-body: 1rem; --fs-lead: 1.125rem; /* ---- Spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---- Radius ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; /* ---- Layout ---- */ --container: 1200px; --gutter-x: clamp(20px, 6vw, 96px); /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 0.18s var(--ease); --t-med: 0.28s var(--ease); } [data-theme="dark"] { --bg: #0A0A12; --bg-alt: #0F0F1B; --surface: #15151F; --surface-2: #1C1C2A; --text-primary: #F8FAFC; --text-secondary: #A1A1B0; --text-muted: #6E6E7E; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --accent: #A78BFA; /* lighter violet on dark bg */ --accent-soft: rgba(167, 139, 250, 0.10); --accent-border: rgba(167, 139, 250, 0.28); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); --brand-gradient-soft: linear-gradient(135deg, rgba(34,211,238,0.10) 0%, rgba(167,139,250,0.10) 50%, rgba(236,72,153,0.10) 100%); } /* Respect OS preference until user explicitly toggles */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0A0A12; --bg-alt: #0F0F1B; --surface: #15151F; --surface-2: #1C1C2A; --text-primary: #F8FAFC; --text-secondary: #A1A1B0; --text-muted: #6E6E7E; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --accent: #A78BFA; --accent-soft: rgba(167, 139, 250, 0.10); --accent-border: rgba(167, 139, 250, 0.28); --brand-gradient-soft: linear-gradient(135deg, rgba(34,211,238,0.10) 0%, rgba(167,139,250,0.10) 50%, rgba(236,72,153,0.10) 100%); } }