/* ============================================================ DESIGN TOKENS — Amanda Portfolio 2026 Mirrors the token strategy from "Rebuilding Trust at Scale" ============================================================ */ /* ─── Light Mode (default) ─────────────────────────────── */ :root, [data-theme="light"] { --color-bg: #FFFFFF; --color-bg-subtle: #F7F7F6; --color-surface: #F0EFED; --color-border: #E4E3DF; --color-text-1: #111110; --color-text-2: #6B6A67; --color-text-3: #A8A7A3; --color-accent: #D97706; --color-accent-subtle: #FEF3C7; --color-accent-fg: #92400E; } /* ─── Dark Mode ─────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #111110; --color-bg-subtle: #1A1A19; --color-surface: #222220; --color-border: #2E2E2C; --color-text-1: #FAFAF9; --color-text-2: #A8A7A3; --color-text-3: #6B6A67; --color-accent: #F59E0B; --color-accent-subtle: #1C1400; --color-accent-fg: #FDE68A; } /* System preference — only applies when no data-theme is set. The inline script in sets data-theme immediately, so this acts as a safe fallback only. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg: #111110; --color-bg-subtle: #1A1A19; --color-surface: #222220; --color-border: #2E2E2C; --color-text-1: #FAFAF9; --color-text-2: #A8A7A3; --color-text-3: #6B6A67; --color-accent: #F59E0B; --color-accent-subtle: #1C1400; --color-accent-fg: #FDE68A; } } /* ─── Spacing Scale ─────────────────────────────────────── */ :root { --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; --space-10: 128px; /* ─── Type Scale ─────────────────────────────────────── */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 22px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 48px; --text-4xl: 60px; /* ─── Radius ─────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* ─── Layout ─────────────────────────────────────────── */ --max-w-prose: 680px; --max-w-wide: 960px; --nav-h: 60px; /* ─── Motion ─────────────────────────────────────────── */ --transition: 150ms ease; }