/* =====================================================================
   GSePC DESIGN FOUNDATION  (gsepc-design.css)
   Source of record: "GSePC Pollinator Census Design System" (Claude Design).
   Ported verbatim from tokens/{fonts,colors,typography,spacing,base}.css.
   Deployed 2026-06-22. Self-hosted fonts live in ../fonts/ (domain-relative).
   Every text/background pairing passes WCAG 2.1 AA. White text ONLY on purple.
   ===================================================================== */

/* ---- @font-face (self-hosted variable TTFs) ------------------------- */
@font-face{font-family:"Oswald";src:url("../fonts/Oswald.ttf") format("truetype-variations");font-weight:200 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Merriweather Sans";src:url("../fonts/MerriweatherSans.ttf") format("truetype-variations");font-weight:300 800;font-style:normal;font-display:swap;}
@font-face{font-family:"Merriweather Sans";src:url("../fonts/MerriweatherSans-Italic.ttf") format("truetype-variations");font-weight:300 800;font-style:italic;font-display:swap;}
@font-face{font-family:"Merriweather";src:url("../fonts/Merriweather.ttf") format("truetype-variations");font-weight:300 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Merriweather";src:url("../fonts/Merriweather-Italic.ttf") format("truetype-variations");font-weight:300 900;font-style:italic;font-display:swap;}

:root{
  /* ---- Core brand ---- */
  --gsepc-purple:#683088; --gsepc-purple-deep:#4A2070; --gsepc-gold:#F0C838;
  --gsepc-yellow:#F8D808; --gsepc-amber:#F2A41E; --gsepc-charcoal:#2E2A28;
  --gsepc-cream:#F7F2E4; --gsepc-sky:#C0E0E8; --gsepc-white:#FFFFFF;
  /* ---- Purple scale ---- */
  --purple-900:#341248; --purple-800:#4A2070; --purple-700:#5A2A7C; --purple-600:#683088;
  --purple-500:#7C44A0; --purple-300:#B08CC6; --purple-200:#D8C4E4; --purple-100:#ECE2F2; --purple-50:#F6F0FA;
  /* ---- Gold / amber ---- */
  --gold-700:#A8801A; --gold-600:#C99E1E; --gold-500:#F0C838; --gold-300:#F6DE84; --gold-100:#FCF2CC;
  --amber-700:#B5760E; --amber-500:#F2A41E; --amber-100:#FCE6C2;
  /* ---- Warm neutral ramp ---- */
  --neutral-0:#FFFFFF; --neutral-50:#FBF8F0; --neutral-100:#F7F2E4; --neutral-200:#ECE5D3;
  --neutral-300:#DBD2BC; --neutral-400:#B8AE98; --neutral-500:#8A8175; --neutral-600:#635C53;
  --neutral-700:#45403A; --neutral-800:#2E2A28; --neutral-900:#1C1916;
  /* ---- Sky ---- */
  --sky-300:#C0E0E8; --sky-200:#D6ECF1; --sky-100:#E9F4F7;
  /* ---- Status ---- */
  --status-success:#086848; --status-warning:#B5760E; --status-error:#983020; --status-info:#2C3357;
  /* ---- Semantic surfaces ---- */
  --surface-page:var(--gsepc-cream); --surface-card:var(--gsepc-white); --surface-raised:var(--neutral-50);
  --surface-sunken:var(--neutral-200); --surface-cool:var(--sky-100); --surface-brand:var(--gsepc-purple);
  --surface-brand-deep:var(--purple-800); --surface-inverse:var(--neutral-900);
  /* ---- Text ---- */
  --text-strong:var(--gsepc-charcoal); --text-body:var(--neutral-800); --text-muted:var(--neutral-600);
  --text-subtle:var(--neutral-500); --text-on-brand:var(--gsepc-white); --text-on-warm:var(--gsepc-charcoal);
  --text-brand:var(--gsepc-purple); --text-link:var(--purple-700); --text-link-hover:var(--purple-900);
  /* ---- Borders & focus ---- */
  --border-subtle:var(--neutral-300); --border-default:var(--neutral-400); --border-strong:var(--neutral-600);
  --border-brand:var(--gsepc-purple); --focus-ring:var(--gold-700);
  /* ---- Interactive ---- */
  --action-bg:var(--gsepc-purple); --action-bg-hover:var(--purple-700); --action-bg-active:var(--purple-800); --action-text:var(--gsepc-white);
  /* ---- Insect category accents (accent + AA ink) ---- */
  --cat-bumble-bee:#F8A020; --cat-bumble-bee-ink:var(--gsepc-charcoal);
  --cat-carpenter-bee:#1D3F50; --cat-carpenter-bee-ink:var(--gsepc-white);
  --cat-honey-bee:#D99A0B; --cat-honey-bee-ink:var(--gsepc-charcoal);
  --cat-small-bee:#007878; --cat-small-bee-ink:var(--gsepc-white);
  --cat-wasp:#983020; --cat-wasp-ink:var(--gsepc-white);
  --cat-fly:#C04828; --cat-fly-ink:var(--gsepc-white);
  --cat-butterfly:#F0C030; --cat-butterfly-ink:var(--gsepc-charcoal);
  --cat-other:#086848; --cat-other-ink:var(--gsepc-white);

  /* ---- Typography ---- */
  --font-display:"Oswald","Arial Narrow",system-ui,sans-serif;
  --font-ui:"Merriweather Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Merriweather",Georgia,"Times New Roman",serif;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --text-display:clamp(2.5rem,6vw + 1rem,4.5rem); --text-h1:clamp(2rem,4vw + 0.75rem,3.25rem);
  --text-h2:clamp(1.625rem,3vw + 0.5rem,2.5rem); --text-h3:clamp(1.375rem,2vw + 0.5rem,1.875rem);
  --text-h4:clamp(1.1875rem,1vw + 0.6rem,1.5rem); --text-lead:clamp(1.125rem,1vw + 0.75rem,1.375rem);
  --text-body-lg:1.125rem; --text-body-md:1rem; --text-body-sm:0.9375rem; --text-label:0.8125rem; --text-caption:0.75rem;
  --leading-tight:1.05; --leading-heading:1.15; --leading-snug:1.35; --leading-body:1.65; --leading-relaxed:1.8;
  --tracking-display:-0.01em; --tracking-overline:0.16em; --tracking-label:0.04em; --tracking-normal:0;
  --role-overline-font:var(--font-display); --role-overline-weight:var(--weight-medium); --role-overline-tracking:var(--tracking-overline);
  --role-heading-font:var(--font-display); --role-heading-weight:var(--weight-semibold);
  --role-body-font:var(--font-body); --role-ui-font:var(--font-ui);

  /* ---- Spacing / sizing ---- */
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:6rem;
  --touch-min:44px; --control-height:48px; --control-height-sm:40px;
  --container-max:1180px; --container-narrow:720px; --gutter:clamp(1rem,4vw,2.5rem);
  /* ---- Radii ---- */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-pill:999px; --radius-card:var(--radius-lg);
  --border-width:1px; --border-width-strong:2px; --focus-width:3px; --focus-offset:2px;
  /* ---- Shadows ---- */
  --shadow-xs:0 1px 2px rgba(46,42,40,0.08); --shadow-sm:0 2px 6px rgba(46,42,40,0.10);
  --shadow-md:0 6px 18px rgba(46,42,40,0.12); --shadow-lg:0 14px 34px rgba(46,42,40,0.16);
  --shadow-focus:0 0 0 var(--focus-width) var(--gold-700);
  /* ---- Motion ---- */
  --ease-standard:cubic-bezier(0.3,0,0.2,1); --ease-out:cubic-bezier(0.16,0.8,0.3,1);
  --duration-fast:120ms; --duration-base:220ms; --duration-slow:360ms;
  /* ---- Z ---- */
  --z-base:0; --z-raised:10; --z-sticky:100; --z-overlay:1000; --z-toast:1100;
}
@media (prefers-reduced-motion: reduce){:root{--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms;}}

/* ===========================================================================
   BASE — light reset + element defaults built on the tokens.
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;font-family:var(--font-body);font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,h5,h6{font-family:var(--role-heading-font);font-weight:var(--role-heading-weight);line-height:var(--leading-heading);color:var(--text-strong);margin:0 0 var(--space-4);text-wrap:balance;}
h1{font-size:var(--text-h1);line-height:var(--leading-tight);}
h2{font-size:var(--text-h2);} h3{font-size:var(--text-h3);} h4{font-size:var(--text-h4);}
p{margin:0 0 var(--space-4);text-wrap:pretty;}
a{color:var(--text-link);text-underline-offset:0.18em;text-decoration-thickness:from-font;}
a:hover{color:var(--text-link-hover);}
.gsepc-overline{font-family:var(--role-overline-font);font-weight:var(--role-overline-weight);letter-spacing:var(--role-overline-tracking);text-transform:uppercase;font-size:var(--text-label);color:var(--text-brand);line-height:1.2;}
.gsepc-prose{max-width:var(--container-narrow);}
.gsepc-prose p{font-size:var(--text-body-lg);}

/* ---- Accessibility ---- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--radius-xs);}
.gsepc-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* Skip link — hidden until focused, then pinned top-left on brand purple */
.gsepc-skip-link{position:absolute;left:var(--space-3);top:-100px;z-index:var(--z-toast);background:var(--gsepc-purple);color:var(--gsepc-white);font-family:var(--font-ui);font-weight:700;font-size:15px;padding:12px 18px;border-radius:var(--radius-md);text-decoration:none;transition:top var(--duration-fast) var(--ease-out);}
.gsepc-skip-link:focus,.gsepc-skip-link:focus-visible{top:var(--space-3);color:var(--gsepc-white);outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset);}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}
img{max-width:100%;height:auto;}

/* ---- Global layout helpers ---- */
.gsepc-container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter);}