/* ============================================================ DESIGN TOKENS — the single place brand values live. Values below come from the official think(auto) brand kit, kept in the repo at source/brand-kit/README.txt (workshop material; not shipped): Ink #0F172A · Blue #2563EB · Manrope (700 wordmark / 500 text) Every other stylesheet reads from these variables. Each page links this file in its before styles.css; styles.css does not @import it. ============================================================ */ /* ---------- Manrope, self-hosted (no Google Fonts request) ---------- Variable font: one file covers weights 200–800, so all four weights the site uses (500/600/700/800) come from a single download. Files: assets/fonts/ · Licence: SIL OFL 1.1, see assets/fonts/OFL.txt Split by unicode-range so the 15 KB latin-ext file only downloads when a page actually uses those characters. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Brand color: one vivid blue accent (from the think(auto) logo) --- */ --color-primary: #2563eb; /* brand blue — used mainly on CTAs, links, accents */ --color-primary-dark: #1749c9; /* hover/active */ --color-primary-soft: #eef3ff; /* faint blue wash for backgrounds/borders */ /* --- Ink & neutrals --- */ --color-ink: #0f172a; /* brand ink (the "think" wordmark) — headings, dark UI */ --color-ink-soft: #1c2740; /* one step up from ink — cards on dark sections */ --color-text: #3f4650; /* body text */ --color-text-muted: #6b7280; /* secondary text */ --color-bg: #ffffff; /* page background */ --color-bg-alt: #f8fafc; /* alternating section background */ --color-bg-dark: #0f172a; /* dark sections + footer */ --color-border: #e5e8ee; --color-border-strong: #cbd3e0; /* form fields on hover: one step darker than the resting border */ --color-border-dark: rgba(255,255,255,.12); /* --- Status: form feedback only. Deliberately outside the brand palette — these carry meaning, not identity, so they must not read as accent blue. Both text values clear 4.5:1 on their own soft background. --- */ --color-success: #15803d; --color-success-soft: #f0fdf4; --color-error: #b91c1c; --color-error-soft: #fef2f2; /* --- Typography: Manrope, the brand typeface (single family) --- */ --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* Utility face for the code-like signature lines. The brand mark is itself a function call, so these read as the brand's own vernacular. */ --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace; /* Fluid type scale. Each step has one job — pick by role, not by eye, so headings of the same rank stay the same size across sections. 4xl hero h1 (once per page) 3xl section title (every h2) + legal/404 page title 2xl case-study title xl sub-heading inside a block (contact panels, legal h2) lg lead paragraph + card headings base prose in the text sections (About, Founder, legal) sm supporting copy inside cards, grids and the footer xs micro-labels, chips, tags The three display steps stay clear of each other at every width: at 1440px they land at 49.6 / 40 / 30.4 px. */ --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --text-2xl: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem); --text-3xl: clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem); --text-4xl: clamp(2.15rem, 1.5rem + 2.6vw, 3.1rem); /* Weights (Manrope: 500 supporting text, 700/800 display) */ --fw-body: 500; --fw-med: 600; --fw-bold: 700; --fw-black: 800; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 7rem; /* Layout */ --content-max: 74rem; --radius: 0.6rem; --radius-lg: 1.1rem; /* Effects */ --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 10px 30px -12px rgba(15,23,42,.18); --shadow-lg: 0 24px 60px -20px rgba(15,23,42,.28); --ring: 0 0 0 3px rgba(37,99,235,.35); --transition: 200ms cubic-bezier(.4, 0, .2, 1); }