/* Design tokens.
 *
 * The palette keeps WHES's navy and gold, and says out loud what the gold may
 * and may not do:
 *
 *   --signal (#e8b30f) is 1.93:1 on white. It cannot carry text of any size,
 *   and it is too faint to be the only sign of anything on a white ground. It
 *   is a ground: buttons and bands behind navy text (7.48:1), and a bar on the
 *   navy menu. The WordPress theme set its links and the current-page cue in
 *   this gold, on white; that is the mistake this rule exists to stop.
 *
 *   --link (#1f4bb5) is the blue text uses, 7.69:1 on white. Links are
 *   underlined as well, so colour is never what tells them from the text.
 *
 * Text on a gold ground is --ink-deep (8.87:1) or --ink (7.48:1).
 *
 * 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: #081845;
  --ink-muted: #4f5b75;

  /* Accent */
  --signal: #e8b30f;
  --link: #1f4bb5;

  /* 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: #081845;

  /* Type. The faces of the WordPress theme, self-hosted: Noto Sans for text
   * and headings, Montserrat for the interface - buttons, navigation, the
   * header links. Both cover 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. (The WordPress body text
   * is #838f99 on white, 3.3:1, at 16px.) */
  --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. 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. */
  --measure: 68ch;
  --page-width: 90rem;

  /* 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);
}