/* TED5 design tokens — mirrors docs/tokens.json and the TED5 design system.
   Change values here and in tokens.json together. */
:root {
  /* Colour — surfaces */
  --paper: #f6f2ea;          /* page background, warm off-white */
  --paper-raised: #fffdf8;   /* cards, form fields, panels */
  --sand: #ece5d6;           /* alternating section band, subtle fills */
  /* Colour — text and lines */
  --ink: #1c1b19;            /* body and headings; 15.4:1 on paper */
  --ink-muted: #57534b;      /* secondary text; 6.8:1 on paper, 6.1:1 on sand */
  --line: #d9d1c1;           /* decorative hairlines and card borders (not meaning-bearing) */
  --line-strong: #837c70;    /* form-control borders; 3.7:1 on paper */
  /* Colour — accent */
  --cobalt: #2347e8;         /* the one accent: CTAs, links, focus; 6.0:1 on paper */
  --cobalt-hover: #1a34b3;   /* pressed/hover accent */
  --cobalt-tint: #e4e9fd;    /* accent wash behind selected chips and approval markers */
  --on-cobalt: #ffffff;      /* text on cobalt fills; 6.7:1 */
  --cobalt-on-ink: #9db0ff;  /* accent on the ink panel; 8.3:1 */
  /* Colour — lifecycle status (always paired with a word and a shape) */
  --status-available-ink: #1d6534;
  --status-available-bg: #e1efe3;
  --status-pilot-ink: #865400;
  --status-pilot-bg: #f8ecd3;
  --status-soon-ink: #57534b;
  --status-soon-bg: #ebe6dc;
  /* Colour — feedback */
  --danger: #b02a1f;
  --danger-bg: #fbe9e6;
  --success: #1d6534;
  --success-bg: #e1efe3;
  --caution-ink: #865400;
  --caution-bg: #f8ecd3;
  --focus: #2347e8;

  /* Type */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.8125rem;   /* 13px labels */
  --text-sm: 0.9375rem;   /* 15px small body */
  --text-md: 1.0625rem;   /* 17px body */
  --text-lg: 1.25rem;     /* 20px lead */
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);    /* 24–30 h3 */
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);         /* 32–48 h2 */
  --text-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* 40–72 h1 */

  /* Space (4px base) */
  --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: 96px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px;
  --border-control: 1.5px;
  --border-focus: 3px;

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
  --measure: 64ch;
  --header-h: 68px;
}
/* Breakpoints (CSS can't use variables in media queries — use these literals):
   --bp-sm: 600px  --bp-md: 900px  --bp-lg: 1200px */
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --gutter: 32px; --header-h: 76px; } }