/* ==========================================================================
   02-tokens.css
   Every color, radius, shadow, font and easing the site uses, in one place.
   CHANGE A BRAND COLOR HERE and it updates everywhere. Nothing below this file
   should contain a raw hex value or a hard-coded shadow.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --purple:          rgb(107 44 145);   /* #6b2c91 — primary brand color     */
  --deep-purple:     rgb(74 29 106);    /* dark sections, footer, hero scrim */
  --lavender:        rgb(142 68 173);   /* section eyebrow labels            */
  --light-purple:    rgb(187 143 206);  /* labels + stat numbers on dark     */

  /* ---- Neutral / surface palette ---------------------------------------- */
  --warm-white:      rgb(250 247 252);  /* page background, About, Get Involved */
  --lavender-cream:  rgb(244 238 247);  /* icon circles, selected amount      */
  --cream:           rgb(240 230 246);  /* Stories section                    */
  --sand:            rgb(237 228 243);  /* Programs + Newsletter sections     */
  --charcoal:        rgb(43 45 66);     /* body text and headings             */
  --soft-gray:       rgb(108 117 125);  /* secondary text                     */
  --white:           rgb(255 255 255);
  --border-gray:     rgb(229 231 235);  /* input + amount-card borders        */
  --border-gray-100: rgb(243 244 246);  /* drawer link dividers               */

  /* THE ONE INTENTIONAL VISUAL CHANGE from the old build. The round backdrop
     behind the card icons used a class (`bg-mint-cream`) that was never defined
     in the old stylesheet, so those six circles rendered fully transparent.
     This restores them. For a pixel-identical match with the old site instead,
     set this to `transparent`. */
  --icon-circle-bg:  var(--lavender-cream);

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Playfair Display", serif;   /* headings, stat numbers */
  --font-body:    Inter, sans-serif;           /* everything else        */

  /* Each size has a matching line-height (--lh-*). ALWAYS SET BOTH — the old
     build got them as a pair from Tailwind, and using a size without its
     partner silently makes every block taller than the design. Override with a
     --leading-* value below only where the design genuinely calls for it. */
  --text-xs:   0.75rem;    --lh-xs:   1rem;
  --text-sm:   0.875rem;   --lh-sm:   1.25rem;
  --text-base: 1rem;       --lh-base: 1.5rem;
  --text-lg:   1.125rem;   --lh-lg:   1.75rem;
  --text-xl:   1.25rem;    --lh-xl:   1.75rem;
  --text-2xl:  1.5rem;     --lh-2xl:  2rem;
  --text-3xl:  1.875rem;   --lh-3xl:  2.25rem;
  --text-4xl:  2.25rem;    --lh-4xl:  2.5rem;
  --text-5xl:  3rem;       --lh-5xl:  1;
  --text-hero: 3.5rem;     --lh-hero: 1;   /* 56px — hero h1 at desktop only */

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ---- Radii -------------------------------------------------------------- */
  --radius-button: 8px;
  --radius-card:   16px;
  --radius-full:   9999px;

  /* ---- Shadows ------------------------------------------------------------ */
  /* KNOWN QUIRK, faithfully reproduced: the resting card shadow is WHITE on the
     live site, not a subtle grey. In the old build two different `.shadow-card`
     rules collided — the intended `0 4px 20px rgba(0,0,0,.08)` was overridden by
     an auto-generated shadow-COLOR utility of the same name (the shadcn theme
     defines a color called "card", which is white). The result is a soft white
     glow that is invisible against light sections.
     To adopt the shadow that was originally intended, swap the two lines below.
     Note the hover shadow was never affected, so cards currently jump from a
     white glow to a grey shadow on hover. */
  --shadow-card:       0 4px 20px rgb(255 255 255);
  /* --shadow-card:    0 4px 20px rgb(0 0 0 / .08); */
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, .12);
  --shadow-nav:        0 2px 10px rgba(0, 0, 0, .06);
  --shadow-button:     0 2px 8px rgba(107, 44, 145, .25);
  --shadow-drawer:     0 20px 25px -5px rgba(0, 0, 0, .1),
                       0 8px 10px -6px rgba(0, 0, 0, .1);

  /* ---- Layout ------------------------------------------------------------- */
  --container-width: 1200px;
  --container-pad:   1.5rem;
  --nav-height:      72px;
  --scroll-offset:   80px;   /* how far above a section an anchor lands */

  /* ---- Motion -------------------------------------------------------------
     Named for their GSAP originals so the mapping stays traceable:
     power3.out is a quartic ease-out; power2.out is cubic.               */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-back:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --reveal-duration: 0.6s;
}


/* ---- Page defaults -------------------------------------------------------- */

body {
  background-color: var(--warm-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Native smooth scrolling for anything that isn't handled by js/nav.js. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ---- Icons ----------------------------------------------------------------
   All icons are inline SVGs on a 24x24 viewBox. These classes only set the
   rendered size; color comes from `currentColor` on the parent.            */

.icon        { width: 1.5rem;  height: 1.5rem;  flex-shrink: 0; }
.icon--16    { width: 1rem;    height: 1rem;    }
.icon--20    { width: 1.25rem; height: 1.25rem; }
.icon--24    { width: 1.5rem;  height: 1.5rem;  }
.icon--28    { width: 1.75rem; height: 1.75rem; }