/* Design tokens: colour, type scale, spacing, radii.
   Contrast notes (WCAG 2.2 AA) are next to every colour used for text or UI. */

/* Metric-matched fallbacks, used while the Google Fonts load (they don't block
   first paint), so the swap barely moves the layout. Values measured against
   Arial: Outfit 700 / Public Sans 400 widths and ascent/descent. */
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial");
  font-display: swap; /* never hide text while the local() lookup runs */
  size-adjust: 96%;
  ascent-override: 104%;
  descent-override: 27%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial");
  font-display: swap;
  size-adjust: 103.5%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* Colour: four core colours + white --------------------------------------
     Never put crimson and Circle blue against each other (1.04:1): separate
     them with white or navy. No red text on blue/navy, no blue text on navy. */
  --navy: #0b2551;             /* text, hero, dark blocks, footer. On white 15.0:1, ice 13.2:1 */
  --blue: #1f5bb8;             /* links, icons, ring motif, secondary buttons. On white 6.5:1, ice 5.7:1; on navy only 2.3:1 */
  --ice: #eaf1fb;              /* alternating sections, cards on white */
  --crimson: #c1121f;          /* Register CTA, blood drop, one highlighted word. Nothing else. White text 6.2:1, on ice 5.5:1 */
  --white: #ffffff;            /* page background, cards, text on navy/blue/crimson */

  /* Derived shades: states only, never new decorative colours */
  --blue-hover: #174a96;       /* hover/active of blue buttons and links. White text 8.6:1 */
  --crimson-hover: #9e0e19;    /* hover/active of the red CTA. White text 8.3:1 */
  --muted: #4a5a78;            /* secondary text: on white 6.9:1, ice 6.1:1 */
  --on-navy-muted: #b9c8e6;    /* secondary text on navy 8.9:1 (only 3.8:1 on blue: use white there) */
  --on-navy-link: #7fa6e6;     /* links and the ring motif on navy 6.1:1 */
  --line: #c9d8ef;             /* dividers and card borders, decorative only */
  --line-strong: #6b7a99;      /* form field borders: 4.3:1 on white, 3.8:1 on ice */
  --on-navy-line: rgb(255 255 255 / 0.15); /* dividers on navy and blue */
  --hero-scrim: rgb(11 37 81 / 0.72); /* navy over the hero photo. Even over pure white: white 6.2:1, on-navy-muted 3.7:1 (large text only), on-navy-link 2.5:1 (not for text there) */
  --error: var(--crimson);     /* form errors only, always with alert icon + text + 2px border */

  /* Type ------------------------------------------------------------------ */
  --font-display: "Outfit", "Outfit Fallback", system-ui, sans-serif;
  --font-body: "Public Sans", "Public Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.9rem, 1.7rem + 4.4vw, 5.25rem);
  --fs-h2: clamp(2.1rem, 1.6rem + 1.9vw, 3.25rem);
  --fs-h3: 1.4375rem;    /* 23px */
  --fs-h4: 1.125rem;     /* 18px */
  --fs-sub: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  --fs-lead: 1.25rem;    /* 20px */
  --fs-body: 1.0625rem;  /* 17px */
  --fs-small: 0.9375rem; /* 15px */
  --fs-meta: 0.875rem;   /* 14px */

  /* Spacing --------------------------------------------------------------- */
  --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: 80px;

  --container: 1200px;
  --gutter: 24px;
  --section-y: clamp(72px, 3.5rem + 4vw, 112px);
  --band-y: 72px;
  --sub-gap: clamp(72px, 3.5rem + 4vw, 112px);
  --header-h: 72px;

  /* Radii & elevation ----------------------------------------------------- */
  --radius-sm: 6px;
  --radius-btn: 10px;
  --radius-md: 12px;
  --radius-card: 20px;
  --radius-band: 24px;
  --shadow-card: 0 1px 2px rgb(11 37 81 / 0.06), 0 18px 40px -22px rgb(11 37 81 / 0.28);

  /* Focus ring and heading colour; dark surfaces switch them via .on-dark */
  --focus: var(--blue);
  --heading: var(--navy);
}