/* Kelvo design tokens.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Bayon&family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
   Two families: Bayon (condensed display caps: every heading, button, card title, big number)
   and Manrope (body 500, list items 700, eyebrows / FAQ questions / names 800 uppercase). */
:root {
  /* ── Surfaces ── */
  --bg: #EAEBDB;            /* cream paper: the page, the top bar, inner-page heads */
  --surface: #FFFFFF;       /* cards: programs, ways, causes, stories, the CTA band, the form */
  --surface-2: #F5F5ED;     /* inputs on white, portrait cut-out backs (cream at 50% on white) */
  --forest: #112A20;        /* the deep band (impact, donate form, footer card) + ink buttons */
  --green: #2B614A;         /* footer band, secondary buttons, progress fills, the big number */
  --sage: #89A56B;          /* impact pillars on forest */
  --mint: #C6DEAD;          /* light band (causes), the donate-today card */
  --mint-2: #B4CD99;        /* the amount pill on mint */
  --sun: #FDDB22;           /* brush underline, the urgent card, logo word, asterisk */

  /* ── Tiles (icon squares in "ways to help" and values; one per card, never the accent twice in a row) ── */
  --tile-plum: #5F3D4A; --tile-slate: #3F5E73; --tile-umber: #6A5534;
  --tile-violet: #4E3F66; --tile-olive: #5C6B3A;

  /* ── Text ── */
  --text: #112A20;          /* forest ink: headings, labels, strong lines */
  --text-2: #344A41;        /* body, leads, card lines (8.6:1 on cream) */
  --muted: #5B6B62;         /* goal amounts, meta (5.0:1 on white) */
  --on-dark: #EAEBDB;       /* cream text on forest, green and photos */
  --on-dark-2: rgba(234, 235, 219, .86);
  --on-accent: #FFFFFF;

  /* ── Lines ── */
  --line: #EAEBDB;          /* outline buttons on white, progress track, hairlines */
  --line-2: rgba(17, 42, 32, .12);
  --glide: rgba(234, 235, 219, .14);   /* nav pill over the hero photo */
  --glide-light: rgba(17, 42, 32, .07);/* nav pill on cream */

  /* ── Brand / accent (set per business by the palette engine) ── */
  --accent: #DA3C11;        /* ember: DONATE buttons, eyebrows, icon tiles, the sun badge (source #EF562C, deepened so white button text passes 4.5:1) */
  --accent-rgb: 218, 60, 17;
  --accent-soft: #FBDCD2;
  --accent-ink: #B4320E;    /* ember for small text (meta, dates, links) on white/cream: 5.1:1+ */
  --accent-hover: #C2340E;

  /* ── Data / status (forms only) ── */
  --success: #2B614A; --warning: #B7791F; --danger: #B5452E; --info: #3F5E73;

  /* ── Fonts ── */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --head-case: uppercase;  /* headings + buttons: caps for condensed faces only; type.py writes none for sentence-case sets */
  --font-display: "Bayon", "Bebas Neue", "Oswald", Impact, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 4px;              /* tick boxes */
  --r-sm: 16px;             /* 72px icon tiles, social squares */
  --r-photo: 24px;          /* photos inside cards */
  --r-tile: 32px;           /* 120px icon tiles, 54px icon dots */
  --r: 40px;                /* cards: ways, causes, stories, CTA band */
  --r-lg: 48px;             /* programs cards, feature photos, pillars, footer donate card */
  --r-band: 64px;           /* forest / mint / green bands */
  --r-pill: 100px;

  /* ── Spacing / layout ── */
  --container: 1320px;      /* 60px margins at 1440 */
  --band-w: 1340px;         /* rounded bands sit 50px in */
  --gutter: 60px;
  --section: 160px;         /* gap between sections */
  --head-gap: 68px;         /* section head → content */
  --gap: 24px;              /* card gap */
  --pad-card: 32px;

  /* ── Shadows (the style has none: depth = white cards on cream, rounded bands) ── */
  --shadow-1: none;
  --shadow-2: 0 1px 0 rgba(17, 42, 32, .04);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .6s; --dur-fast: .3s;
}

/* ── Type scale (Bayon caps for display, tight tracking; Manrope for reading) ── */
.t-display { font: 400 clamp(64px, 9vw, 130px)/.95 var(--font-display); letter-spacing: -2px; text-transform: var(--head-case); }
.t-h1 { font: 400 clamp(56px, 6.6vw, 94px)/1.06 var(--font-display); letter-spacing: -2px; text-transform: var(--head-case); }
.t-h2 { font: 400 clamp(44px, 5.6vw, 80px)/1 var(--font-display); letter-spacing: -1.5px; text-transform: var(--head-case); }
.t-h3 { font: 400 clamp(36px, 4vw, 60px)/1 var(--font-display); letter-spacing: -1px; text-transform: var(--head-case); }
.t-h4 { font: 400 clamp(30px, 2.8vw, 40px)/1 var(--font-display); letter-spacing: -1px; text-transform: var(--head-case); }
.t-h5 { font: 400 clamp(28px, 2.5vw, 36px)/1.1 var(--font-display); letter-spacing: -1px; text-transform: var(--head-case); }
.t-h6 { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; text-transform: var(--head-case); }
.t-eyebrow { font: 800 20px/1.7 var(--font); text-transform: uppercase; color: var(--accent); }
.t-lead { font: 500 18px/1.7 var(--font); color: var(--text-2); }
.t-body { font: 500 16px/1.7 var(--font); color: var(--text-2); }
.t-strong { font: 700 16px/1.5 var(--font); color: var(--text); }
.t-label { font: 800 18px/1.7 var(--font); text-transform: uppercase; color: var(--text); }
.t-small { font: 500 14px/1.6 var(--font); }
.t-meta { font: 500 16px/1.7 var(--font); color: var(--accent-ink); }
.t-num { font: 400 clamp(56px, 6vw, 80px)/1 var(--font-display); letter-spacing: -1.5px; }
.t-giant { font: 400 clamp(110px, 18vw, 260px)/1 var(--font-display); letter-spacing: -1.5px; }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }