/* ==========================================================================
   NWC DESIGN TOKENS  —  01-tokens.css
   National Women's Collaborative — brand-locked design system
   --------------------------------------------------------------------------
   Brand colors, type, and the dusty-rose tint were EXTRACTED VERBATIM from
   the live site's source (GoDaddy Websites+Marketing build). The core hues
   are NOT changed. Everything else here is "presentation modernization"
   only — warm neutrals, derived tints, hover states, spacing, and an
   editorial type scale (Forbes Women direction).
   ========================================================================== */

:root {
  /* ---- CORE BRAND (exact, do not change) -------------------------------- */
  --nwc-coral:        #eb5326;   /* signature accent — rgb(235,83,38)       */
  --nwc-rose:         #e1c3c0;   /* dusty-rose secondary (used ~50% alpha)  */
  --nwc-ink:          #1b1b1b;   /* headings — rgb(27,27,27)                */
  --nwc-charcoal:     #303030;   /* rgb(48,48,48)                           */
  --nwc-grey:         #5e5e5e;   /* body text — rgb(94,94,94)               */
  --nwc-grey-2:       #757575;   /* muted text — rgb(117,117,117)           */
  --nwc-line-strong:  #c6c6c6;   /* original light grey — rgb(198,198,198)  */
  --nwc-paper:        #ffffff;

  /* ---- DERIVED FROM BRAND (warm & feminine modernization) --------------- */
  --nwc-coral-press:  #cf4012;   /* AA-safe coral: text-on-white & buttons  */
  --nwc-coral-deep:   #b8380e;   /* coral hover/active                       */
  --nwc-coral-wash:   #fbe7da;   /* warm peach-coral section wash            */
  --nwc-rose-wash:    #f9eae4;   /* warm blush section wash                  */
  --nwc-peach:        #fad9c6;   /* soft peach (warm fills)                  */
  --nwc-blush:        #f6e2dc;   /* soft blush                               */
  --nwc-cream:        #fdf6ef;   /* warm peachy ivory page background        */
  --nwc-line:         #efe4da;   /* warm hairline borders/dividers          */
  --nwc-overlay:      rgba(27, 27, 27, 0.62); /* hero image overlay         */
  --nwc-overlay-coral: rgba(176, 56, 14, 0.55); /* coral-toned photo wash   */

  /* ---- TYPOGRAPHY (exact families, editorial scale) -------------------- */
  /* Bright & Empowering — warm soft serif display + friendly humanist body */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Figtree", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-accent:  "Figtree", var(--font-body);

  /* Fluid type scale — generous, warm, confident */
  --fs-mega:    clamp(2.6rem, 1.2rem + 5.6vw, 6rem);     /* hero headline      */
  --fs-display: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem);   /* section statements */
  --fs-h1:      clamp(2rem, 1.4rem + 2.7vw, 3.25rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h3:      clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  --fs-h4:      1.2rem;
  --fs-lead:    clamp(1.0625rem, 1rem + 0.45vw, 1.3rem);
  --fs-body:    1rem;     /* 16px — never smaller for body                    */
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight:   1.0;
  --lh-snug:    1.18;
  --lh-body:    1.62;
  --tracking-eyebrow: 0.16em;
  --tracking-tight:   -0.03em;

  /* ---- SPACING (4px base) ---------------------------------------------- */
  --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: 4rem;     --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(2.5rem, 2rem + 3vw, 4.5rem); /* vertical rhythm per section */
  --container:  1200px;
  --container-narrow: 760px; /* article/measure ~68ch                       */

  /* ---- RADIUS / SHADOW / MOTION ---------------------------------------- */
  --radius-pill: 999px;     /* rounded buttons (brief)                      */
  --radius-card: 22px;      /* soft, feminine rounding                      */
  --radius-sm:   14px;
  --shadow-sm:  0 1px 2px rgba(27,27,27,.06), 0 1px 3px rgba(27,27,27,.05);
  --shadow-md:  0 8px 24px rgba(27,27,27,.08);
  --shadow-lg:  0 24px 60px rgba(27,27,27,.12);
  --shadow-coral: 0 12px 32px rgba(235,83,38,.22);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 220ms;
}

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