:root {
  /* Brand palette */
  --navy:         #16315E;
  --navy-dark:    #112A52;
  --navy-light:   #1E417A;
  --navy-muted:   #5C7197;
  --gold:         #C8941F;
  --gold-light:   #E2B45A;

  /* Surface & text */
  --bg-light:     #F1F4F8;
  --text:         #16315E;
  --text-body:    #5C6675;
  --text-faint:   #6B7585;
  --text-subtle:  #8A94A3;
  --text-nav:     #AEBED8;
  --text-footer:  #9FB0CC;
  --text-footer-dim: #7D8FAC;
  --border:       #E6EBF1;

  /* Typography */
  --font-serif:   'Source Serif 4', Georgia, serif;
  --font-sans:    'Source Sans 3', system-ui, sans-serif;

  /* Spacing */
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     2rem;
  --space-lg:     4rem;
  --space-xl:     5.625rem; /* 90px */

  /* Layout */
  --max-w:        1280px;
  --max-w-narrow: 1080px;
  --px:           40px;

  /* Radii */
  --r-sm:         4px;
  --r-md:         8px;
  --r-lg:         10px;

  /* Shadows */
  --shadow-card:  0 12px 30px rgba(22,49,94,.06);
  --shadow-hero:  0 22px 50px rgba(22,49,94,.16);
  --shadow-hover: 0 20px 44px rgba(22,49,94,.13);

  /* Transitions */
  --t:            .2s ease;
  --t-reveal:     .7s ease;
}

/* ── Responsive container padding ─────────────────────────── */
@media (max-width: 991px) { :root { --px: 24px; } }
@media (max-width: 479px) { :root { --px: 18px; } }