/* ============================================================================ tokens.css — Design system for the static landing kit. ---------------------------------------------------------------------------- Single source of truth for color, type, spacing, radius, motion. Every section reads these variables; NOTHING hardcodes a hex. To rebrand the whole site, change the active theme class on (e.g. ) or edit one theme block below. ⛔️ NO "AI-default" purple→blue gradient (#7C3AED→#2563EB and relatives). See DESIGN.md for why and how to pick a topic-grounded palette instead. Color tokens are stored as SPACE-SEPARATED RGB CHANNELS so you can apply alpha anywhere with: rgb(var(--c-accent) / 0.2) ============================================================================ */ :root { /* ---- Type ---- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.94rem); --step-0: clamp(1rem, 0.93rem + 0.3vw, 1.15rem); --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); --step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem); --step-3: clamp(2.1rem, 1.6rem + 2.2vw, 3.5rem); --step-4: clamp(2.7rem, 1.9rem + 3.6vw, 5.5rem); --step-5: clamp(3.2rem, 2rem + 6vw, 8rem); /* ---- Spacing scale ---- */ --space-xs: clamp(0.75rem, 0.7rem + 0.3vw, 1rem); --space-s: clamp(1rem, 0.9rem + 0.6vw, 1.5rem); --space-m: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); --space-l: clamp(3rem, 2.3rem + 3vw, 5rem); --space-xl: clamp(5rem, 3.5rem + 6vw, 9rem); /* ---- Layout ---- */ --container: 1200px; --container-narrow: 760px; --gutter: clamp(1.25rem, 4vw, 3rem); /* ---- Radius ---- */ --radius-s: 8px; --radius-m: 16px; --radius-l: 28px; --radius-pill: 999px; /* ---- Motion ---- */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --dur-fast: 0.25s; --dur-med: 0.6s; --dur-slow: 1s; /* ---- Shadows ---- */ --shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 6px rgb(0 0 0 / 0.05); --shadow-m: 0 8px 30px rgb(0 0 0 / 0.10); --shadow-l: 0 30px 60px rgb(0 0 0 / 0.16); } /* ============================================================================ THEMES — apply ONE class to . Each sets the full token set. Pick the one that fits the project's topic. None is purple/blue by default. ============================================================================ */ /* 1. INK & LIME — editorial near-black, citrus pop. Agencies, dev tools, B2B SaaS, portfolios. */ .theme-ink { --c-bg: 250 250 248; --c-surface: 255 255 255; --c-ink: 18 18 18; --c-muted: 110 110 110; --c-line: 228 228 224; --c-brand: 18 18 18; --c-brand-2: 64 64 64; --c-accent: 198 255 0; /* lime */ --c-on-brand: 250 250 248; --c-on-accent: 18 18 18; } /* 2. WARM CLAY — terracotta + sand, organic and human. Wellness, hospitality, food, lifestyle, sustainability. */ .theme-clay { --c-bg: 252 248 243; --c-surface: 255 255 255; --c-ink: 42 32 24; --c-muted: 122 106 95; --c-line: 233 222 211; --c-brand: 184 80 66; /* terracotta */ --c-brand-2: 167 118 90; --c-accent: 217 119 67; /* amber */ --c-on-brand: 252 248 243; --c-on-accent: 42 32 24; } /* 3. DEEP TEAL — premium dark-first, oceanic. Fintech, climate, health, data, premium products. */ .theme-teal { --c-bg: 6 28 33; --c-surface: 11 41 48; --c-ink: 233 244 243; --c-muted: 150 178 178; --c-line: 28 64 71; --c-brand: 2 128 144; /* teal */ --c-brand-2: 0 168 150; --c-accent: 2 195 154; /* mint */ --c-on-brand: 5 18 21; --c-on-accent: 5 18 21; } /* 4. MONO PAPER — near-monochrome, single ember accent. Swiss/editorial. News, writing, luxury minimal, design studios. */ .theme-paper { --c-bg: 255 255 255; --c-surface: 248 248 246; --c-ink: 17 17 17; --c-muted: 107 107 107; --c-line: 228 228 228; --c-brand: 17 17 17; --c-brand-2: 75 75 75; --c-accent: 224 78 57; /* ember */ --c-on-brand: 255 255 255; --c-on-accent: 255 255 255; } /* Default theme if none specified on */ :root:not([class*="theme-"]) { --c-bg: 250 250 248; --c-surface: 255 255 255; --c-ink: 18 18 18; --c-muted: 110 110 110; --c-line: 228 228 224; --c-brand: 18 18 18; --c-brand-2: 64 64 64; --c-accent: 198 255 0; --c-on-brand: 250 250 248; --c-on-accent: 18 18 18; }