/* ==========================================================================
   CURRENT COMMERCE — DESIGN TOKENS
   Deep navy / warm gold / off-white editorial system
   ========================================================================== */

:root {
  /* ---- Color: Navy (primary brand) ---- */
  --navy-950: #061c2b;
  --navy-900: #0a2438;   /* header / hero background */
  --navy-800: #0e2f47;
  --navy-700: #123a56;
  --navy-600: #16456a;

  /* ---- Color: Gold / Yellow accent ---- */
  --gold-500: #f0b429;   /* primary CTA yellow */
  --gold-600: #e0a51c;   /* hover state */
  --gold-400: #f4c454;

  /* ---- Neutrals ---- */
  --off-white: #f7f5f1;   /* section backgrounds */
  --stat-band: #efece5;   /* stat band background (slightly deeper off-white) */
  --white: #ffffff;
  --ink: #142433;         /* body copy navy-black */
  --ink-muted: #4b5c6b;   /* secondary copy */
  --line: #dcd7cc;        /* hairline borders on light bg */
  --line-navy: rgba(255, 255, 255, 0.16);

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Type scale (fluid) ---- */
  --fs-hero: clamp(2.4rem, 1.2rem + 3.6vw, 3.6rem);
  --fs-h1: clamp(2rem, 1.1rem + 2.8vw, 3rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.5vw, 1.375rem);
  --fs-lead: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-xs: 0.78rem;
  --fs-stat: clamp(2rem, 1.4rem + 2vw, 2.75rem);

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --content-pad: 40px;
  --header-height: 88px;

  /* ---- Effects ---- */
  --radius-sm: 4px;
  --radius-full: 999px;
  --shadow-card: 0 1px 3px rgba(10, 36, 56, 0.06);
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  :root {
    --content-pad: 24px;
    --header-height: 72px;
  }
}