/*
 * Design tokens — the single source of truth for the hub's visual language.
 * Rationale and exemplars: docs/design-language-2026-09-28.md
 * Every colour is named by its JOB, not its hue (GOV.UK Design System, /styles/colour/).
 * Ratios are not asserted here; they are computed by test/contrast-check.mjs,
 * whose output is captured in test/evidence/contrast-*.txt.
 */

:root {
  /* ---- Surfaces (3 only; more surfaces = visible fragmentation) ---- */
  --color-page-background: #f5f6f7;   /* the sheet the page sits on */
  --color-surface: #ffffff;           /* cards, panels: anything raised off the page */
  --color-surface-muted: #eceef0;     /* chips, table heads, inset notes */

  /* ---- Text (no token below 4.5:1 on its intended background — by policy) ---- */
  --color-text: #1a1c1e;
  --color-text-secondary: #464b52;
  --color-text-meta: #5b6169;         /* small meta lines; still >=4.5:1 */
  --color-inverse-text: #ffffff;      /* text on accent fills */

  /* ---- Ink: the 2px rules that frame content ---- */
  --color-border: #5f666d;            /* control boundaries, input borders (>=3:1, in scope for 1.4.11) */
  --color-border-decorative: #c9ccd1; /* hairless dividers, card outline: no meaning, exempt 1.4.11 */

  /* ---- One accent hue. Any second hue in this file is a cohesion defect. ---- */
  --color-accent: #0b5f66;            /* primary button fill, emphasis */
  --color-accent-hover: #084b51;
  --color-accent-soft: #dfebeb;       /* accent-tinted chip background */

  /* ---- Links: always underlined; visited stays inside the accent hue ---- */
  --color-link: #0b5f66;
  --color-link-hover: #084b51;
  --color-link-visited: #0a4d52;

  /* ---- Focus: two layers on purpose (W3C technique C40 + GOV.UK focus states) ----
   * Fill contrasts with dark surfaces; the ink ring contrasts with light surfaces,
   * so the indicator survives whatever is behind it, incl. forced-colours mode. */
  --color-focus-fill: #ffcf40;
  --color-focus-ring: #111314;

  /* ---- Status: always paired with a text label, never colour alone (1.4.1) ---- */
  --color-error: #a02b20;
  --color-error-background: #f6e5e2;
  --color-success: #1c6535;
  --color-success-background: #e2efe6;
  --color-warning: #7a4d05;
  --color-warning-background: #f6ebdb;
  --color-info: #0b5f66;              /* info reuses the accent; no extra hue */
  --color-info-background: #dfebeb;

  /* ---- Type scale: 5 named steps, body never steps down on small screens ----
   * Line heights are multiples of 4px so type and spacing share one grid. */
  --font-body: 1.125rem;      /* 18px — same at every breakpoint, deliberately */
  --font-body-line: 1.5556;   /* 28px */
  --font-meta: 0.9375rem;     /* 15px */
  --font-meta-line: 1.3333;   /* 20px */
  --font-heading-s: 1.125rem; /* 18px -> 20px */
  --font-heading-s-line: 1.3333;
  --font-heading-m: 1.375rem; /* 22px -> 32px */
  --font-heading-m-line: 1.4545;
  --font-heading-l: 1.75rem;  /* 28px -> 32px (mobile) */
  --font-heading-l-line: 1.1429;
  --font-display: 2rem;       /* 32px -> 40px (mobile; see the media query below) */
  --font-display-line: 1.25;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* One family for everything (D-019): the system stack, so no font file is
   * downloaded, nothing is licensed, and the reader's own install is respected.
   * A second family would need its own decision entry and its own licence. */
  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
  --text-underline-offset: 0.15em;   /* links are always underlined; this is only air */

  /* ---- Spacing: one 4px grid, 8 steps. No value outside this list. ---- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2rem;      /* 32px */
  --space-6: 3rem;      /* 48px */
  --space-7: 4rem;      /* 64px */
  --space-8: 6rem;      /* 96px */

  /* ---- Layout: mobile-first single column; prose narrower than the page ---- */
  --page-max-width: 96rem;        /* 1536px — raised from 80rem the same day (D-030): at 80rem the third 416 px track could never fit a 1280–1439 px window, so those windows showed two full-width tracks inside capped prose = the reported "barren" wide case. 96rem also caps the grid at 3 columns (a 4th needs a 1736 px band), which is what kills the auto-fill plateau. See docs/responsive-layout-research-2026-09-30.md */
  --prose-max-width: 46rem;       /* ~75 characters at 18px */

  /* ---- Controls: comfortably above the 2.5.8 minimum, near 2.5.5 (AAA) ---- */
  --control-min-height: 2.75rem;  /* 44px */
  --control-min-width: 2.75rem;   /* 44px */
  --border-width-ui: 2px;         /* nothing load-bearing is 1px: anti-aliasing (1.4.11) */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ---- Radius kept small: heavy rounding can make a control undersized for 2.5.8 ---- */
  --radius-card: 8px;
  --radius-control: 6px;
  --radius-chip: 999px;           /* chips are not controls; see the 2.5.8 note */

  /* ---- Motion: durations are short, and all motion is removed on request ---- */
  --motion-fast: 120ms;
  --motion-slow: 200ms;
}

/* Larger screens: display sizes step UP, body size never changes. */
@media (min-width: 40rem) {
  :root {
    --font-display: 2.5rem;      /* 40px */
    --font-display-line: 1.2;    /* 48px */
    --font-heading-l: 2rem;      /* 32px */
    --font-heading-l-line: 1.25; /* 40px */
    --font-heading-m: 1.5rem;    /* 24px */
    --font-heading-m-line: 1.3333; /* 32px */
  }
}

/* Respect the user's motion preference globally; components need no extra work. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-slow: 0ms;
  }
}