/* Design tokens. Colours are named by role; component CSS uses these, never literal colours. */
:root {
  --navy: #1b2d45;          /* bands: header, "how it works", final call to action */
  --navy-deep: #0f1d31;     /* controls sitting on navy */
  --navy-line: #45597a;     /* borders on navy */
  --night: #0b0f19;         /* the footer */

  --ground: #f3f8ff;        /* the page */
  --surface: #ffffff;       /* cards */
  --surface-tint: #e8eef7;  /* wells, tracks, inactive chips */
  --line: #dde5f0;

  --text: #1b2d45;
  --text-body: #34465f;
  --text-muted: #4a5d78;

  --on-navy: #ffffff;
  --on-navy-body: #d5deeb;
  --on-navy-muted: #c9d4e4;
  --on-navy-eyebrow: #b9c8ff;
  --on-night: #c3cede;
  --on-night-muted: #8d9bb2;

  --action: #d1293a;        /* primary buttons; white text passes AA */
  --action-hover: #b31f2f;
  --on-action: #ffffff;
  --accent: #ff6b76;        /* coral details on navy: step numbers, the mark's frame */
  --violet: #5b3fd6;        /* IGR, eyebrows on light grounds */
  --violet-ink: #3a2aa8;    /* links in long text */
  --violet-soft: #f4f1fb;
  --pitch: #17734a;         /* pitch green: bands, the lead feature; white text passes AA */
  --pitch-deep: #0f5536;
  --pitch-soft: #e2f3e9;
  --chalk: rgb(255 255 255 / 0.16); /* pitch markings on green and navy */
  --gold: #f6b82a;          /* scoreboard numbers, stickers, hoops; navy text on it */
  --gold-soft: #fff3d1;
  --gold-ink: #7a4f00;
  --ok: #2f7d4f;
  --ok-on-navy: #7ee0a4;
  --ok-soft: #dff1e6;
  --ok-ink: #1f5c38;
  --warn-soft: #fdebd3;
  --warn-ink: #8a4200;
  --danger-ink: #a11a28;

  --grad-start: #ff6b76;    /* the gradient on key words in headings, on navy only */
  --grad-end: #a993ff;
  --pride-red: #e40303; --pride-orange: #ff8c00; --pride-yellow: #ffed00;
  --pride-green: #008026; --pride-blue: #24408e; --pride-purple: #732982;
  --pride: linear-gradient(90deg, #e40303 0 16.6%, #ff8c00 16.6% 33.3%, #ffed00 33.3% 50%, #008026 50% 66.6%, #24408e 66.6% 83.3%, #732982 83.3%);

  --mark-frame: var(--accent);
  --mark-posts: currentColor;

  --font-display: "Montserrat Alternates", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1200px;
  --gutter: 32px;
  --radius: 10px;
  --radius-small: 6px;
  --tap: 44px;
  --cut: clamp(36px, 6vw, 88px);  /* the height of an angled edge between sections */
  --shadow-card: 0 1px 2px rgb(27 45 69 / 0.08);
  --shadow-raised: 0 10px 30px rgb(27 45 69 / 0.10);
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}