/* =========================================================
   DESIGN TOKENS
   The "theme" — palette, typography, spacing.
   Edit values here to re-skin the entire site.
   ========================================================= */

:root {
  /* ---------- Palette ---------- */
  --navy:        #0B1628;          /* primary brand — dark sections */
  --navy-soft:   #142035;          /* one step lighter for nested surfaces */
  --gold:        #C9A84C;          /* accent — used sparingly */
  --gold-soft:   rgba(201, 168, 76, 0.55);
  --gold-faint:  rgba(201, 168, 76, 0.25);
  /* Darker variant for gold text on light backgrounds. The brand
     #C9A84C only gives ~2.2:1 contrast on bone — fails WCAG AA for
     small text. #7a611f gives ~5.5:1 (passes AA with margin) while
     reading as a deeper antique-gold, on-brand. */
  --gold-on-light: #7a611f;

  --bone:        #F5F1E8;          /* light body background — warm, not pure white */
  --cream:       #FBF8F1;          /* subtle elevated surface on light sections */
  --ink:         #0B1628;          /* primary text on light — same as navy */
  --ink-muted:   rgba(11, 22, 40, 0.66);
  --ink-faint:   rgba(11, 22, 40, 0.18);

  /* On-dark variants */
  --on-dark:        rgba(255, 255, 255, 0.92);
  --on-dark-muted:  rgba(255, 255, 255, 0.66);
  --on-dark-faint:  rgba(255, 255, 255, 0.16);

  /* Hairline rule */
  --hairline-dark:  rgba(201, 168, 76, 0.35);
  --hairline-light: rgba(11, 22, 40, 0.14);

  /* ---------- Typography ---------- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-label:   'Montserrat', ui-sans-serif, system-ui, sans-serif;

  /* Fluid type scale — mobile floors are deliberate and tested at 360px */
  --fs-eyebrow:   0.7rem;                               /* tracked uppercase labels */
  --fs-body:      clamp(0.98rem, 0.94rem + 0.2vw, 1.075rem);
  --fs-lead:      clamp(1.02rem, 0.96rem + 0.35vw, 1.22rem);
  --fs-h3:        clamp(1.2rem, 1.05rem + 0.7vw, 1.7rem);
  --fs-h2:        clamp(1.85rem, 1.3rem + 2.4vw, 3.4rem);
  --fs-h1:        clamp(2.35rem, 1.55rem + 3.6vw, 5rem);

  --lh-tight:     1.05;
  --lh-snug:      1.25;
  --lh-body:      1.6;

  --tracking-eyebrow: 0.28em;     /* wide but readable at small sizes */
  --tracking-display: 0.02em;
  --tracking-body:    0;

  /* ---------- Spacing & layout ---------- */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 0.7rem + 2.4vw, 2rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --section-y:    clamp(2.8rem, 4vw + 1.4rem, 7rem);
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     180ms;
  --dur-med:      360ms;
  --dur-slow:     720ms;

  /* ---------- Elevation ---------- */
  --shadow-soft: 0 18px 48px -24px rgba(11, 22, 40, 0.18);
  --shadow-deep: 0 32px 80px -32px rgba(11, 22, 40, 0.32);

  color-scheme: light;
}

/* Honor reduced-motion preferences globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}