/* ==========================================================================
   Benicia Girl Scouts — Design Tokens
   Derived from BSU brand guidelines + GSNorCal troop/SU logo guidelines.

   RULES THIS FILE ENFORCES
   - Only official Girl Scout palette colors. Council guidance: "Don't create
     new colors." No tints, no custom grays, no gradients.
   - Every text/background pair below meets WCAG AA (4.5:1 body, 3:1 large).
   - Girl Scout Green (#00b451) is only 2.75:1 on white and 2.75:1 under white
     text. It is a FILL color, never a text color, and never carries white text.
   ========================================================================== */

:root {

  /* ---- Raw palette (do not use directly in components; use roles below) --- */

  /* Primary */
  --gs-green:      #00b451;  /* Girl Scout Green — fill only, black text on it */
  --gs-forest:     #005640;  /* Forest Green — 8.73:1 on white. Text + fills.  */
  --gs-star:       #d5f267;  /* Star Green — light fill, black text on it      */
  --gs-black:      #000000;
  --gs-white:      #ffffff;

  /* Secondary — light fills. All require dark text. */
  --gs-cloud:      #d9d9d9;
  --gs-seafoam:    #a1edd5;
  --gs-sky:        #a0def1;
  --gs-crocus:     #ccb3fa;
  --gs-bubblegum:  #f7abd6;
  --gs-peach:      #fcb89d;
  --gs-sunshine:   #fff441;
  --gs-khaki:      #d5ca9f;
  --gs-stone:      #a8a8a8;

  /* Secondary — mid. Large text / fills only. */
  --gs-teal:       #00b2be;
  --gs-river:      #1496d4;
  --gs-violet:     #9e5fd6;
  --gs-fuchsia:    #fd329e;
  --gs-poppy:      #ee3124;
  --gs-flame:      #ff830c;
  --gs-gold:       #f7be00;

  /* Secondary — deep. Safe for body text on white and for fills w/ white text. */
  --gs-deep-cyan:  #006973;  /* 6.43:1 */
  --gs-ocean:      #004987;  /* 9.12:1 */
  --gs-deep-purple:#5c1f8b;  /* 10.38:1 */
  --gs-plum:       #af0061;  /* 7.01:1 */
  --gs-cherry:     #9c0000;  /* 8.70:1 */
  --gs-brown:      #763a16;
  --gs-desert:     #a86b1d;


  /* ---- Semantic color roles — USE THESE ---------------------------------- */

  /* Ocean (#004987) is promoted to a first-class role: it is the exact color of
     the wordmark in the header illustration, so using it throughout ties the
     art to the interface. Safe on white (9.12), Sky (6.17), Star Green (7.26),
     Sea Foam (6.77), Sunshine (7.93). Takes white (9.12) or Star Green (7.26). */
  --color-anchor:          var(--gs-ocean);

  /* Text */
  --color-text:            var(--gs-black);      /* 21:1 on white   */
  --color-text-secondary:  var(--gs-forest);     /* 8.73:1 on white */
  --color-heading:         var(--gs-ocean);      /* 9.12:1 on white */
  --color-text-on-dark:    var(--gs-white);
  --color-text-on-accent:  var(--gs-black);      /* on gs-green / star / pastels */

  /* Surfaces — Cloud gray is deliberately NOT used for section backgrounds.
     Tinted brand colors read as intentional; gray reads as unstyled. */
  --color-bg:              var(--gs-white);
  --color-bg-sky:          var(--gs-sky);        /* matches the illustration's sky */
  --color-bg-accent:       var(--gs-star);
  --color-bg-accent-alt:   var(--gs-seafoam);
  --color-bg-brand:        var(--gs-green);      /* black text required */
  --color-bg-dark:         var(--gs-ocean);      /* white text required */
  --color-bg-dark-alt:     var(--gs-forest);     /* white text required */

  /* Lines */
  --color-border:          var(--gs-cloud);
  --color-border-strong:   var(--gs-forest);
  --color-divider:         var(--gs-cloud);

  /* Links — Forest Green, always underlined in body copy */
  --color-link:            var(--gs-forest);
  --color-link-hover:      var(--gs-black);
  --color-link-on-dark:    var(--gs-star);       /* 6.95:1 on Forest */

  /* Buttons
     Primary uses Girl Scout Green per council guidance that it appear
     prominently — with BLACK text (7.65:1). White text here fails AA. */
  --color-btn-primary-bg:        var(--gs-green);
  --color-btn-primary-text:      var(--gs-black);
  --color-btn-primary-bg-hover:  var(--gs-forest);
  --color-btn-primary-text-hover:var(--gs-white);

  --color-btn-secondary-bg:      transparent;
  --color-btn-secondary-text:    var(--gs-forest);
  --color-btn-secondary-border:  var(--gs-forest);

  /* Feedback */
  --color-error:           var(--gs-cherry);     /* 8.70:1 */
  --color-success:         var(--gs-forest);
  --color-warning-bg:      var(--gs-sunshine);   /* black text */

  /* Focus — 3px, must stay visible. Never remove outlines. */
  --color-focus:           var(--gs-forest);
  --focus-ring:            3px solid var(--color-focus);
  --focus-offset:          2px;


  /* ---- Typography -------------------------------------------------------- */
  /* Two families only. Newsreader was removed entirely — as a serif it read as
     out of place against the header wordmark, and Girl Scout brand type is all
     sans (Trefoil Sans, Girl Scout Display, Helvetica). Dropping it also cuts a
     webfont request.

     Urbane Rounded (Adobe Fonts / Typekit) was chosen because the header
     illustration's wordmark is a heavy rounded geometric sans in Ocean;
     Urbane Rounded Black echoes it. The kit ships 600/700/900 only, so
     display type uses 700 and 900 — avoid 800, which the browser would
     substitute up to 900 and flatten the h2/h3 step. */

  --font-display: "urbane-rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --font-heading: var(--font-display);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);
  --font-quote:   var(--font-display);

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800; /* unused for display type — Urbane Rounded has no 800 */
  --fw-black:     900;

  /* Fluid scale: min at 360px viewport, max at 1200px.
     History, because this has been retuned twice and the reasoning matters:
     H2 started at 38→64 on the theory that the site has exactly one H1, so
     section headings are the real workhorse. That held while Home and About
     were the only pages; on the content-dense interior pages (Camporee has
     five H2s with H3s under them) 64px crowded the page, so it went to 32→54
     and the whole scale sat at 96 / 54 / 34.

     Now down two further steps to 72 / 40 / 26. Two reasons. Urbane Rounded
     replaced Nunito and runs wider, so it read a size larger than Nunito did
     at identical numbers. And the homepage H1 is set in caps, which is wider
     again — at 96px the wordmark wrapped on common laptop widths.

     H3 came down with H2 deliberately. The H2→H3 step is 1.54 here; leaving
     H3 at 34 while H2 dropped to 40 would have flattened it to 1.18 and the
     two levels would stop reading as distinct. Anything that shrinks H2 in
     future has to move H3 as well.

     NOTE the spaces around `+` — see README. `1.42rem+1.43vw` silently kills
     the whole declaration and headings collapse to body size. */
  --fs-display:   clamp(2.25rem, 1.13rem + 4.98vw, 4.5rem);   /* 36 → 72 */
  --fs-h1:        clamp(2.25rem, 1.13rem + 4.98vw, 4.5rem);   /* 36 → 72 */
  --fs-h2:        clamp(1.75rem, 1.42rem + 1.43vw, 2.5rem);   /* 28 → 40 */
  --fs-h3:        clamp(1.375rem, 1.24rem + 0.6vw, 1.625rem); /* 22 → 26 */
  --fs-h4:        clamp(1.25rem, 1.18rem + 0.33vw,1.5rem);    /* 20 → 24 */
  --fs-body-lg:   1.25rem;    /* 20 */
  --fs-body:      1.0625rem;  /* 17 */
  --fs-small:     0.9375rem;  /* 15 */
  --fs-caption:   0.8125rem;  /* 13 */

  /* Tighter leading and negative tracking are what make large type read as
     confident rather than merely big. */
  --lh-display:  0.95;
  --lh-h1:       1.0;
  --lh-h2:       1.08;
  --lh-h3:       1.2;
  --lh-body:     1.65;

  --ls-display:  -0.028em;
  --ls-h1:       -0.028em;
  --ls-h2:       -0.018em;
  --ls-h3:       -0.012em;
  /* The caps H1 on the homepage is the exception: caps carry tight tracking
     worse than mixed case, so .hero-copy h1 eases this back. */
  --ls-h1-caps:  -0.012em;
  --ls-eyebrow:   0.1em;
  --ls-button:    0.005em;

  --measure:     66ch;   /* body copy 60–75 characters */
  --measure-narrow: 54ch;

  /* Shared measure for section headings and the lede paragraph beneath them,
     so a long H2 wraps on the same line length as the copy it introduces
     instead of running the full container width.

     Deliberately a rem value, not `ch`. `ch` resolves against the element's OWN
     font size, so `58ch` on a 54px heading is nearly three times the width of
     `58ch` on the 20px lede — using it on both would not align them. 43.5rem is
     the width 58ch resolves to at --fs-body-lg, so the lede is unchanged. */
  --measure-lede: 43.5rem;   /* 696px ≈ 58ch at 20px */


  /* ---- Spacing — 8px system ---------------------------------------------- */

  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* Reduced from clamp(48px, 6vw, 96px). At 96px a section carried 192px of its
     own padding, and .rule added another 192px of margin on top of that — over
     340px of empty space between two blocks of text. The dividers are gone and
     tinted section backgrounds now do the separating, so the padding no longer
     has to prove where one section ends. */
  --section-y: clamp(var(--space-7), 5vw, var(--space-8));   /* 48 → 64 */


  /* ---- Layout ------------------------------------------------------------ */

  --container:       1180px;
  --container-text:  760px;
  --gutter:          clamp(var(--space-4), 4vw, var(--space-6));

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --pill:        999px;   /* alias used throughout site.css */

  /* Frame shape — concave corners, from the Girl Scout shape system.
     Implemented with corner masks, not border-radius. See .frame in the
     stylesheet. Keep container padding >= this value so text clears the cut. */
  --frame-cut: 26px;

  /* Frame is the site's only decorative silhouette. Arch and leaf shapes were
     trialled alongside it and dropped — a single shape reads as deliberate,
     several read as indecision. Card groups that aren't Frame use a plain
     --radius-md or square corners. */

  /* Council guidance prohibits gradients; shadows kept minimal and neutral. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);

  --transition: 140ms ease;

  --nav-height: 72px;
}

/* ==========================================================================
   VERIFIED CONTRAST RATIOS (WCAG 2.1)
   AA needs 4.5:1 for text under 24px, 3:1 for 24px+ / bold 19px+, 3:1 for UI.

   PASS — safe for body text
     Black on white ................................. 21.00:1
     Forest Green on white ........................... 8.73:1
     Ocean on white .................................. 9.12:1
     Deep Purple on white ........................... 10.38:1
     Cherry on white ................................. 8.70:1
     Plum on white ................................... 7.01:1
     Deep Cyan on white .............................. 6.43:1
     White on Forest Green ........................... 8.73:1
     Star Green on Forest Green ...................... 6.95:1
     Forest Green on Star Green ...................... 6.95:1
     Forest Green on Sea Foam ........................ 6.48:1
     Black on Girl Scout Green ....................... 7.65:1
     Black on Star Green ............................ 16.73:1

   FAIL — do not use for text
     White on Girl Scout Green ....................... 2.75:1  ✗
     Girl Scout Green on white ....................... 2.75:1  ✗
     Girl Scout Green on Forest Green ................ 3.18:1  ✗ (large only)
     Teal on white ................................... 2.59:1  ✗
     Flame on white .................................. 2.47:1  ✗
     Stone on white .................................. 2.31:1  ✗
     Gold / Sunshine / Star Green / all pastels on white ...  ✗

   LARGE TEXT ONLY (24px+ or bold 19px+)
     Violet on white ................................. 4.15:1
     Poppy on white .................................. 4.12:1
     Fuchsia on white ................................ 3.43:1
     River on white .................................. 3.31:1
   ========================================================================== */