/* ============================================================ Anna Kemp — WEBSITE DESIGN SYSTEM 01 / tokens.css — the only file allowed to declare a raw value. ------------------------------------------------------------ Website layer only. Social and print tokens live in their own systems and must never be imported here: a web tint disappears in a compressed feed, and a screen colour is not a press colour. Rule: no component, page or template declares a hex, px space value, font stack or duration. Everything reads a custom property from this file. ============================================================ */ :root { /* ---------- 1. Surfaces ---------- Six only. Never more than two background colours in one page beyond page + surface. */ --color-page: #F7F4EF; /* default body */ --color-surface: #FFFFFF; /* cards, white sections */ --color-surface-soft: #FBF9F5; /* one step off page, for banded sections */ --color-surface-sand: #EDE6DB; /* warm emphasis panel — guide, letters */ --color-surface-mint: #DCE7E1; /* values / beliefs panel */ --color-surface-dark: #16232A; /* footer alt, guide cover */ /* Object-specific surfaces. These were raw values inside components.css until 2026-08-24, which broke the no-raw-values rule in the file that enforces it. */ --color-cover-sheet: #DCD3C4; /* the paper sheet behind the guide cover */ --color-mock-stage: #1D2D35; /* product-mock stage */ --color-mock-device: #0D171C; /* product-mock device shell */ --color-mock-chip: #E5E0D6; /* inactive filter chip inside the mock */ --color-header-veil: rgba(247, 244, 239, .88); /* sticky header over page */ /* ---------- 2. Text ---------- Always measure against the actual surface. The -on-sand and -on-mint values exist because --color-text-quiet drops to 4.1:1 on those two backgrounds. */ --color-text-primary: #16232A; --color-text-secondary: #3D4E55; --color-text-muted: #5A6B72; --color-text-body: #4A5B62; /* lead paragraphs on page/sand */ --color-text-quiet: #617076; /* AA on --color-page and --color-surface ONLY */ --color-text-inverse: #FFFFFF; --color-text-on-sand: #5A5041; --color-text-on-sand-quiet: #6B5F4C; --color-text-on-mint: #3F5A55; --color-text-on-dark: rgba(255, 255, 255, .85); /* was .72 — 3.93:1 on --color-brand; .85 clears both grounds */ --color-text-descriptor: #586A70; /* wordmark descriptor */ /* ---------- 3. Brand action — Anna ---------- Anna owns every text, button and link colour on the site. */ --color-brand: #2E6E6A; --color-brand-hover: #245653; --color-brand-soft: #DCE7E1; /* primary button on dark sections */ --color-brand-on-dark: #9FC0BA; /* eyebrows and tertiary links on dark */ --color-brand-quiet: rgba(46, 110, 106, .5); /* timeline numerals */ /* ---------- 4. Termly-linked ---------- Amended 2026-08-24. The tint plate and tint circle remain decorative-only as before. In ADDITION, the single Termly band (`.surface-termly`) is now a co-branded panel carrying Termly's own ground, its lockup and its on-blue text colours. Scope is that one section: nowhere else on the site may use these. Values are canonical, from the Termly brand foundations — parents theme. Anna's typefaces are kept throughout. --color-termly-teal was #0E7A88, which was not a Termly colour. Termly's teal is #007A8B. Corrected. */ --color-termly-teal: #007A8B; /* accent; readable as text on white only */ --color-termly-blue: #0F465B; /* the parents-theme ground */ --color-termly-navy: #10293A; /* Termly's "black"; text on bright fills */ --color-termly-mint: #4BB78F; /* parents CTA fill — navy text, never white */ --color-termly-mustard: #F1BD76; /* emphasis on the blue ground */ /* Text measured against --color-termly-blue, from Termly's own documented pairings. Teal and navy both fail on this ground. */ --color-text-on-termly: #FFFFFF; --color-text-on-termly-quiet: #99B2BF; --color-label-on-termly: #C8D7E1; --color-tint-mint: #C9E6DA; --color-tint-teal: #CFE3E6; --color-tint-mustard: #F0DFBF; --color-tint-coral: #F9DCD2; --color-tint-sage: #CFE7DA; /* hero diamond */ /* Decor circles — the only soft shapes on the site. Each bleeds off a section edge; none floats mid-layout. */ --color-decor-teal: #E8F1F2; --color-decor-sage: #EFF3F1; --color-decor-mint: #F2F6F5; --color-decor-coral: #F6EDE7; --color-decor-on-brand: rgba(255, 255, 255, .07); --color-decor-on-mint: rgba(255, 255, 255, .42); /* ---------- 5. Lines and states ---------- */ --color-border: rgba(22, 35, 42, .12); --color-border-soft: rgba(22, 35, 42, .08); --color-border-strong: rgba(22, 35, 42, .28); /* .52 not .22 — an input's boundary is how you know where to type, so WCAG 1.4.11 applies to it (3:1). At .22 it measured 1.57:1 on white. */ --color-border-input: rgba(22, 35, 42, .52); --color-border-on-dark: rgba(255, 255, 255, .40); --color-rule-open: #16232A; /* 1.5px section-opening rule */ --color-focus: #2E6E6A; --color-focus-ring: rgba(46, 110, 106, .35); --color-error: #A6402F; --color-success: #2E6E6A; --color-disabled-bg: #C3CDCC; --color-disabled-text: #465257; /* was #5F6E74 — 3.26:1 on --color-disabled-bg */ /* ---------- 6. Space — 4px base, eleven steps ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 96px; --space-11: 128px; /* ---------- 7. Radius ---------- Square is the default. Blocks, bands and photographs are never rounded — the pill and the diamond are the only soft shapes. */ --radius-none: 0; --radius-sm: 4px; /* inputs */ --radius-md: 10px; /* product-UI tiles inside the mock */ --radius-lg: 28px; /* device stage */ --radius-pill: 100px; /* buttons and chips only */ --radius-circle: 50%; /* decor circles */ --radius-diamond: 34%; /* + rotate(45deg) — Termly motif plate */ /* ---------- 8. Depth ---------- Only objects that physically float. No card ever lifts. */ --shadow-card: 0 1px 3px rgba(22, 35, 42, .06); --shadow-paper: 0 1px 2px rgba(22, 35, 42, .10); --shadow-float: 0 18px 40px -18px rgba(22, 35, 42, .45); --shadow-stage: 0 26px 50px -22px rgba(0, 0, 0, .60); /* ---------- 9. Layout ---------- */ --content-max: 1240px; --content-reading: 68ch; --measure: 62ch; /* body copy: 55–65 characters */ --measure-tight: 46ch; /* italic asides */ --measure-quote: 30ch; --gutter: clamp(20px, 4vw, 48px); --header-height: 72px; --scroll-offset: 80px; /* scroll-margin-top under the sticky header */ --section-y: clamp(52px, 6.5vw, 96px); --section-y-compact: clamp(40px, 5vw, 68px); --section-y-large: clamp(60px, 8vw, 116px); --section-head-gap: clamp(30px, 3.6vw, 46px); /* ---------- 10. Type ---------- Two families. Newsreader 200–400 for anything display or serif-voiced; Karla 400–600 for UI, body and labels. Nothing else, ever. */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-ui: 'Karla', system-ui, -apple-system, sans-serif; --type-display-xl: clamp(2.45rem, 5.1vw, 4.15rem); /* h1, homepage hero */ --type-display-lg: clamp(2rem, 4vw, 3.1rem); /* h1, inner pages */ --type-h2: clamp(1.9rem, 3.4vw, 2.7rem); --type-h2-sm: clamp(1.7rem, 2.9vw, 2.3rem); /* band headings */ --type-h3: clamp(20px, 1.9vw, 23px); --type-h3-card: clamp(19px, 1.7vw, 22px); --type-h4: 15px; --type-lead: clamp(16.5px, 1.2vw, 18px); --type-body-lg: 16.5px; --type-body: 15.5px; --type-body-sm: 14.5px; --type-label: 13px; --type-eyebrow: 12px; --type-caption: 12px; --type-quote: clamp(1.6rem, 3.4vw, 2.6rem); --type-numeral: clamp(50px, 5.6vw, 66px); /* stat block */ --type-step: clamp(30px, 3.4vw, 40px); /* timeline numeral */ --leading-display: 1.04; --leading-heading: 1.15; --leading-title: 1.25; --leading-body: 1.68; --leading-loose: 1.7; --tracking-display: -.022em; --tracking-heading: -.02em; --tracking-title: -.012em; --tracking-eyebrow: .2em; --tracking-label: .16em; /* ---------- 11. Motion — one gesture, site-wide ---------- 8px rise with a 450ms fade as a block enters. No parallax, no scroll-driven scale, no stagger. Hover moves nothing more than 2px. All of it off under prefers-reduced-motion. */ --reveal-distance: 8px; --reveal-duration: 450ms; --reveal-ease: cubic-bezier(.2, .7, .2, 1); --hover-duration: 250ms; --hover-shift: 2px; /* ---------- 12. Z-index ---------- */ --z-decor: 0; --z-body: 1; --z-header: 50; --z-drawer: 60; /* Added 2026-09-08 for ConsentBar. It has to sit above the sticky header, because at the foot of a short page the two can meet. Nothing sits above it — there are no modals on this site. */ --z-consent: 70; } /* ============================================================ Breakpoints — declared here for reference, applied in components.css. There are four and only four. mobile 320–599 single column, 20px gutter, full-width buttons, 44px minimum touch target, hero stacked tablet 600–899 a designed two-up, not a squeezed desktop desktop 900–1279 full composition, sticky story heading engages wide 1280+ content caps at 1240px, intent grid goes 4-up, type stops growing ============================================================ */