/* ============================================================ INTEGRATED GROWTH — Design Tokens · v6 (September 2026) Terracotta is the feature colour. Grounds are neutral. Source of truth: brand-system.md VARIABLES ONLY. No element or class rules live here, so this file is safe to link into a page that already has its own CSS. colors_and_type.css imports it — values are defined once. Fonts: Satoshi 400/500/600 loads per page from Fontshare. To self-host, add an @font-face here pointing at the TTFs and drop the Fontshare link tags from the page heads. Dark mode lives in dark.css, imported by colors_and_type.css. A page that links tokens.css on its own stays light-only. ============================================================ */ :root{ /* ---------- Feature colour (phrase + object scale only, never a ground) ---------- */ --brand: #8B4513; --brand-hover: #75390F; --brand-dim: rgba(139, 69, 19, 0.07); --brand-border: rgba(139, 69, 19, 0.18); --brand-lift: #D98E5F; /* terracotta lifted for slate · 5.60:1 */ /* ---------- Grounds (neutral) ---------- */ --bg: #F3F0EB; /* cream · default ground */ --surface: #FAF9F6; /* cards and raised panels only · never a band */ --surface-2: #EAE6DF; /* inputs, wells, recessed areas */ --band: #E6E1D8; /* soft section recess · groups */ --slate: #1B2A33; /* the structural dark ground · a full stop */ /* ---------- Type on slate ---------- */ --on-slate: #F3F0EB; /* headings · 12.96:1 */ --on-slate-body: #DDD8D1; /* body · 10.39:1 */ --on-slate-mut: #A8A199; /* muted · 5.77:1 */ --on-slate-sub: #837C74; /* subtle · 3.58:1 large only */ --on-slate-border: rgba(255, 255, 255, 0.08); /* Raised steps on slate. Extension to v6: the shipped package has --surface / --surface-2 for cream only, and the dark-ground pages need the same two steps. Measured against --slate: --slate-surface on-slate 11.48:1 · body 9.21:1 · mut 5.11:1 --slate-surface-2 on-slate 9.94:1 · body 7.97:1 · mut 4.42:1 Use --on-slate-body, not --on-slate-mut, for small text on --slate-surface-2. */ --slate-surface: #22333D; /* cards and raised panels on slate */ --slate-surface-2: #2A3D48; /* inputs, wells, recessed areas on slate */ /* Feature colour and danger, lifted for slate. --brand-lift ships with v6; the hover and tint steps beside it are ours, matched to it. */ --brand-lift-hover: #E4A57D; /* the hover v6 hardcodes in .on-slate a:hover */ --brand-lift-dim: rgba(217, 142, 95, 0.10); --brand-lift-border: rgba(217, 142, 95, 0.22); --danger-lift: #F97066; /* --danger is 2.24:1 on slate; this is 5.29:1 */ /* ---------- Text ---------- */ --text: #1A1A1A; /* headings, primary */ --body: #4A4744; /* body copy · 8.12:1 */ --muted: #6E6862; /* secondary · 4.84:1 */ --subtle: #8A8580; /* tertiary · 3.22:1 · 24px+ or decorative only */ /* ---------- Border ---------- */ --border: rgba(60, 45, 35, 0.10); /* ---------- Danger (deeper and cooler than the brand) ---------- */ --danger: #B42318; --danger-dim: rgba(180, 35, 24, 0.06); --danger-border: rgba(180, 35, 24, 0.18); /* ---------- Type family · 400 / 500 / 600 only ---------- */ --font: Satoshi, -apple-system, "system-ui", "Helvetica Neue", Arial, sans-serif; /* ---------- Type scale · Major Third 1.250 from 20px, snapped to 8px ---------- */ --text-micro: 13px; /* @kind font */ --text-xs: 14px; /* @kind font */ --text-sm: 16px; /* @kind font */ --text-base: 20px; /* @kind font */ --text-lead: 24px; /* @kind font */ --text-btn: 18px; /* @kind font */ --text-card: 24px; /* @kind font */ --text-h3: 32px; /* @kind font */ --text-h2: 40px; /* @kind font */ --text-h1: 64px; /* @kind font */ --lh-micro: 16px; /* @kind font */ --lh-xs: 20px; /* @kind font */ --lh-sm: 24px; /* @kind font */ --lh-base: 32px; /* @kind font */ --lh-lead: 36px; /* @kind font */ --lh-btn: 28px; /* @kind font */ --lh-card: 32px; /* @kind font */ --lh-h3: 40px; /* @kind font */ --lh-h2: 48px; /* @kind font */ --lh-h1: 72px; /* @kind font */ /* ---------- Tracking ---------- */ --track-label: 0.04em; /* @kind font */ --track-h1: -0.02em; /* @kind font */ --track-h2: -0.01em; /* @kind font */ /* ---------- Layout ---------- */ --container: 1280px; --container-pad: 80px; --measure: 680px; /* prose column max · ~70ch at 20px */ --measure-narrow: 540px; /* sub-headings, intros */ /* ---------- Spacing · 8px grid ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-30: 120px; /* ---------- Radii · sharp reads engineered ---------- */ --radius-sm: 4px; /* buttons, inputs, tags, avatars */ --radius-md: 8px; /* cards, modals, nav bar */ --radius-lg: 12px; /* large cards, sections */ /* ---------- Shadows · warmed, with the 1px ring ---------- */ --shadow-card: 0 2px 8px rgba(60,45,35,0.07), 0 0 0 1px rgba(60,45,35,0.04); --shadow-lift: 0 8px 32px rgba(60,45,35,0.10), 0 0 0 1px rgba(60,45,35,0.05); --shadow-btn: 0 2px 12px rgba(139,69,19,0.22); --shadow-btn-h: 0 2px 12px rgba(139,69,19,0.30); --shadow-nav: 0 6px 16px rgba(60,45,35,0.06); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); /* ---------- Motion · functional only ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 150ms; /* @kind other */ --dur-normal: 250ms; /* @kind other */ --dur-slow: 400ms; /* @kind other */ --dur-reveal: 700ms; /* @kind other */ }