/* Baloo 2 and Montserrat, SIL Open Font License 1.1. Variable faces: one file
   each covers the 400-800 range these tokens use. Self-hosted rather than
   loaded from Google Fonts so the flow works behind a CSP and offline. */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../assets/baloo2-latin.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../assets/montserrat-latin.woff2) format('woff2')}

/* Bloc (Canva-licensed) is the true display face; Baloo 2 is the licensed web stand-in until a Bloc web license is confirmed. Montserrat is the confirmed body face. */


:root{
/* Brand base — confirmed from the OSS Canva brand board 2026-08-03 */
--oss-sky:#28B0FF; /* OSS Sky Blue — the brand */
--oss-ice:#E4F5FF; /* Ice Blue — secondary surface */
--oss-coral:#F16060; /* Coral accent — sparingly */
--oss-navy:#112A4B; /* Brand Navy — body/heading text */
--oss-white:#FFFFFF;
/* Sky ramp */
--sky-50:#F0FAFF;
--sky-100:#E4F5FF;
--sky-200:#BFE7FF;
--sky-300:#8FD5FF;
--sky-400:#5CC3FF;
--sky-500:#28B0FF;
--sky-600:#0D9BF0;
--sky-700:#0B7FC7;
--sky-800:#0C5D93;
--sky-900:#0A3A5C;
/* Navy ramp */
--navy-500:#3D5573;
--navy-700:#1E3D63;
--navy-900:#112A4B;
/* Coral ramp */
--coral-100:#FDE7E7;
--coral-300:#F8A3A3;
--coral-500:#F16060;
--coral-700:#B12E2E; /* AA text-safe coral */
/* Semantic — surfaces */
--surface-page:#FFFFFF;
--surface-wash:var(--oss-ice); /* ice-blue section washes */
--surface-card:#FFFFFF;
--surface-brand:var(--oss-sky); /* full-bleed sky sections, footer */
--surface-navy:var(--oss-navy);
/* Semantic — text (body is NEVER sky blue: #28B0FF on white fails AA) */
/* BRAND EXCEPTION (Eli/OSS decision 2026-08-04): display headlines keep sky-500 on white/ice,
   and primary/coral buttons keep white labels, per the org's brand preference — a conscious
   WCAG AA exception limited to display-size headlines and button labels. Body/long-form text,
   links, and all other text remain AA-compliant. Do not "fix" these without a new decision. */
--text-heading:var(--oss-navy);
--text-display:var(--oss-sky); /* large display headlines only (>=32px bold) */
--text-body:var(--oss-navy);
--text-muted:var(--navy-500);
--text-accent:var(--coral-700); /* text-size coral */
--text-on-brand:#FFFFFF;
--text-on-wash:var(--oss-navy);
/* Semantic — interactive */
--interactive:var(--sky-500);
--interactive-hover:var(--sky-600);
--interactive-active:var(--sky-700);
--interactive-strong:var(--sky-800); /* AA-safe fill for small text on white (sky-700 was 4.31:1) */
--focus-ring:var(--sky-600);
--link:var(--sky-800); /* sky-700 on white = 4.31:1, just under AA */
--link-hover:var(--sky-900);
/* Semantic — status */
--success:#14713A; /* darkened from #15803D (4.49:1 on surface) to clear AA */
--success-surface:#E7F6EC;
--warn:#9A6200;
--warn-surface:#FDF3D9;
--danger:var(--coral-700);
--danger-surface:var(--coral-100);
/* Borders */
--border-subtle:#DCE7F0;
--border-strong:#B9CCDD;
}

:root{
/* Display = Bloc (Canva); web stand-in Baloo 2. Body = Montserrat. */
--font-display:'Baloo 2','Bloc','Montserrat',system-ui,sans-serif;
--font-body:'Montserrat',system-ui,-apple-system,sans-serif;
/* Weights */
--weight-display:800; /* bubble headlines are always heaviest */
--weight-bold:700;
--weight-semibold:600;
--weight-medium:500;
--weight-regular:400;
/* Scale */
--text-display-xl:64px; /* hero */
--text-display-lg:52px; /* page headline (live-site H1 ~52px) */
--text-display-md:40px; /* section headline */
--text-display-sm:28px; /* card/sub headline */
--text-title:22px; /* Montserrat 700 titles */
--text-body-lg:19px;
--text-body:17px; /* live-site body size */
--text-body-sm:15px;
--text-caption:13px;
--text-eyebrow:14px; /* uppercase eyebrow / sticker label */
/* Line heights */
--leading-display:0.95; /* tight bubble stacking, per live H1 0.88–0.95 */
--leading-title:1.2;
--leading-body:1.55;
/* Tracking */
--tracking-display:-0.02em; /* live H1 -2% */
--tracking-eyebrow:0.08em;
}
body{font-family:var(--font-body);color:var(--text-body);font-size:var(--text-body);line-height:var(--leading-body)}
a{color:var(--link)}
a:hover{color:var(--link-hover)}

:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
/* Layout */
--container-max:1120px;
--section-pad-y:var(--space-20);
--section-pad-y-mobile:var(--space-12);
--gutter:var(--space-6);
}

:root{
/* Radii */
--radius-pill:300px; /* buttons — live-site value, keep exact */
--radius-sticker:28px; /* tilted sticker plates (logo lockup scale) */
--radius-card:16px;
--radius-input:12px;
--radius-chip:999px;
/* Sticker tilt — the load-bearing motif. Plates tilt in alternating directions. */
--tilt-sticker:-2.5deg; /* @kind other */
--tilt-sticker-alt:1.5deg; /* @kind other */
--tilt-hover:-1deg; /* @kind other */
/* Shadows — soft navy-tinted, never gray */
--shadow-card:0 2px 8px rgba(17,42,75,.08),0 8px 24px rgba(17,42,75,.08);
--shadow-sticker:0 6px 16px rgba(17,42,75,.18);
--shadow-button:0 4px 12px rgba(40,176,255,.35);
--shadow-lift:0 12px 32px rgba(17,42,75,.16);
/* Motion */
--ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-spring:cubic-bezier(.34,1.56,.64,1); /* @kind other */
--duration-fast:150ms; /* @kind other */
--duration-base:250ms; /* @kind other */
--duration-slow:450ms; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
:root{--duration-fast:0ms; /* @kind other */ --duration-base:0ms; /* @kind other */ --duration-slow:0ms /* @kind other */}
}



/* Map brand tokens into Tailwind utilities (bg-oss-sky, text-oss-navy, …) */


.section {
  max-width: var(--container-max, 1120px);
  margin-inline: auto;
  /* matches the site's tightened rhythm (2026-08-12) */
  padding: var(--space-16, 64px) var(--gutter, 24px);
}

@keyframes fade-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveal.in { animation: fade-rise var(--duration-slow) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } }




/* The flow assumes it owns the page background; drop this when embedding. */
body { margin: 0; background: var(--surface-page); }

/* Mobile: the flow's header nav (unclassed, from the DS bundle) overflows
   below ~430px — hide the links, keep logo + Volunteer/Donate. Scoped with
   :not([class]) so site headers with their own burger logic are untouched. */
@media (max-width: 640px) {
  header nav:not([class]) { display: none !important; }
}