/* ==========================================================================
   GSA — Design tokens
   Source of truth: GSA 8th Annual Meet palette sheet.
   Distribution target: 65% white/soft backgrounds · 20% mint & aqua surfaces
   · 10% green brand colours · 5% dark text & accents.
   ========================================================================== */

:root {
  /* --- Background colours ------------------------------------------------ */
  --pure-white: #ffffff;
  --eco-white: #fcfefc;
  --cloud-white: #f8fcf9;
  --mint-white: #f3fbf7;
  --aqua-mist: #f1fcfb;
  --soft-mint: #edf9f4;
  --nature-mist: #e9f7f2;

  /* --- Surface colours ---------------------------------------------------- */
  --surface-1: #f5fbf7;
  --surface-2: #f0f9f6;
  --surface-3: #ecfaf8;
  --surface-4: #e8f7f2;
  --surface-5: #e3f5ef;

  /* --- Primary green scale ------------------------------------------------ */
  --green-100: #eaf8ee;
  --green-200: #d6f2dd;
  --green-300: #b5e7c0;
  --green-400: #83d699;
  --green-500: #5ccb6f;
  --green-600: #38a169;
  --green-700: #2f855a;

  /* --- Sea green scale ---------------------------------------------------- */
  --sea-100: #eafbf8;
  --sea-200: #d5f7f0;
  --sea-300: #afefe2;
  --sea-400: #7adfd0;
  --sea-500: #3cbfa8;
  --sea-600: #249986;
  --sea-700: #1a7062;

  /* --- Aqua scale --------------------------------------------------------- */
  --aqua-100: #eefdfd;
  --aqua-200: #dcf9fa;
  --aqua-300: #bceff2;
  --aqua-400: #8cecf3;
  --aqua-500: #62d6c9;
  --aqua-600: #32c0c0;
  --aqua-700: #15939a;

  /* --- Accents (use sparingly) -------------------------------------------- */
  --innovation-cyan: #4ed8e7;
  --clean-energy: #6adbc8;
  --nature-green: #5ccb6f;
  --sustainability-blue: #62d6c9;

  /* --- Neutrals ----------------------------------------------------------- */
  --light-gray: #f5f7f6;
  --border: #dde9e3;
  --divider: #cfe1d9;

  /* --- Text --------------------------------------------------------------- */
  --text-primary: #183b33;
  --text-secondary: #4b6b63;
  --text-muted: #76908a;
  --text-disabled: #a7b8b2;

  /* --- Gradients ---------------------------------------------------------- */
  --gradient-hero: linear-gradient(135deg, #f8fcf9 0%, #d5f7f0 100%);
  --gradient-button: linear-gradient(120deg, #38a169 0%, #3cbfa8 100%);
  --gradient-highlight: linear-gradient(120deg, #5ccb6f 0%, #62d6c9 100%);

  /* --- Semantic aliases used across the build ----------------------------- */
  --paper: var(--cloud-white);          /* soft band */
  --paper-2: var(--pure-white);         /* clean band */
  --paper-3: var(--soft-mint);          /* mint band */
  --mint: var(--nature-mist);
  --aqua: var(--aqua-mist);

  --ink: var(--text-primary);
  --ink-body: var(--text-secondary);
  --ink-muted: var(--text-muted);
  --line-light: var(--border);

  /* Deep surface — the 5% dark accent (footer, stats band, closing CTA) */
  --deep: #183b33;
  --deep-2: #183b33;   /* same swatch; depth comes from overlays, not a new colour */
  --deep-line: rgba(255, 255, 255, 0.14);
  --on-deep: #ffffff;
  --on-deep-body: rgba(233, 247, 242, 0.82);
  --on-deep-muted: rgba(233, 247, 242, 0.58);

  /* Interactive colours — chosen from the palette for AA contrast on white */
  --brand: var(--sea-700);              /* solid CTA background */
  --brand-hover: var(--deep);
  --brand-ink: var(--sea-700);          /* links, eyebrows, small accent text */
  --brand-soft: var(--sea-500);         /* graphic accents on dark surfaces */
  --brand-tint: rgba(60, 191, 168, 0.14);

  --rule: var(--gradient-highlight);    /* signature underline / divider */

  /* Back-compat aliases (older selectors still reference these names) */
  --gsa-rule: var(--rule);
  --on-dark: var(--on-deep);
  --on-dark-body: var(--on-deep-body);
  --on-dark-muted: var(--on-deep-muted);
  --gsa-line-dark: var(--deep-line);

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --font-quote: "Lora", Georgia, "Times New Roman", serif;

  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.16vw, 0.82rem);
  --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.075rem);
  --fs-lead: clamp(1.06rem, 0.98rem + 0.42vw, 1.3rem);
  --fs-h6: clamp(1rem, 0.97rem + 0.16vw, 1.1rem);
  --fs-h5: clamp(1.1rem, 1.03rem + 0.3vw, 1.3rem);
  --fs-h4: clamp(1.25rem, 1.13rem + 0.5vw, 1.6rem);
  --fs-h3: clamp(1.45rem, 1.24rem + 0.9vw, 2.1rem);
  --fs-h2: clamp(1.9rem, 1.45rem + 2.1vw, 3.4rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3.7vw, 5.1rem);
  --fs-stat: clamp(2.6rem, 1.9rem + 3vw, 4.4rem);

  --lh-tight: 1.06;
  --lh-heading: 1.14;
  --lh-body: 1.72;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.16em;

  /* --- Space ------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --section-y: clamp(3.75rem, 2.5rem + 5vw, 7.5rem);
  --section-y-tight: clamp(2.75rem, 2rem + 3vw, 5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 3rem);
  --container: 1320px;
  --container-narrow: 940px;

  /* --- Surfaces --------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(24, 59, 51, 0.05);
  --shadow-md: 0 18px 40px -22px rgba(24, 59, 51, 0.28);
  --shadow-lg: 0 34px 80px -40px rgba(24, 59, 51, 0.3);
  --shadow-deep: 0 30px 70px -34px rgba(18, 49, 42, 0.55);

  /* --- Motion ----------------------------------------------------------- */
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(0.67, 0.04, 0.3, 0.91);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 84px;
}

@media (max-width: 991px) {
  :root { --header-h: 72px; }
}