/* Design tokens. Every colour, font, size, space, radius, rule, easing and duration
   used by site.css and by page.css files. Read DESIGN.md before adding a value. */
/* Fonts, served from this site (no requests to any other company). Both are under the
   SIL Open Font License; the licences sit beside the files in /assets/fonts/. Latin and
   Latin Extended only, split the same way the font service split them. */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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: 'Literata'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/literata-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/literata-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;
}

:root {
  /* ---------- colour: neutrals ---------- */
  --white: oklch(1 0 0);
  --ink: oklch(0.19 0.004 107);            /* near-black text, 17.5:1 on white */
  --ink-hover: oklch(0.32 0.004 107);      /* black pill hover */
  --ink-2: oklch(0.437 0.008 107);         /* grey text, 7.9:1 on white, 6.9:1 on --pale */
  --on-ink: oklch(0.985 0.004 107);        /* text on --ink */
  --on-ink-2: oklch(0.8 0.006 107);        /* grey text on --ink, about 9:1 */
  --pale: oklch(0.959 0.009 107);          /* pale pill, tags, switch track */
  --pale-hover: oklch(0.925 0.01 107);
  --pale-2: oklch(0.981 0.004 107);        /* empty cells, map field, soft fills */
  --rule: oklch(0.9 0.005 107);            /* hairlines between rows */
  --line: oklch(0.64 0.006 107);           /* control borders, 3.4:1 on white */
  --grid: oklch(0.92 0.005 107);           /* map grid lines */

  /* ---------- colour: group stages (each carries --ink at 8:1 or better) ---------- */
  --stage-reports: oklch(0.759 0.121 269.3);  /* periwinkle  #92adfe  ink 8.4:1 */
  --stage-numbers: oklch(0.83 0.145 163);     /* mint        #5be4ac  ink 11.6:1 */
  --stage-finding: oklch(0.783 0.145 221.8);  /* sky blue    #00ccfa  ink 9.7:1 */
  --stage-pricing: oklch(0.894 0.142 91);     /* yellow      #ffd862  ink 13.4:1 */
  --stage-team: oklch(0.779 0.188 336.1);     /* pink        #ff83e4  ink 8.4:1 */
  --stage-offers: oklch(0.77 0.144 44.7);     /* orange      #ff9463  ink 8.5:1 */
  --stage-apps: oklch(0.93 0.014 107);        /* pale neutral #e9e9de ink 15:1 */

  /* The current group colour. Set by a .tone-* class (site.css); defaults to apps. */
  --stage: var(--stage-apps);

  /* ---------- type ---------- */
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;

  --text-xs: 15px;          /* floor: notes, tags, status labels, table headers */
  --text-s: 17px;           /* nav, buttons, field labels, small links */
  --text-body: 19px;        /* body copy (17px on phones) */
  --text-m: 22px;           /* grey row labels, section intros */
  --text-l: clamp(24px, 2.2vw, 30px);       /* step titles, sub-headings, split headings */
  --text-xl: clamp(28px, 2.6vw, 36px);      /* caption titles, catalogue group names */
  --text-section: clamp(34px, 3.4vw, 46px); /* section titles (sans, medium) */
  --text-lede: clamp(22px, 2.1vw, 28px);    /* page-header lede (grey) */
  --text-intro: clamp(24px, 2.6vw, 36px);   /* the home intro paragraph */
  --text-statement: clamp(32px, 4vw, 56px); /* "The clever bit" (serif) */
  --text-title: clamp(42px, 6.4vw, 96px);   /* inner page titles, closing band (serif) */
  --text-hero: clamp(46px, 7.4vw, 112px);   /* home hero (serif) */
  --text-numeral: clamp(64px, 10vw, 152px); /* giant numerals in ruled rows (serif) */
  --text-figure: clamp(36px, 4vw, 48px);    /* big sans figures inside demos */

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-body: 1.55;
  --track-display: -0.035em;
  --track-heading: -0.025em;

  /* ---------- spacing ---------- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;
  --space-5xl: 200px;

  --gutter: 80px;           /* page side padding */
  --page-max: 1440px;
  --bar-h: 72px;            /* top bar height */
  --measure: 34ch;          /* comfortable line length for ledes */
  --panel-moment: 560px;    /* single-moment panel width */
  --panel-bench: 1100px;    /* workbench panel width */
  --control-h: 56px;        /* inputs, steppers */
  --tap: 44px;              /* minimum hit size */

  /* ---------- shape ---------- */
  --radius-s: 6px;          /* inputs, cells, small cards */
  --radius-panel: 8px;      /* white panels */
  --radius-pill: 999px;
  --rule-w: 1px;            /* hairline */
  --line-w: 1.5px;          /* control border */
  --focus-w: 3px;
  --focus-offset: 3px;

  /* ---------- motion (see "Motion" in DESIGN.md) ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* every arrival */
  --ease: ease;
  --dur-fast: 150ms;        /* hovers, feedback */
  --dur: 250ms;             /* ticks, state changes, page cross-fade */
  --dur-slow: 450ms;        /* a result appearing, a card growing into its page */
  --dur-enter: 580ms;       /* hero entrance, reveal on view */
  --stagger: 70ms;          /* step between siblings arriving together */
  --rise: 32px;             /* how far a revealed block travels */
  --ink-from: 0.2;          /* ink fill: a word's opacity before it fills */
  --dur-count: 900ms;       /* counting numerals (set in site.js) */
}

@media (max-width: 900px) {
  :root { --gutter: 32px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; --bar-h: 64px; --text-body: 17px; --text-m: 19px; }
}