/* =================================================================
   ISPC — Design tokens (v2 — palette rotation)
   Teal is now PRIMARY structural. Navy is the editorial accent.
   Gold has a darker AA-passing twin for small text.
   ================================================================= */

:root {
  /* ---------- Brand (source of truth: brand-tokens.css from logo handoff) ---------- */
  --navy:        #1B2A6B;    /* editorial weight (headlines, founder quote, contemplative moments) */
  --navy-deep:   #131F4E;    /* deepest, used sparingly for hero text */
  --navy-soft:   #2C3E8A;
  --navy-bg:     #0F1736;    /* the "dark moment" sections */

  --teal:        #00B894;    /* brand teal — DECORATIVE only (dots, dividers, halos, hovers on dark) */
  --teal-deep:   #00795C;    /* PRIMARY structural — button bg, nav CTA, focus, small-text accent (AA on paper) */
  --teal-darker: #005C44;    /* button hover, pressed state */
  --teal-bg:     #003D2E;    /* deepest teal — used as a content backdrop */
  --teal-tint:   #E8F8F3;    /* very light teal wash for backgrounds */

  /* Logo globe-fill (kept from brand-tokens) */
  --globe-light: #F3F8FD;
  --globe-mid:   #E1EBF8;
  --globe-dark:  #CBDCEF;

  /* ---------- Gold accents (3-tier: split for AA compliance) ---------- */
  --gold:         #C9A24A;   /* DECORATIVE only — dots, halos, pings, dividers, dropcap on light (decorative chars allowed to fail WCAG) */
  --gold-display: #9A7421;   /* LARGE TEXT — gold numerals/headings on paper (passes 3:1 large-text AA) */
  --gold-text:    #8C6A1F;   /* SMALL TEXT — gold body text on paper (passes 4.5:1 AA) */
  --gold-glow:    rgba(201, 162, 74, 0.30);

  /* ---------- Neutrals ---------- */
  --paper:       #FAF9F6;
  --paper-warm:  #F4F2EC;
  --rule:        #E0E2EA;    /* slightly darker than v1 — more visible */
  --rule-soft:   #EFF0F4;
  --ink:         #131F4E;
  --ink-soft:    #3E465C;    /* darkened from v1 — passes AA */
  --ink-mute:    #5E6577;    /* darkened from v1 — passes AA */

  /* ---------- Typography ---------- */
  --font-display: 'Instrument Serif', 'Cambria', Georgia, serif;
  --font-body:    'Bricolage Grotesque', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mark:    'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Scale (fluid) */
  --t-hero:    clamp(3.25rem, 7vw, 6.5rem);
  --t-display: clamp(2.25rem, 4.5vw, 4rem);
  --t-h1:      clamp(1.875rem, 3.4vw, 2.75rem);
  --t-h2:      clamp(1.375rem, 2.4vw, 1.875rem);
  --t-h3:      clamp(1.15rem, 1.7vw, 1.375rem);
  --t-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.78rem;
  --t-eyebrow: 0.75rem;

  /* ---------- Motion (impeccable ease-out exponential) ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick:   180ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
  --dur-hero:    800ms;

  /* ---------- Layout ---------- */
  --max-w:        1240px;
  --max-w-prose:  680px;
  --gutter:       clamp(1.5rem, 4vw, 2.5rem);
  --section-y:    clamp(5rem, 9vw, 8rem);
  --section-y-sm: clamp(3rem, 6vw, 5rem);

  /* ---------- Radii + shadows ---------- */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   18px;
  --r-pill: 999px;

  --shadow-rest:  0 1px 2px rgba(19, 31, 78, 0.04);
  --shadow-lift:  0 12px 36px rgba(0, 121, 92, 0.12);
  --shadow-float: 0 24px 60px rgba(19, 31, 78, 0.10);
  --shadow-teal:  0 18px 48px rgba(0, 184, 148, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur-base:  0ms;
    --dur-slow:  0ms;
    --dur-hero:  0ms;
  }
}