/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   Every color, font, size, and spacing value lives here.
   The rest of the CSS references these — never hardcode.

   Breakpoints (can't use custom properties in media queries,
   so they're documented here for reference):
     Tablet:  min-width: 768px
     Desktop: min-width: 1200px
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Colors ── */
  --color-navy:          #0C2340;
  --color-navy-dark:     #0a2038;
  --color-white:         #FFFFFF;
  --color-gray:          #D9D9D9;

  /* Overlays & translucent backgrounds */
  --overlay-dark:        rgba(12, 35, 64, 0.45);
  --overlay-heavy:       rgba(12, 35, 64, 0.97);
  --nav-bg:              rgba(12, 35, 64, 0.85);
  --btn-bg:              rgba(25, 30, 40, 0.65);
  --border-light:        rgba(255, 255, 255, 0.3);

  /* ── Fonts ── */
  --font-heading:        'Bebas Neue', sans-serif;
  --font-body:           'Inter', sans-serif;
  --font-detail:         'Source Sans 3', sans-serif;

  /* ── Font sizes — fluid with clamp(mobile, preferred, desktop) ── */
  --text-xs:             clamp(0.625rem, 0.9vw, 0.875rem);    /* 10px → 14px  (stat labels)       */
  --text-sm:             0.875rem;                              /* 14px          (small UI text)     */
  --text-base:           1rem;                                  /* 16px          (nav, buttons)      */
  --text-md:             clamp(1rem, 1.2vw, 1.25rem);          /* 16px → 20px   (body copy)         */
  --text-lg:             clamp(1.25rem, 2vw, 1.5rem);          /* 20px → 24px   (lead text)         */
  --text-heading:        clamp(2.5rem, 6vw, 5rem);             /* 40px → 80px   (section headings)  */
  --text-hero:           clamp(2.125rem, 6vw, 5.875rem);       /* 34px → 94px   (hero title)        */
  --text-banner:         clamp(3rem, 8vw, 6.25rem);            /* 48px → 100px  (page banners)      */
  --text-stat:           clamp(5rem, 11vw, 9.375rem);          /* 80px → 150px  (stat numbers)      */

  /* ── Spacing scale ── */
  --space-xs:            0.5rem;     /* 8px  */
  --space-sm:            1rem;       /* 16px */
  --space-md:            1.5rem;     /* 24px */
  --space-lg:            2.5rem;     /* 40px */
  --space-xl:            3.75rem;    /* 60px */
  --space-2xl:           5rem;       /* 80px */

  /* ── Layout ── */
  --content-max:         87.5rem;    /* 1400px */
  --radius:              4px;
  --transition-speed:    0.3s;

  /* ── Nav ── */
  --nav-logo-height:     94px;
  --nav-logo-height-mobile: 60px;

  /* ── Footer ── */
  --footer-logo-height:  110px;
}