/* CAE design tokens — shared by index.html (map) and quiz.html (quiz).
   Source: CAE Branding Guidelines (Feb 2024). Change a value here and both pages follow. */

/* ---------- Typeface: Red Hat Display (300 headlines · 400 body · 700 small labels) ---------- */
@font-face{font-family:"Red Hat Display";src:url("../assets/fonts/RedHatDisplay-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Red Hat Display";src:url("../assets/fonts/RedHatDisplay-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Red Hat Display";src:url("../assets/fonts/RedHatDisplay-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  /* Brand colours */
  --color-dark-blue:#06103D;      /* page background, dark bands, text on light surfaces */
  --color-tint:#0C1A56;           /* land masses, photo placeholders */
  --color-bright-blue:#2969F2;    /* CTAs, blue blocks, hover/selected dot */
  --color-press:#1D53CC;          /* hover/press state of Bright Blue controls */
  --color-surface:#EEEDEB;        /* side-panel and quiz background */
  --color-lime:#B4F62A;           /* accent: correct answer, active chip, matching dots */
  --color-error:#F55C38;          /* wrong answer */
  --color-white:#FFFFFF;
  --color-text-muted:#4A4F63;     /* secondary text on light surfaces */

  /* Alpha variants (derived from the colours above) */
  --alpha-dark-45:rgba(6,16,61,.45);     /* hairlines on light surfaces */
  --alpha-dark-35:rgba(6,16,61,.35);     /* map scrim behind the open panel */
  --alpha-dark-65:rgba(6,16,61,.65);
  --alpha-white-18:rgba(255,255,255,.18);
  --alpha-white-30:rgba(255,255,255,.3);
  --alpha-white-35:rgba(255,255,255,.35);
  --alpha-white-55:rgba(255,255,255,.55);
  --alpha-white-70:rgba(255,255,255,.7);

  /* Type */
  --font-family:"Red Hat Display",system-ui,sans-serif;
  --weight-light:300;
  --weight-regular:400;
  --weight-bold:700;

  /* Shape */
  --radius-pill:999px;
  --radius-round:50%;
  --hairline:1px;

  /* Motion */
  --dur-fast:140ms;               /* colour/state changes */
  --dur-base:220ms;               /* panels, fades */
  --ease-standard:cubic-bezier(.2,0,.2,1);

  /* Touch */
  --tap-min:44px;                 /* minimum hit target */
}