/* ── Fonts (bundled, works offline at the venue) ───────────────────────── */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('/fonts/inter-latin-800-normal.woff2') format('woff2'); }

@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('/fonts/nunito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('/fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('/fonts/nunito-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url('/fonts/nunito-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lilita One'; font-weight: 400; font-display: swap; src: url('/fonts/lilita-one-latin-400-normal.woff2') format('woff2'); }

/* ── Design tokens: sampled from the FOREST-PKG Ecosystem Map ─────────── */
:root {
  --slate-950: #1c2927;
  --slate-900: #253634;
  --slate-800: #344746;  /* brand dark (map banners, footer) */
  --slate-700: #435a58;
  --slate-500: #6b7f7c;
  --slate-300: #b4c1bf;
  --slate-100: #e6ecea;
  --slate-50:  #f3f6f5;

  --lime-700: #5f8f22;
  --lime-600: #74a92e;
  --lime-500: #8ec640;   /* brand green (map pills, legend) */
  --lime-200: #d3eab1;
  --lime-50:  #f2f9e8;

  --gold-500: #f2c230;   /* "Coming soon" signs */
  --gold-100: #fdf3d3;
  --wood-700: #6b5136;
  --wood-400: #a88361;
  --cream:    #f6efe1;   /* trailhead sign */
  --sky:      #bad8e7;

  --red-600:  #c8452f;
  --red-50:   #fdeeea;

  --ink:      #1f2d2b;
  --ink-2:    #465956;
  --muted:    #71817e;
  --line:     #e2e8e6;
  --paper:    #ffffff;
  --bg:       #eef3f1;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(28, 41, 39, .06), 0 1px 3px rgba(28, 41, 39, .08);
  --shadow:    0 4px 12px rgba(28, 41, 39, .08), 0 12px 32px rgba(28, 41, 39, .10);
  --shadow-lg: 0 20px 60px rgba(28, 41, 39, .28);
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--lime-500); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: var(--h); padding: 0 1.4em;
  border: 0; border-radius: 999px;
  font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  transition: transform .15s var(--ease-out), box-shadow .2s, background .2s, opacity .2s;
  user-select: none; -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--lime-500); color: var(--slate-950); box-shadow: 0 6px 16px rgba(116, 169, 46, .35); }
.btn-primary:hover:not([disabled]) { background: #99d04a; }
.btn-dark { background: var(--slate-800); color: #fff; }
.btn-dark:hover:not([disabled]) { background: var(--slate-700); }
.btn-ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover:not([disabled]) { background: var(--slate-50); }
.btn-danger { background: var(--red-600); color: #fff; box-shadow: 0 6px 16px rgba(200, 69, 47, .28); }
.btn-danger:hover:not([disabled]) { background: #a8371f; }
.btn-lg { --h: 60px; font-size: 1.125rem; padding: 0 2em; }
.btn-sm { --h: 40px; font-size: .9rem; padding: 0 1.1em; }
.btn-block { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .8em; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pill-lime { background: var(--lime-500); color: var(--slate-950); }
.pill-dark { background: var(--slate-800); color: #fff; }
.pill-gold { background: var(--gold-500); color: var(--slate-950); }
.pill-soft { background: var(--lime-50); color: var(--lime-700); }

.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-700); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Test copy marking (TEST_ENVIRONMENT=true). Clicks pass through it. */
.test-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 4px 14px;
  border-radius: 0 0 10px 10px;
  background: repeating-linear-gradient(-45deg, #f2c230 0 12px, #e0ad12 12px 24px);
  color: #1f1a10;
  font: 800 12px/1.4 var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  width: max-content;
  max-width: calc(100vw - 32px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  pointer-events: none;
}
@media (max-width: 480px) { .test-banner { font-size: 10px; padding: 3px 10px; } }