/* ==========================================================================
   Montpier Digital — Design tokens
   One source of truth for colour and type. Components in styles.css only
   reference these variables; nothing there uses a literal colour.
   ========================================================================== */

:root {
  /* ---- Colour: brand ---------------------------------------------------- */
  --blue:        #0A5BBD;  /* primary — buttons, accents, eyebrows, stat numbers, serif italics */
  --blue-hover:  #084C9E;
  --blue-light:  #4DB5F0;  /* accent on dark surfaces only — chart line, "+" , "a clear plan." */
  --navy:        #0B1A33;  /* all dark surfaces — hero card, step 04, CTA band */
  --navy-deep:   #06122A;  /* bottom edge of hero card gradient */

  /* ---- Colour: neutrals (cool, blue-biased) ------------------------------ */
  --ink:         #0F1726;  /* headlines, strong text */
  --body:        #4A5468;  /* running copy */
  --muted:       #7A8497;  /* captions, meta, footer links */
  --line:        #D8E0EA;  /* borders, dividers */
  --line-soft:   #E7ECF3;
  --page:        #F6F8FB;  /* light bands (hero, stats, footer) */
  --surface:     #FFFFFF;
  --tint:        #EEF4FB;  /* blue-grey cards and callouts */
  --tint-strong: #E3EDF9;  /* step markers, hover fills */

  /* ---- Colour: on dark ------------------------------------------------- */
  --on-dark:       #FFFFFF;
  --on-dark-muted: rgba(255, 255, 255, 0.68);
  --on-dark-line:  rgba(255, 255, 255, 0.14);

  /* ---- Type ------------------------------------------------------------ */
  --font-sans:  "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:  "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", "Times New Roman", Georgia, serif;

  /* scale */
  --fs-display: clamp(2.75rem, 4.7vw, 4.5rem);    /* hero h1  (72px @1536) */
  --fs-h2:      clamp(2.25rem, 3.7vw, 3.5rem);     /* section headings (56px) */
  --fs-h3:      1.75rem;                           /* card titles          */
  --fs-h4:      1.375rem;                          /* small card titles    */
  --fs-lead:    1.25rem;                           /* section intro copy   */
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --fs-stat-xl: clamp(4.5rem, 7.5vw, 7.25rem);     /* 10M+                 */
  --fs-stat-lg: clamp(3rem, 4vw, 4rem);            /* 75.4M+, 10.2M+, 100+ */
  --fs-stat-md: clamp(2.25rem, 3.1vw, 3rem);       /* 20K → 892K, +42%, 7+ */
  --fs-stat-sm: 2.125rem;                          /* 6.0x, 10M+ in cards  */

  /* weights */
  --w-display: 700;
  --w-heading: 600;
  --w-strong:  600;
  --w-body:    400;

  /* letter-spacing & leading */
  --ls-tight:   -0.03em;
  --ls-eyebrow:  0.14em;
  --lh-tight:    1.04;
  --lh-heading:  1.12;
  --lh-body:     1.6;

  /* ---- Shape & elevation ------------------------------------------------ */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 50px rgba(15, 23, 38, 0.08), 0 2px 6px rgba(15, 23, 38, 0.05);
  --shadow-float: 0 24px 60px rgba(15, 23, 38, 0.14), 0 4px 10px rgba(15, 23, 38, 0.06);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1400px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(48px, 5vw, 76px);
  --hero-gap: clamp(32px, 6vw, 110px);
  --float-overhang: clamp(56px, 9vw, 160px);   /* how far the +42% card hangs into the gap */
}