/* ==========================================================================
   IIRF Design Tokens — v3 "Living Systems"
   Forest-green surfaces, mint breathing bands, harvest gold.
   Display: Bricolage Grotesque. Body: Instrument Sans.
   Dark-anchored rhythm, gradient mesh, grain, glass.
   All text/background pairs used in the build meet WCAG AA (4.5:1).
   ========================================================================== */

/* ----- Self-hosted fonts (no external CDN request) ----- */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Brand green ----- */
  --green-950: #071f16;  /* deepest — hero base, glass header tint */
  --green-900: #0b3b2a;  /* dark anchor bands, footer */
  --green-800: #14532d;  /* partnership band, hero scrim */
  --green-700: #15803d;  /* primary buttons, links, headings on light */
  --green-600: #1e8e47;  /* hover */
  --green-500: #34a35c;

  --sage-400: #6bb894;   /* logo sage — eyebrows/accents on dark */
  --sage-300: #8fcfa8;   /* stat numerals on dark */

  --teal-700: #1c6b62;   /* logo teal — secondary icons, links */
  --teal-600: #22857a;

  --mint-200: #cfe8da;
  --mint-100: #e7f4ec;   /* icon tiles, chips */
  --mint-050: #f3f9f5;   /* alternating section bands */

  /* ----- Harvest gold (single sharp accent) ----- */
  --gold-700: #7c4a06;
  --gold-600: #a16207;   /* accent on light — 5.3:1 on white */
  --gold-500: #c08a1e;
  --gold-400: #d6a63c;   /* accent + CTA button on dark */
  --gold-300: #e8c477;
  --gold-200: #f2dda8;   /* accents on mid-dark glass — gold-300 is only 4.2:1 there */
  --gold-100: #fbf1dc;

  /* ----- Ink (text) ----- */
  --ink-900: #0f1a14;
  --ink-800: #1b2a22;
  --ink-700: #2b3b33;
  --ink-500: #4f6459;
  --ink-400: #5c7168;
  --ink-300: #97a8a0;

  /* ----- Neutral surfaces ----- */
  --surface-000: #ffffff;
  --surface-050: #fafcfb;
  --surface-100: #f3f9f5;
  --surface-200: #e8f0eb;
  --surface-300: #d5e2da;

  --red-600: #b42318;
  --white: #ffffff;

  /* ----- Semantic surfaces ----- */
  --bg-page: var(--surface-050);
  --bg-card: var(--surface-000);
  --bg-subtle: var(--mint-050);
  --bg-muted: var(--surface-200);
  --bg-dark: var(--green-900);
  --bg-dark-alt: var(--green-800);
  --bg-deep: var(--green-950);

  /* ----- Semantic text ----- */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted: var(--ink-400);
  --text-heading: var(--green-900);
  --text-on-dark: rgba(255, 255, 255, 0.94);
  --text-on-dark-muted: rgba(255, 255, 255, 0.76);

  /* ----- Semantic lines ----- */
  --border: var(--surface-200);
  --border-strong: var(--surface-300);
  --border-on-dark: rgba(255, 255, 255, 0.16);
  --rule-accent: var(--green-700);

  /* ----- Semantic action ----- */
  --accent: var(--green-700);
  --accent-bright: var(--sage-400);
  --btn-primary-bg: var(--green-700);
  --btn-primary-bg-hover: var(--green-800);
  --link: var(--green-700);
  --link-hover: var(--green-900);

  /* ==========================================================================
     Texture — gradient mesh + film grain
     The mesh is three low-alpha radial gradients layered over a deep base; the
     grain is an inline feTurbulence SVG so it costs no HTTP request.
     ========================================================================== */

  --mesh-deep:
    radial-gradient(120% 90% at 12% 8%, rgba(28, 107, 98, 0.55) 0%, rgba(28, 107, 98, 0) 58%),
    radial-gradient(90% 80% at 88% 18%, rgba(21, 128, 61, 0.42) 0%, rgba(21, 128, 61, 0) 62%),
    radial-gradient(70% 70% at 72% 96%, rgba(214, 166, 60, 0.20) 0%, rgba(214, 166, 60, 0) 60%);

  --mesh-band:
    radial-gradient(100% 120% at 0% 0%, rgba(34, 133, 122, 0.45) 0%, rgba(34, 133, 122, 0) 55%),
    radial-gradient(90% 100% at 100% 100%, rgba(214, 166, 60, 0.22) 0%, rgba(214, 166, 60, 0) 55%);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* ----- Glass ----- */
  --glass-blur: 18px;
  --glass-sat: 165%;
  --glass-light: rgba(255, 255, 255, 0.10);
  --glass-light-border: rgba(255, 255, 255, 0.22);
  --glass-dark: rgba(7, 31, 22, 0.62);
  --glass-dark-border: rgba(255, 255, 255, 0.12);
  --glass-header: rgba(7, 31, 22, 0.72);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.25);

  /* ----- Typography ----- */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ------------------------------------------------------------------------
     FLUID TYPE SCALE  —  HOW TO CHANGE A HEADING SIZE YOURSELF

     Every heading on all fourteen pages takes its size from one of the tokens
     below. Change a token here and the whole site follows — you never have to
     hunt through the pages.

     Which token drives what:

         --fs-4xl   the big homepage hero headline
                    ("Building a Better Future Through Innovation…")
         --fs-3xl   the h1 at the top of every other page
                    ("About IIRF", "Events", "Membership")
         --fs-2xl   every section heading  ("What We Do", "Our Focus Areas")
         --fs-xl    card and sub-section headings  ("Our Vision", "Mission")
         --fs-lg    small card titles
         --fs-md    lead paragraphs and section intros
         --fs-base  ordinary body text

     Each one reads  clamp(SMALLEST, GROWS-WITH-SCREEN, LARGEST):

         --fs-4xl: clamp(2.125rem, 2.6vw + 1.3rem, 3.25rem);
                         ^phone      ^in between      ^desktop

     To make the hero smaller on desktop, lower the LAST number only. To make
     it smaller on phones too, lower the first as well. 1rem = 16px, so
     3.25rem = 52px. Leave the middle value alone unless the heading starts
     jumping about as you resize the window.

     Save the file and hard-refresh (Ctrl+Shift+R). No rebuild needed — CSS is
     not generated. Upload  css/tokens.css  on its own to publish the change.

     Sizes were reduced across the board in revision 2 at the client's request
     (Changes.txt items 1, 4, 6, 10, 12): the hero came down from 72px to 52px
     on desktop, and section headings from 42px to 34px.
     ------------------------------------------------------------------------ */
  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: clamp(1.1875rem, 0.4vw + 1.08rem, 1.3125rem);   /* 19 → 21px */
  --fs-xl: clamp(1.375rem, 0.65vw + 1.21rem, 1.625rem);    /* 22 → 26px */
  --fs-2xl: clamp(1.625rem, 1.1vw + 1.35rem, 2.125rem);    /* 26 → 34px */
  --fs-3xl: clamp(1.875rem, 1.5vw + 1.5rem, 2.5rem);       /* 30 → 40px */
  --fs-4xl: clamp(2.125rem, 2.6vw + 1.5rem, 3.25rem);      /* 34 → 52px */
  --fs-mega: clamp(2.5rem, 4.6vw, 4.5rem);   /* stat numerals, CTA display */

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.65;
  --lh-relaxed: 1.78;

  --measure: 66ch;

  /* ----- Space (8px base) ----- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;

  /* Section rhythm — the vertical breathing room above and below every section.
     Two stacked sections each contribute this, so the visible gap between them
     is twice the value.

     Tightened in revision 1 from a 7rem cap, and again in revision 2 at the
     client's request (Changes.txt items 5, 9, 23 — see SS 6 and SS 9): 4.5rem
     each side put 144px between sections, which read as dead space. Lower this
     one number to tighten the whole site's rhythm at once; do not add per-section
     margins, or the twelve pages drift out of step with each other. */
  --section-y: clamp(2.25rem, 3.4vw, 3.5rem);

  /* ----- Layout ----- */
  --container: 1280px;
  --container-wide: 1440px;   /* reserved for genuinely edge-to-edge blocks */
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ----- Radius / shadow — soft, organic ----- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;
  --r-full: 999px;
  --r-leaf: 0 62% 0 62%;   /* the logo leaf silhouette */
  --r-drop: 58% 42% 55% 45% / 48% 52% 48% 52%;  /* waterdrop blob */

  --shadow-sm: 0 1px 3px rgba(11, 59, 42, 0.05);
  --shadow-md: 0 3px 14px rgba(11, 59, 42, 0.07);
  --shadow-lg: 0 18px 44px rgba(11, 59, 42, 0.12);
  --shadow-xl: 0 32px 80px rgba(7, 31, 22, 0.28);
  --shadow-glass: 0 24px 60px rgba(7, 31, 22, 0.34);

  --header-h: 80px;
  --header-h-scrolled: 64px;

  /* ----- Motion ----- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur: 220ms;
  --dur-slow: 620ms;
  --dur-reveal: 900ms;
  --stagger: 70ms;
}