/* ============================================================================
   IBB — Design tokens
   Every colour, size and rhythm value in the site resolves to something here.
   Nothing downstream should hard-code a hex value, a font stack or a raw px gap.

   Palette: Direction A — Deep Navy & Warm Gold.
   Type:    Fraunces (display) + Inter (everything else).
   ========================================================================== */

:root {
  /* ---- brand ------------------------------------------------------------ */
  --brand-primary-dark: #0d1b3e;   /* ink navy — darkest surface, footer, hero scrim */
  --brand-primary:      #12245a;   /* brand blue — primary blocks, buttons */
  --brand-primary-mid:  #3a54a3;   /* mid blue — links on light, secondary accents */
  --brand-accent:       #d7a94a;   /* warm gold — CTAs, rules, stat numerals, icons */
  --brand-accent-deep:  #b98d33;   /* gold, pressed / hover */

  /* ---- surfaces --------------------------------------------------------- */
  --surface-white:  #ffffff;
  --surface-light:  #f7f5ef;       /* warm off-white — alternating section ground */
  --surface-raised: #ffffff;       /* cards on --surface-light */
  --surface-dark:   var(--brand-primary-dark);
  --surface-dark-2: var(--brand-primary);

  /* ---- text ------------------------------------------------------------- */
  --text-primary:    #14203f;      /* headings on light */
  --text-body:       #3a4562;      /* slate — body copy on light   (8.7:1 on light) */
  --text-muted:      #5a6480;      /* labels, meta                 (5.4:1 on light) */
  --text-on-dark:         #ffffff;
  --text-on-dark-muted:   rgba(255, 255, 255, .78);
  --text-on-dark-faint:   rgba(255, 255, 255, .58);

  /* ---- lines & shadows -------------------------------------------------- */
  --border-subtle:      rgba(13, 27, 62, .12);
  --border-subtle-dark: rgba(255, 255, 255, .16);
  --border-strong:      rgba(13, 27, 62, .22);

  --shadow-sm: 0 1px 2px rgba(13, 27, 62, .06), 0 2px 6px rgba(13, 27, 62, .05);
  --shadow-md: 0 2px 6px rgba(13, 27, 62, .07), 0 10px 24px rgba(13, 27, 62, .08);
  --shadow-lg: 0 4px 12px rgba(13, 27, 62, .09), 0 22px 48px rgba(13, 27, 62, .12);

  /* ---- status ----------------------------------------------------------- */
  --success: #1d7a52;
  --error:   #b3261e;

  /* ---- type ------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Strict scale — a heading's size is never chosen ad hoc. */
  --fs-display: clamp(2.75rem, 1.6rem + 4.4vw, 4.5rem);   /* 44 → 72  H1 */
  --fs-h2:      clamp(1.95rem, 1.4rem + 1.9vw, 2.625rem); /* 31 → 42  section titles */
  --fs-h3:      clamp(1.3rem, 1.16rem + .48vw, 1.625rem); /* 21 → 26  card titles */
  --fs-h4:      1.0625rem;                                /*      17  sub-labels */
  --fs-lede:    clamp(1.0625rem, 1rem + .3vw, 1.1875rem); /* 17 → 19  intro copy */
  --fs-body:    1.0625rem;                                /*      17 */
  --fs-sm:      .9375rem;                                 /*      15 */
  --fs-xs:      .8125rem;                                 /*      13  kickers, meta */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --ls-kicker: .14em;   /* uppercase labels */
  --ls-tight:  -.022em; /* large display text */

  /* ---- spacing — 8px base, multiples only ------------------------------- */
  --s-1:   8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-6:  48px;
  --s-8:  64px;
  --s-12: 96px;
  --s-16: 128px;

  /* vertical rhythm of a full-width section */
  --section-y:      clamp(4rem, 2.4rem + 6.4vw, 8rem);   /*  64 → 128 */
  --section-y-tight: clamp(3rem, 2rem + 4vw, 5rem);      /*  48 →  80 */

  /* ---- layout ----------------------------------------------------------- */
  --content: 1280px;        /* default max content width */
  --content-wide: 1440px;
  --content-narrow: 760px;  /* long-form prose */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --nav-h: 76px;

  /* ---- shape ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur:      260ms;
  --dur-slow: 480ms;
  --reveal-travel: 20px;

  /* ---- logo aspect ratios (from the traced SVG viewBoxes) --------------- */
  --bear-ratio: 694 / 400;
  --bear-simple-ratio: 698 / 403;
}

@media (max-width: 767px) {
  :root { --nav-h: 64px; }
}