/* Design tokens: the only place a colour, size or font is defined. Every
   other stylesheet uses var(--token), which scripts/check.mjs enforces. */
:root {
  /* Colour */
  --green-700: #0B5D3B;      /* links, savings text, badges */
  --green-900: #074229;      /* hover and pressed */
  --green-50: #E2F0E6;       /* savings chips */
  --green-25: #EEF6F0;       /* selected toggles */
  --orange: #C8721D;         /* logo centre only, never text */
  --ink: #1A1A1A;            /* main text, prices */
  --ink-2: #3D3D3D;          /* secondary text */
  --ink-3: #595959;          /* captions, meta */
  --stone: #F7F5EF;          /* page background */
  --surface: #FFFFFF;        /* cards, header, inputs */
  --table-head: #F4F4F1;
  --line: #D6D6D6;           /* card borders, dividers */
  --line-soft: #E4E4E0;      /* table row dividers */
  --line-strong: #8C8C8C;    /* inputs, selects */
  --warn-bg: #FCEBD5;
  --warn: #7A4100;
  --error: #9B1C1C;
  --error-bg: #FBEAEA;

  /* Type */
  --font: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --text-h1: 40px;
  --text-h1-small: 30px;
  --text-h2-section: 28px;
  --text-h3: 20px;
  --text-lead: 18px;
  --text-price-lg: 52px;
  --text-price-lg-small: 44px;
  --text-price: 28px;
  --text-total: 22px;
  --text-body: 17px;
  --text-control: 16px;
  --text-small: 15px;
  --text-caption: 14px;
  --leading-body: 1.5;
  --leading-heading: 1.15;
  --leading-tight: 1.3;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Sizing */
  --page-max: 1120px;
  --prose-max: 760px;
  --form-max: 480px;
  --tile-h: 52px;
  --check-size: 22px;
  --gutter: 24px;
  --touch-min: 44px;
  --input-h: 48px;
  --focus-ring: 3px solid var(--green-700);
  --focus-offset: 2px;
}

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
a { color: var(--green-700); }
a:hover { color: var(--green-900); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.price { font-weight: 700; font-variant-numeric: tabular-nums; }