/* =========================================================================== tokens.css — the single source of truth for the visual language. Nothing in this file styles an element. It only names values. Change a value here and it propagates everywhere. Layer 1 of 4: tokens -> base -> components -> pages =========================================================================== */ :root { /* --- Typography families -------------------------------------------- */ --font-display: "Newsreader", "Iowan Old Style", Georgia, serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* --- Fluid type scale ---------------------------------------------- Each step interpolates between a phone and a desktop size, so there are no font-size media queries anywhere else in the codebase. */ --text-2xs: 0.688rem; --text-xs: 0.75rem; --text-sm: 0.844rem; --text-base: clamp(0.938rem, 0.91rem + 0.14vw, 1rem); --text-md: clamp(1rem, 0.96rem + 0.2vw, 1.094rem); --text-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.313rem); --text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --text-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 4rem); --text-4xl: clamp(2.75rem, 1.9rem + 4vw, 5.25rem); --leading-tight: 1.12; --leading-snug: 1.32; --leading-normal: 1.6; --leading-relaxed: 1.78; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* --- Spacing scale (4px base) --------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 7rem; /* Vertical rhythm between major page sections. */ --section-gap: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); /* --- Radii ---------------------------------------------------------- */ --radius-xs: 0.375rem; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-pill: 999px; /* --- Layout --------------------------------------------------------- */ --container: 72rem; --container-prose: 44rem; --header-height: 4.25rem; --border-width: 1px; /* --- Motion --------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 140ms; --duration-base: 240ms; --duration-slow: 620ms; /* --- Elevation ------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.16); --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.35); --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.55); --shadow-accent: 0 18px 44px -22px var(--accent-glow); --z-header: 100; --z-overlay: 200; } /* =========================================================================== Colour themes. Every colour is semantic (--surface, --text-muted) rather than literal (--grey-800). Both themes define the *same* set of names, so components never need to know which theme is active. Dark is the default. `[data-theme]` on is set before first paint by the inline bootstrap in each page's , so there is no theme flash. =========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #08080c; --bg-deep: #05050a; --surface: #101018; --surface-raised: #16161f; --surface-sunken: #0b0b11; --border: rgb(255 255 255 / 0.08); --border-strong: rgb(255 255 255 / 0.16); --text: #f3f3f8; --text-muted: rgb(243 243 248 / 0.64); --text-subtle: rgb(243 243 248 / 0.42); --text-inverted: #08080c; --accent: #928bff; --accent-hover: #a5a0ff; --accent-quiet: rgb(146 139 255 / 0.13); --accent-line: rgb(146 139 255 / 0.32); --accent-glow: rgb(146 139 255 / 0.30); --on-accent: #0a0a12; --positive: #4ade80; --positive-quiet: rgb(74 222 128 / 0.12); --caution: #fbbf24; --caution-quiet: rgb(251 191 36 / 0.12); --info: #60a5fa; --info-quiet: rgb(96 165 250 / 0.12); --critical: #f87171; /* Decorative wash behind the hero. */ --hero-wash: radial-gradient( ellipse 80% 55% at 12% -10%, rgb(146 139 255 / 0.16), transparent 60% ), radial-gradient(ellipse 60% 50% at 92% 0%, rgb(96 165 250 / 0.09), transparent 62%); --rule: linear-gradient(90deg, var(--border-strong), transparent); } :root[data-theme="light"] { color-scheme: light; --bg: #fbfaf8; --bg-deep: #f4f2ee; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f6f5f2; --border: rgb(20 20 32 / 0.10); --border-strong: rgb(20 20 32 / 0.20); --text: #14141c; --text-muted: rgb(20 20 28 / 0.66); --text-subtle: rgb(20 20 28 / 0.46); --text-inverted: #ffffff; --accent: #5a4fd8; --accent-hover: #4a3fc8; --accent-quiet: rgb(90 79 216 / 0.09); --accent-line: rgb(90 79 216 / 0.26); --accent-glow: rgb(90 79 216 / 0.20); --on-accent: #ffffff; --positive: #15803d; --positive-quiet: rgb(21 128 61 / 0.10); --caution: #b45309; --caution-quiet: rgb(180 83 9 / 0.10); --info: #1d4ed8; --info-quiet: rgb(29 78 216 / 0.09); --critical: #dc2626; --shadow-sm: 0 1px 2px rgb(20 20 32 / 0.06); --shadow-md: 0 10px 28px -12px rgb(20 20 32 / 0.16); --shadow-lg: 0 26px 60px -24px rgb(20 20 32 / 0.22); --hero-wash: radial-gradient( ellipse 80% 55% at 12% -10%, rgb(90 79 216 / 0.10), transparent 60% ), radial-gradient(ellipse 60% 50% at 92% 0%, rgb(29 78 216 / 0.06), transparent 62%); --rule: linear-gradient(90deg, var(--border-strong), transparent); }