/* ============================================================ SJD — Design Tokens Single source of truth for color, type, space, motion. Light + dark themes via [data-theme] on . ============================================================ */ :root { /* ---------- Brand primitives ---------- */ --navy-900: #050b1d; --navy-800: #0a1633; --navy-700: #142147; --navy-600: #1f3370; --royal-500: #2b54a8; --royal-400: #4a78d6; --lavender-300: #b6b9d4; --mist-200: #d5d8dc; --paper-100: #ecedef; --cream-50: #faf8f2; --cream-100: #f3efe3; --gold-700: #6e511a; --gold-600: #8a6620; --gold-500: #b88a2c; --gold-400: #d4a23a; --gold-300: #e8c267; --ink-900: #050b1d; --ink-700: #1c2238; --ink-500: #4a5168; --ink-300: #8b91a8; /* ---------- Semantic — LIGHT (default) ---------- */ --bg: var(--cream-50); --bg-elevated: #ffffff; --bg-sunken: var(--cream-100); --bg-inverse: var(--navy-800); --fg: var(--navy-800); --fg-muted: var(--ink-500); --fg-subtle: var(--ink-300); --fg-inverse: var(--cream-50); --line: #d8d3c4; --line-strong: #b7b09a; --accent: var(--gold-600); /* AA on cream */ --accent-hover: var(--gold-700); --accent-soft: #f3e6c4; --accent-onbg: var(--gold-400); /* decorative on dark */ --focus-ring: var(--royal-500); /* ---------- Type ---------- */ --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-arabic: "Amiri", "Cormorant Garamond", serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-56: 3.5rem; --fs-72: 4.5rem; --fs-88: 5.5rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; --tracking-wide: 0.18em; --tracking-eyebrow: 0.22em; /* ---------- Space (4pt) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; /* ---------- Radii ---------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px; /* ---------- Shadows ---------- */ --shadow-1: 0 1px 2px rgba(10, 22, 51, .06), 0 1px 1px rgba(10, 22, 51, .04); --shadow-2: 0 4px 16px rgba(10, 22, 51, .08), 0 1px 2px rgba(10, 22, 51, .05); --shadow-3: 0 18px 48px rgba(10, 22, 51, .14), 0 4px 12px rgba(10, 22, 51, .06); /* ---------- Layout ---------- */ --container: 1180px; --container-narrow: 760px; --gutter: clamp(20px, 4vw, 48px); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(.2,.7,.2,1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ---------- Semantic — DARK ---------- */ :root[data-theme="dark"] { --bg: var(--navy-900); --bg-elevated: #0c1730; --bg-sunken: #030817; --bg-inverse: var(--cream-50); --fg: #f0ebda; --fg-muted: #b6b9c8; --fg-subtle: #7c8499; --fg-inverse: var(--navy-800); --line: #1a2647; --line-strong: #2a3a66; --accent: var(--gold-400); /* AA on navy */ --accent-hover: var(--gold-300); --accent-soft: #2a2010; --accent-onbg: var(--gold-400); --focus-ring: var(--gold-300); --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 6px 24px rgba(0, 0, 0, .5); --shadow-3: 0 24px 60px rgba(0, 0, 0, .6); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: var(--navy-900); --bg-elevated: #0c1730; --bg-sunken: #030817; --bg-inverse: var(--cream-50); --fg: #f0ebda; --fg-muted: #b6b9c8; --fg-subtle: #7c8499; --fg-inverse: var(--navy-800); --line: #1a2647; --line-strong: #2a3a66; --accent: var(--gold-400); --accent-hover: var(--gold-300); --accent-soft: #2a2010; --focus-ring: var(--gold-300); } }