/* ============================================================================
   Michele Bastone — Design Tokens (Package 1)
   Source of truth: Creative Brief + BRAND_AND_VOICE_BRIEF.md
   Palette is client-documented; light-surface-forward with navy for authority.
   ========================================================================== */
:root {
  /* ---- Brand colors (client-documented) ---- */
  --navy: #123B63;          /* Primary Navy */
  --navy-700: #0E2F4F;      /* darker navy (depth, footer) */
  --navy-300: #2C5A86;      /* lighter navy (borders on navy) */
  --accent: #4A90E2;        /* Accent Blue */
  --accent-600: #3B7BC4;    /* accent hover */
  --charcoal: #3A3A3A;      /* Charcoal Gray — primary text */
  --white: #FFFFFF;

  /* ---- Neutrals derived for accessible light surfaces ---- */
  --gray-50:  #F5F8FC;      /* Light Gray section background */
  --gray-100: #EDF1F7;      /* raised light surface */
  --gray-200: #DDE5EF;      /* borders / dividers */
  --gray-400: #8A97A8;      /* muted text (AA on white) */
  --gray-600: #55627A;      /* secondary text */

  /* ---- Semantic (forms/status only) ---- */
  --success: #2E7D5B;
  --warning: #B4791F;
  --error:   #C0392B;

  /* ---- Surface + text roles ---- */
  --bg:            var(--white);
  --bg-alt:        var(--gray-50);      /* alternating section rhythm */
  --surface-card:  var(--white);
  --border:        var(--gray-200);
  --text:          var(--charcoal);
  --text-muted:    var(--gray-600);
  --text-dim:      var(--gray-400);
  --text-on-navy:  #EAF1F9;
  --link:          var(--accent-600);

  /* ---- Typography (client-requested: Montserrat SemiBold + Open Sans) ---- */
  --font-head: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fw-head: 600;           /* Montserrat SemiBold */
  --fw-body: 400;
  --fw-medium: 600;
  --fw-bold: 700;

  /* Fluid type scale — controlled hero (desktop H1 ~54–60px, never a wall of text) */
  --fs-hero: clamp(2.2rem, 4.2vw, 3.5rem);   /* ~35→56px */
  --fs-hero-sub: clamp(1.5rem, 2.9vw, 2.35rem);
  --fs-h1:   clamp(1.85rem, 3.6vw, 2.5rem);
  --fs-h2:   clamp(1.55rem, 2.8vw, 2.1rem);
  --fs-h3:   clamp(1.15rem, 1.8vw, 1.35rem);
  --fs-quote: clamp(1.5rem, 3vw, 2.35rem);   /* editorial pull quotes */
  --fs-lead: clamp(1.15rem, 1.5vw, 1.34rem); /* ~19–21px supporting copy */
  --fs-body: 1.02rem;
  --fs-sm:   0.9rem;
  --lh-tight: 1.08;
  --lh-body: 1.62;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem;
  --section-y: clamp(3.5rem, 6vw, 7rem);       /* composed: ~56→112px */
  --section-y-compact: clamp(3rem, 4.5vw, 5rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 720px;
  --gutter: clamp(1.1rem, 4vw, 2rem);

  /* ---- Radius / borders ---- */
  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --border-w: 1px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(18,59,99,.06), 0 1px 2px rgba(18,59,99,.08);
  --shadow:    0 6px 22px rgba(18,59,99,.10);
  --shadow-lg: 0 18px 48px rgba(18,59,99,.16);
  --glow-accent: 0 6px 18px rgba(74,144,226,.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(74,144,226,.45);

  /* ---- Breakpoints (reference; media queries in styles.css) ----
     1440 1280 1024 834 768 430 390 375 */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; }
}