/* ═══════════════════════════════════════════════════════════════════
   The Green Border — Brand Tokens
   Single source of truth for the site palette. Loaded FIRST on every
   page (before each page's inline <style> and before liquid-glass.css)
   so every layer can consume the same variables.

   The scheme is two brand colors:
     • Olive green  #558203  — the "Green" in Green Border
     • Desert cream #FFF8B9  — the warm light that pairs with it

   Everything else in this file is a tint/shade of those two hues,
   generated so that each role has a variant that clears WCAG AA.

   The light canvas is a gradient (#FFFDF0 → #FBF6E0 → #F7F3E2), so every
   ratio below is measured against its DARKEST stop, #F7F3E2 — the worst
   case a reader can actually land on. Measuring against #FFFDF0 flatters
   the numbers by ~8% and lets borderline colors pass on paper while
   failing at the bottom of the page.

   Contrast (vs. the darkest light-canvas stop #F7F3E2):
     --gb-green-500 #558203  4.1:1   large text, icons, fills only
     --gb-green-600 #476D03  5.5:1   AA for all text
     --gb-green-700 #375302  7.9:1   AA for all text
     --gb-cream-700 #6B6224  5.6:1   AA for all text (the old "gold" role)
     --gb-ink-300   #5F6749  5.2:1   AA for the muted/secondary text role
   Contrast (vs. the dark canvas #0A0A0A). The site is all-light now;
   these are kept because the dark values still appear in chart fills
   and in og imagery:
     --gb-cream-200 #FFF8B9 18.3:1
     --gb-green-300 #AFD456 11.7:1
     --gb-green-400 #7FAB16  7.3:1

   Two rules that the palette cannot enforce on its own:
     • A cream fill (cream-50…cream-500) NEVER takes white text — white
       on #DCCF6E is 1.6:1. Cream fills take --gb-on-accent.
     • A green fill only takes white text at green-500 and deeper.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Olive green scale (hue 81°) ── */
  --gb-green-50:  #f5fae6;
  --gb-green-100: #e7f3c4;
  --gb-green-200: #d0e693;
  --gb-green-300: #afd456;
  --gb-green-400: #7fab16;
  --gb-green-500: #558203; /* BRAND */
  --gb-green-600: #476d03;
  --gb-green-700: #375302;
  --gb-green-800: #2a3f02;
  --gb-green-900: #1c2a01;

  /* ── Desert cream scale (hue 53°) ── */
  --gb-cream-50:  #fffdf0;
  --gb-cream-100: #fffbdc;
  --gb-cream-200: #fff8b9; /* BRAND */
  --gb-cream-300: #f2e895;
  --gb-cream-400: #dccf6e;
  --gb-cream-500: #b9ab47;
  --gb-cream-600: #8a7c2e;
  --gb-cream-700: #6b6224;
  --gb-cream-800: #4a431a;

  /* ── Warm neutral ink (olive-tinted grays) ──
     ink-300 is the lightest ink allowed to carry text. It sits at the
     point where it still clears 4.5:1 on the darkest canvas stop; the
     previous, lighter value measured 4.4:1 there and took every muted
     label on the site — footers, chart ticks, nav — down with it. */
  --gb-ink-900: #22280f;
  --gb-ink-700: #31371c;
  --gb-ink-500: #4b5233;
  --gb-ink-300: #5f6749;


  /* ── Semantic roles ──
     Use these, not the raw scales, in page-level CSS. */
  --gb-brand: var(--gb-green-500);
  --gb-brand-text: var(--gb-green-700);   /* brand color at body-text size */
  --gb-brand-on-dark: var(--gb-green-400);
  --gb-accent: var(--gb-cream-200);
  --gb-accent-text: var(--gb-cream-700);  /* cream at body-text size */
  --gb-accent-on-dark: var(--gb-cream-200);

  --gb-surface: var(--gb-cream-50);
  --gb-surface-alt: var(--gb-cream-100);
  --gb-canvas-top: var(--gb-cream-50);   /* lightest stop of the canvas */
  --gb-canvas-end: #f7f3e2;              /* darkest stop — the AA baseline */
  --gb-on-brand: var(--gb-cream-100);     /* text on a green fill */
  /* Text on a cream fill. green-900 rather than green-800 so it still
     clears AA on cream-500, the darkest fill in the accent's range. */
  --gb-on-accent: var(--gb-green-900);

  /* Status colors stay outside the brand: growth/decline and warnings
     must not read as decoration. */
  --gb-positive: var(--gb-green-600);
  --gb-negative: #be123c;
  --gb-warning: var(--gb-cream-700);

  /* ── Data-viz ramp ──
     Ordered for categorical series; alternates value and hue so the
     series stay separable in grayscale and for color-vision deficiency. */
  --gb-viz-1: #558203;
  --gb-viz-2: #dccf6e;
  --gb-viz-3: #2a3f02;
  --gb-viz-4: #afd456;
  --gb-viz-5: #8a7c2e;
  --gb-viz-6: #7fab16;
  --gb-viz-7: #6b6224;
  --gb-viz-8: #d0e693;
}

/* ═══════════════════════════════════════════════════════════════════
   Baseline accessibility — shared by every page, including the ones
   that don't load the liquid-glass design system.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Focus visibility ──
   The floor for every page, including the dark education/article pages
   that don't load liquid-glass.css — several of them styled only
   `a:focus-visible`, leaving buttons, inputs and <details> with no
   visible ring at all. green-500 is the one brand tone that clears the
   3:1 non-text minimum on BOTH the cream canvas (4.1:1) and the
   charcoal one (4.3:1). Pages that set their own ring still win: this
   rule is unqualified and every page's CSS loads after it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gb-green-500, #558203);
  outline-offset: 2px;
}

/* ── Skip link ──
   Off-screen until focused, then pinned to the top-left. Pages that
   define their own .skip-link later in the cascade still win; this is
   the floor, not an override. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10050;
  background: var(--gb-green-700, #375302);
  color: var(--gb-cream-100, #fffbdc);
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* The skip target is given tabindex="-1" so focus actually lands there;
   clear the resulting outline and keep it out from under the fixed
   glass header. */
#main-content {
  scroll-margin-top: 7rem;
}
#main-content:focus {
  outline: none;
}

/* ── Reduced motion ──
   The site leans on drifting aurora, reveal transitions, and a spinning
   logo sparkle. Honor the OS setting everywhere, not just on the pages
   that happen to load liquid-glass.css. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}