/* ========================================================================== DESIGN TOKENS The only file that defines raw values. Everything else references these. Themes: dark is the default. `[data-theme]` is stamped on before first paint by the inline script in base.html, so there is no flash. ========================================================================== */ :root { /* ---------- Type families ---------- */ --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---------- Fluid type scale (min → max across 380px → 1440px) ---------- */ --fs-mono: 0.6875rem; /* 11px labels */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --fs-lg: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem); --fs-xl: clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem); --fs-2xl: clamp(2.25rem, 1.6rem + 3.1vw, 4rem); /* Capped so a four-line hero title still clears a 900px viewport. */ --fs-display: clamp(2.75rem, 1.5rem + 5.2vw, 6.25rem); --lh-tight: 0.92; --lh-snug: 1.12; --lh-body: 1.65; --tracking-tight: -0.035em; --tracking-flat: 0; --tracking-wide: 0.16em; /* ---------- Spacing (8pt ramp) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-11: 12rem; --section-y: clamp(5rem, 3rem + 9vw, 11rem); --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem); --maxw: 88rem; --maxw-prose: 46rem; /* ---------- Radii ---------- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* ---------- Motion ---------- */ --dur-fast: 180ms; --dur-mid: 420ms; --dur-slow: 760ms; --dur-xslow: 1200ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* decelerate, default */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-mech: cubic-bezier(0.16, 1, 0.3, 1); /* crisp, mechanical */ --stagger: 55ms; /* ---------- Elevation ---------- */ --z-backdrop: 0; --z-content: 1; --z-nav: 100; --z-scrim: 90; --z-toast: 200; --z-preload: 300; } /* ========================================================================== DARK THEME (default) ========================================================================== */ :root, :root[data-theme='dark'] { color-scheme: dark; --bg: #0b0b0c; --bg-elev: #131315; --bg-elev-2: #1b1b1e; --bg-inset: #08080a; --text: #edebe8; --text-dim: #9a9691; --text-faint: #6a6661; --line: rgb(255 255 255 / 0.10); --line-soft: rgb(255 255 255 / 0.055); --line-loud: rgb(255 255 255 / 0.20); /* accent-ink is the text-safe variant (10.2:1 on --bg). accent-fill is for solid blocks and never carries small text. */ --accent-ink: #e8b37b; --accent-fill: #d8934a; --accent-soft: rgb(216 147 74 / 0.14); --on-accent: #1a1105; --success: #6fcf97; --danger: #ff8a80; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 12px 32px -12px rgb(0 0 0 / 0.7); --shadow-lg: 0 40px 80px -32px rgb(0 0 0 / 0.85); --grid-line: rgb(255 255 255 / 0.028); --noise-opacity: 0.035; } /* ========================================================================== LIGHT THEME ========================================================================== */ :root[data-theme='light'] { color-scheme: light; --bg: #faf9f7; --bg-elev: #ffffff; --bg-elev-2: #f2f0ec; --bg-inset: #eeece7; --text: #17161a; --text-dim: #5c5854; --text-faint: #8c8781; --line: rgb(11 11 12 / 0.12); --line-soft: rgb(11 11 12 / 0.07); --line-loud: rgb(11 11 12 / 0.24); /* 6.4:1 on --bg - passes WCAG AA for body text */ --accent-ink: #8a5220; --accent-fill: #c07a2e; --accent-soft: rgb(192 122 46 / 0.12); --on-accent: #fffaf3; --success: #1e7f4f; --danger: #b3261e; --shadow-sm: 0 1px 2px rgb(23 22 26 / 0.06); --shadow-md: 0 12px 32px -14px rgb(23 22 26 / 0.18); --shadow-lg: 0 40px 80px -36px rgb(23 22 26 / 0.26); --grid-line: rgb(11 11 12 / 0.035); --noise-opacity: 0.02; } /* ========================================================================== SMALL SCREENS The mono label size is fixed rather than fluid, and 11px with wide tracking is uncomfortably small on a phone. Nudge it up, and tighten the tracking so the longer labels still fit on one line. ========================================================================== */ @media (max-width: 620px) { :root { --fs-mono: 0.75rem; --tracking-wide: 0.12em; } } /* ========================================================================== REDUCED MOTION Collapses every duration to near-zero. Elements that animate *in* are given their final state directly in motion.css, never left invisible. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-mid: 1ms; --dur-slow: 1ms; --dur-xslow: 1ms; --stagger: 0ms; } }