/* Design tokens.
 *
 * The palette keeps WaarborgHolland's navy and orange, but splits the orange
 * into two tokens because the brand value cannot carry text:
 *
 *   --signal (#ee5a10) is 3.44:1 on white. That passes SC 1.4.3 for large
 *   text and SC 1.4.11 for graphics, and fails for anything at body size.
 *   That exact mistake is what the 2024 audit flagged.
 *
 *   --link (#a83c05) is the same hue pushed to 6.34:1, and is what text uses.
 *
 * Text on an orange ground is --ink-deep (5.30:1), not --ink (4.19:1, fails).
 *
 * tests/test_contrast.py pins every pair used below. Change a value there and
 * CI tells you which combination broke.
 */

:root {
  /* Ground */
  --paper: #ffffff;
  --surface: #f1f5f8;

  /* Ink */
  --ink: #102560;
  --ink-deep: #00113f;
  --ink-muted: #54607a;

  /* Accent */
  --signal: #ee5a10;
  --link: #a83c05;

  /* The navy laid over the hero photo behind white text. Checked in
   * tests/test_contrast.py against the worst case: this opacity over white. */
  --hero-overlay-alpha: 0.85;

  /* Structure */
  --rule: #78859b;

  /* Focus. Two tones so the ring contrasts against any ground it lands on:
   * the yellow carries dark grounds, the navy edge carries light ones. */
  --focus: #ffd400;
  --focus-contrast: #00113f;

  /* Type. The faces of the live waarborg.nl, self-hosted: Noto Sans for text
   * and headings, Montserrat for the interface - buttons, navigation, the
   * header links. Noto Sans has open apertures and a large x-height, and it
   * covers every Dutch diacritic in the latin subset. */
  --face-display: "Noto Sans", Arial, sans-serif;
  --face-text: "Noto Sans", Arial, sans-serif;
  --face-ui: "Montserrat", "Noto Sans", Arial, sans-serif;

  /* A major-third scale from a 17px body. Text is never set below --size-0:
   * "small print" is a design failure, not a size. */
  --size-0: 1.0625rem;
  --size-1: 1.125rem;
  --size-2: 1.375rem;
  --size-3: 1.75rem;
  --size-4: 2.125rem;
  --size-5: 2.75rem;
  --size-display: clamp(2.25rem, 1.5rem + 3.6vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-body: 1.6;

  /* Two separate limits, and they do different jobs.
   *
   * --measure caps running text at under 75 characters, because a line that
   * spans a wide monitor is genuinely hard to read: the eye loses its place on
   * the return sweep. This one is about legibility and does not change.
   *
   * --page-width caps the page container - header, navigation, card grids,
   * the hero. None of that is running text, so it can use much more of the
   * screen. At 78rem the navigation sat in the middle of a 1920px display
   * with 336px of nothing on either side, which read as a mistake. */
  --measure: 68ch;
  --page-width: 120rem;

  /* Space, on a 4px base. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* SC 2.5.8 Target Size (Minimum) is 24x24. 44px is the comfortable size and
   * what every interactive element here is built to; 24px is the floor for
   * things genuinely constrained, like a link inside a sentence. */
  --target-min: 44px;

  --gutter: var(--space-5);
}