:root {
  /* ---- Palette (Global Constraints — do not modify) ---- */
  --color-base:    #15181C;  /* near-black charcoal — primary dark background */
  --color-panel:   #1B2433;  /* deep navy — alternating section background */
  --color-offwhite:#F5F2EC;  /* warm off-white — light section background, primary text on dark */
  --color-orange:  #FF6A1A;  /* safety orange — primary CTA, key stat highlights */
  --color-amber:   #F5A623;  /* amber — flip-counter digits, secondary highlights */
  --color-slate:   #B8BFC8;  /* muted slate — secondary text ON DARK sections only, see contrast note below */

  /* ---- Semantic text colors (WCAG-verified — see §3.1, do not substitute) ---- */
  --color-text-primary-on-dark:    var(--color-offwhite); /* 15.94:1 on base, 13.96:1 on panel */
  --color-text-secondary-on-dark:  var(--color-slate);    /* 9.60:1 on base, 8.41:1 on panel */
  --color-text-primary-on-light:   var(--color-base);     /* 15.94:1 on offwhite */
  --color-text-secondary-on-light: var(--color-panel);    /* 13.96:1 on offwhite — NOT slate, slate fails at 1.66:1 on offwhite */
  --color-accent-text-on-dark:     var(--color-orange);   /* 6.21:1 on base, 5.44:1 on panel — dark sections only, never on offwhite (2.56:1, fails) */
  --color-ticker-digit:            var(--color-amber);    /* 7.69:1 on panel, 8.79:1 on base */

  /* ---- Buttons ---- */
  --color-cta-bg:   var(--color-orange);
  --color-cta-text: var(--color-base);  /* 6.21:1 — verified AA pass. NEVER use offwhite text on orange (2.56:1, fails WCAG AA) */

  /* ---- Type families ---- */
  --font-headline: "Archivo Black", "Arial Black", sans-serif;   /* H1/H2, all-caps only */
  --font-eyebrow:  "Barlow Condensed", "Arial Narrow", sans-serif; /* eyebrows/labels, uppercase, letter-spaced */
  --font-body:     "IBM Plex Sans", -apple-system, sans-serif;    /* body copy */
  --font-mono:     "IBM Plex Mono", "Courier New", monospace;      /* numerals ONLY — see §5.5 */

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 8rem;     /* 128px */

  /* ---- Layout ---- */
  --container-max: clamp(1120px, 75vw, 1920px);
  --calc-panel-max: clamp(32rem, 11.43vw + 21.71rem, 40rem);
  --container-pad: var(--space-3);

  /* ---- Borders (hard edges only — no border-radius anywhere except noted exceptions) ---- */
  --radius-0: 0;
  --border-hairline-on-dark:  1px solid rgba(184, 191, 200, 0.35); /* slate at 35% */
  --border-hairline-on-light: 1px solid rgba(27, 36, 51, 0.25);    /* panel at 25% */
  --border-thick: 2px solid;

  /* ---- Breakpoints (documented for reference; CSS custom properties can't be used inside @media, use the literal px values below when writing media queries) ---- */
  /* tablet: 768px, desktop: 1120px */
}