:root {
  /* ── Colours - Base & Complementary (Épico 20.1) ─────────── */
  --color-navy:                #0D1F3C;
  --color-navy-light:          #1A3A6B;
  --color-ivory:                #FAF8F3;
  --color-warm-gray:            #6B7B8D;

  /* ── Colours - Surfaces ───────────────────────────────────── */
  --color-surface-base:        #FFFFFF;
  --color-surface-section:     #FAFAF8;
  --color-surface-card:        #FFFFFF;
  --color-surface-footer:      #0D1F3C;

  /* ── Colours - Gold accent ────────────────────────────────── */
  /* --color-gold: decorative gold used across the site (eyebrows, dividers,
     stat numbers). AAA contrast (8.3:1) on navy/dark surfaces - do not use
     as text on light backgrounds, where it fails WCAG AA (~2:1).
     --color-gold-on-light: same family, darkened for AA contrast (5:1) on
     white/ivory surfaces - wire into .section-header__eyebrow and similar
     light-background components in Épico 21. */
  --color-gold:                #D4B483;
  --color-gold-on-light:       #8A6A30;
  --color-accent-gold:         #B8922A;
  --color-accent-gold-light:   #CCA458;

  /* Fundo das secções escuras (CTA, stats, FAQ, citação, etc.) - navy
     praticamente sólido com uma névoa quente muito subtil centrada (sem
     gradiente diagonal nem brilhos nos cantos) - o brilho dourado forte
     fica confinado às bandas de transição no topo/base de cada secção
     (::before/::after, shared/assets/edge-glow.svg, em website.css). */
  --gradient-navy-gold:
    radial-gradient(ellipse 900px 500px at 50% 35%, rgba(180, 140, 70, 0.12), transparent 70%),
    var(--color-navy);

  /* ── Colours - Text ───────────────────────────────────────── */
  --color-text-heading:        #0A1728;
  --color-text-primary:        #0D1F3C;
  --color-text-secondary:      #4A5968;
  --color-text-muted:          #5B6B7A;
  --color-text-on-dark:        #F2EEE8;
  --color-text-on-dark-muted:  #8BA5C0;
  --color-border:              #EAEBE8;

  /* ── Layout ───────────────────────────────────────────────── */
  --section-padding-y: clamp(80px, 10vw, 140px);
  --section-padding-x: clamp(24px, 6vw, 80px);
  --container-max:     1200px;
  --container-wide:    1440px;

  /* ── Spacing (unchanged - already in active use site-wide) ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  72px;
  --space-9:  100px;

  /* ── Border radius (Épico 20.3) ───────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ── Shadows (Épico 20.3) ──────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(13, 31, 60, 0.08);
  --shadow-md: 0 4px 16px rgba(13, 31, 60, 0.10);
  --shadow-lg: 0 12px 40px rgba(13, 31, 60, 0.14);
  --shadow-xl: 0 24px 64px rgba(13, 31, 60, 0.18);

  /* ── Typography - Fonts ────────────────────────────────────── */
  --font-heading: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* ── Typography - Scale (Épico 20.2) ──────────────────────── */
  /* Reference scale for new/refactored components. Existing hardcoded
     clamp() sizes already in website.css are left untouched here. */
  --text-h1-size: 48px;       --text-h1-line: 1.15; --text-h1-tracking: -0.02em; --text-h1-weight: 700;
  --text-h2-size: 36px;       --text-h2-line: 1.2;  --text-h2-tracking: -0.01em; --text-h2-weight: 700;
  --text-h3-size: 28px;       --text-h3-line: 1.25; --text-h3-tracking: -0.01em; --text-h3-weight: 600;
  --text-h4-size: 22px;       --text-h4-line: 1.3;  --text-h4-tracking: 0;       --text-h4-weight: 600;
  --text-h5-size: 18px;       --text-h5-line: 1.4;  --text-h5-tracking: 0;       --text-h5-weight: 600;
  --text-h6-size: 15px;       --text-h6-line: 1.4;  --text-h6-tracking: 0.02em;  --text-h6-weight: 700;
  --text-body-size: 16px;     --text-body-line: 1.7;   --text-body-tracking: 0;       --text-body-weight: 400;
  --text-caption-size: 13px;  --text-caption-line: 1.5; --text-caption-tracking: 0.01em; --text-caption-weight: 400;
  --text-label-size: 11px;    --text-label-line: 1.4;  --text-label-tracking: 0.14em; --text-label-weight: 600;
}