/* =============================================================
   variables.css — Design tokens
   All colors, fonts, spacing, and other tokens live here.
   Change a value here to update it everywhere across the site.
   ============================================================= */

:root {
  /* ---------- Brand colors ---------- */
  --color-navy-deep: #0D2B45;       /* Primary backgrounds, navigation */
  --color-navy-dark: #091E30;       /* Footer, darkest sections */
  --color-orange: #E8521A;          /* CTAs, accents, highlights */
  --color-ice-blue: #A7D4E7;        /* Accents on dark backgrounds */

  /* ---------- Neutrals ---------- */
  --color-white: #FFFFFF;
  --color-off-white: #F7F9FB;       /* Light section backgrounds */
  --color-gray-100: #E5E9ED;        /* Borders, dividers */
  --color-gray-400: #6B7785;        /* Secondary text on light */
  --color-gray-600: #3A4754;        /* Body text on light */
  --color-text-on-dark: #C9D4DE;    /* Body text on dark backgrounds */

  /* ---------- Functional ---------- */
  --color-success: #10B981;
  --color-error: #DC2626;

  /* ---------- Typography ----------
     Fallbacks listed so the page reads reasonably while Google Fonts loads
     (or if it fails entirely). */
  --font-display: 'Barlow', 'Arial Black', sans-serif;             /* Hero headings only, 900 */
  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;  /* Nav, labels, titles, 700-800 */
  --font-body: 'DM Sans', system-ui, sans-serif;                   /* Body copy, 400-500-700 */

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

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --nav-height: 110px;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(9, 30, 48, 0.05);
  --shadow-md: 0 4px 12px rgba(9, 30, 48, 0.08);
  --shadow-lg: 0 12px 32px rgba(9, 30, 48, 0.12);
  --shadow-nav: 0 2px 8px rgba(0, 0, 0, 0.2);

  /* ---------- Transitions ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}