:root {
  /* Palette — brief §9. These five values only. */
  --navy: #001440;
  --teal: #00A98F;
  --white: #FFFFFF;
  --grey-light: #F3F6F8;
  --charcoal: #1F2937;

  /* .btn--primary's hover state, same hue/saturation as --teal, +8%
     lightness. Goes LIGHTER, not darker: the button's own text is navy
     (dark), so raising the background's lightness is what INCREASES
     contrast (6.02:1 resting → 7.02:1 hover). A darker hover token was
     used here previously, back when the button text was white — darkening
     behind white text raises contrast, the same move behind dark text
     lowers it (this produced a 4.43:1 near-miss). If you're about to
     "fix" this back to something darker, don't — check what text colour
     sits on it first. Not used as a fill/border anywhere else; if a future
     component needs a darker teal, add a distinctly-named token rather
     than repurposing this one. */
  --teal-hover: #00B79A;
  --navy-soft: rgba(0, 20, 64, 0.08);

  /* Brand teal (#00A98F) is a fill/background colour: white-on-teal is
     2.97:1 and teal-on-white is 2.97:1, both below the 4.5:1 AA text floor
     (and even below the 3:1 non-text/large-text floor). On a LIGHT
     background, teal is therefore never a text or focus-ring colour — use
     this darkened, same-hue variant instead (4.94:1 on white, 4.55:1 on
     --grey-light). On a DARK (navy) background the brand teal itself is
     fine as text (6.02:1) — keep using --teal there. */
  --teal-text: #007F6B;

  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-6: 3rem;   --space-8: 4rem;
  --space-12: 6rem;

  --radius: 8px;
  --shadow: 0 4px 20px rgba(0, 20, 64, 0.08);
  --shadow-hover: 0 8px 30px rgba(0, 20, 64, 0.14);
  --container: 1200px;
  --transition: 0.2s ease;

  --font-ar: 'Tajawal', system-ui, sans-serif;
  --font-en: 'Inter', system-ui, sans-serif;
}