/* ========================================================================== AuthorityOS Design System — Tokens Style direction: Apple simplicity, Notion clarity, Stripe polish, Medium readability, MIT Tech Review editorial gravity. ========================================================================== */ :root { /* ---- Color: Light (default) ---- */ --bg-primary: #FFFFFF; --bg-secondary: #F8FAFC; --bg-elevated: #FFFFFF; --text-primary: #0F172A; --text-muted: #64748B; --text-inverse: #F8FAFC; --accent: #2563EB; --accent-hover: #1D4ED8; --accent-subtle: #EFF6FF; --success: #10B981; --success-subtle: #ECFDF5; --warning: #F59E0B; --warning-subtle: #FFFBEB; --border: #E2E8F0; --border-strong: #CBD5E1; --shadow-color: 220 20% 10%; /* ---- Typography ---- */ --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --text-xs: 0.8125rem; /* 13px — captions, metadata, labels */ --text-sm: 0.9375rem; /* 15px — small UI text */ --text-base: 1.0625rem; /* 17px — article body */ --text-lg: 1.25rem; /* 20px — lede paragraphs, card titles */ --text-xl: 1.5rem; /* 24px — H3 */ --text-2xl: 1.875rem; /* 30px — H2 */ --text-3xl: 2.375rem; /* 38px — H1 (article) */ --text-4xl: 3rem; /* 48px — H1 (page/pillar) */ --text-5xl: 3.75rem; /* 60px — hero headline */ --leading-body: 1.8; --leading-heading: 1.2; --leading-tight: 1.1; --weight-body: 400; --weight-body-medium: 500; --weight-heading: 700; --weight-heading-bold: 800; /* ---- Reading width ---- */ --measure-min: 680px; --measure-max: 760px; /* ---- Spacing scale (4px base) ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---- Radius ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* card standard */ --radius-full: 999px; /* ---- Shadow (subtle, editorial — never heavy) ---- */ --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.04); --shadow-md: 0 4px 16px hsl(var(--shadow-color) / 0.06), 0 1px 3px hsl(var(--shadow-color) / 0.04); --shadow-lg: 0 12px 32px hsl(var(--shadow-color) / 0.08), 0 2px 6px hsl(var(--shadow-color) / 0.04); /* ---- Motion ---- */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --duration-fast: 150ms; --duration-base: 220ms; /* ---- Layout ---- */ --container-max: 1280px; --header-height: 72px; } /* ---- Color: Dark ---- Manual toggle via [data-theme="dark"] on , OR automatic via prefers-color-scheme when the person hasn't set a manual preference (see dark-mode-toggle.js, which sets data-theme="light" explicitly if someone manually picks light while their OS prefers dark). Never pure black — background sits on the same #0F172A used as light-mode text, per the brief. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-primary: #0F172A; --bg-secondary: #16213A; --bg-elevated: #1A2540; --text-primary: #F1F5F9; --text-muted: #94A3B8; --text-inverse: #0F172A; --accent: #3B82F6; --accent-hover: #60A5FA; --accent-subtle: #1E293B; --success: #34D399; --success-subtle: #052E24; --warning: #FBBF24; --warning-subtle: #3A2A0A; --border: #263352; --border-strong: #334063; --shadow-color: 220 40% 2%; } } :root[data-theme="dark"] { --bg-primary: #0F172A; --bg-secondary: #16213A; --bg-elevated: #1A2540; --text-primary: #F1F5F9; --text-muted: #94A3B8; --text-inverse: #0F172A; --accent: #3B82F6; --accent-hover: #60A5FA; --accent-subtle: #1E293B; --success: #34D399; --success-subtle: #052E24; --warning: #FBBF24; --warning-subtle: #3A2A0A; --border: #263352; --border-strong: #334063; --shadow-color: 220 40% 2%; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }