@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=DM+Sans:wght@400;500;700&display=swap');
:root{
/* Base palette — verbatim from anyokafoundation.org site source */
--cream:#FFFDF5;
--cream-deep:#FBF6E9;
--ink:#1A1208;
--green:#0F6E56; /* "sage green" — primary brand color */
--green-mid:#1D9E75;
--green-pale:#E1F5EE;
--gold:#F5C842; /* warm gold */
--gold-deep:#C8922A;
--gold-pale:#FEF9E6;
--orange:#F5813F; /* terracotta */
--orange-pale:#FEF0E6;
--pink:#D4537E;
--pink-pale:#FBEAF0;
--purple:#7F77DD;
--purple-pale:#EEEDFE;
--blue:#378ADD;
--gray:#6B6A63;
--border:rgba(26,18,8,0.10);
/* Semantic aliases */
--surface-page:var(--cream);
--surface-alt:var(--cream-deep);
--surface-card:#FFFFFF;
--surface-inverse:var(--ink);
--surface-brand:var(--green);
--surface-brand-tint:var(--green-pale);
--text-heading:var(--ink);
--text-body:var(--ink);
--text-muted:var(--gray);
--text-on-dark:rgba(255,253,245,0.85);
--text-brand:var(--green);
--text-accent-label:var(--gold-deep);
--border-card:1px solid var(--border);
--focus-ring:0 0 0 3px rgba(15,110,86,0.25);
}
:root{
--font-serif-display:'Fraunces',serif; /* headings, stats, brand voice; italic for emphasis words */
--font-sans:'DM Sans',sans-serif; /* body, UI, labels */
--text-hero:clamp(2.4rem,5vw,3.6rem); /* Fraunces 600, line-height 1.08 */
--text-h1:clamp(2.2rem,4.5vw,3.2rem);
--text-h2:clamp(1.8rem,3.5vw,2.6rem); /* section titles, line-height 1.15 */
--text-h3:1.3rem; /* card headings, Fraunces 600 */
--text-body-lg:1.05rem; /* lede/desc, line-height 1.7 */
--text-body:0.95rem;
--text-sm:14px;
--text-label:12px; /* eyebrow: 700, uppercase, letter-spacing .1em */
--leading-tight:1.08;
--leading-heading:1.15;
--leading-body:1.6;
--leading-relaxed:1.7;
--tracking-label:0.1em;
}
:root{
/* Spacing (site uses rem rhythm) */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--section-pad:5.5rem 2rem;
--content-max:1180px;
/* Radii */
--radius-pill:100px; /* buttons, chips, eyebrows, inputs */
--radius-card:20px; /* program cards */
--radius-card-sm:18px; /* product/blog/impact cards */
--radius-card-lg:24px; /* feature panels, donate card */
--radius-band:28px; /* newsletter band */
--radius-hero:32px; /* dream/CTA panel */
--radius-icon:14px; /* icon tiles */
--radius-input:14px;
}
:root{
/* Shadows — soft, warm-tinted, only on hover-lift and floating cards */
--shadow-float:0 20px 50px rgba(26,18,8,0.10);
--shadow-card-hover:0 16px 32px rgba(26,18,8,0.08);
--shadow-btn-hover:0 8px 20px rgba(15,110,86,0.25);
--shadow-gold:0 4px 14px rgba(0,0,0,0.18);
/* Motion — quick, gentle; translateY lifts */
--ease-hover:0.2s; /* @kind other */
--ease-card:0.25s; /* @kind other */
--lift-btn:translateY(-2px); /* @kind other */
--lift-card:translateY(-6px); /* @kind other */
/* Backdrop */
--nav-bg:rgba(255,253,245,0.92);
--nav-blur:blur(8px); /* @kind other */
}