/* ==========================================================================
   LAME GUY — design tokens
   Every colour here is sampled from the canonical coin + character artwork.
   Nothing neon. Nothing gradient-soup. One system, used everywhere.
   ========================================================================== */

:root {
  /* --- surface: warm near-black, biased green so it sits under the sage --- */
  --ink-950: #070806;
  --ink-900: #0a0b09;   /* page */
  --ink-850: #0e100c;
  --ink-800: #131610;   /* panel */
  --ink-700: #191d15;   /* raised panel */
  --ink-600: #23281e;   /* hairline / border */
  --ink-500: #333a2b;   /* strong border */

  /* --- sage: Lame Guy's sweatshirt (#788870 is the sampled value) --- */
  --sage-300: #a3b19a;
  --sage-400: #8b9b82;
  --sage-500: #788870;
  --sage-600: #5d6a56;
  --sage-700: #414a3d;
  --sage-900: #1b2018;

  /* --- gold: the coin (#e0a838 sampled, #f0c050 highlight) --- */
  --gold-300: #f0c050;
  --gold-400: #e0a838;
  --gold-500: #b5842a;
  --gold-700: #6b4e19;
  --gold-900: #2a1f0c;

  /* --- rust: the shorts --- */
  --rust-400: #a05048;
  --rust-600: #6e362f;

  /* --- bone: warm off-white --- */
  --bone-100: #f2ecde;
  --bone-200: #ded7c6;
  --bone-300: #b9b2a1;
  --bone-400: #8e8878;   /* muted body text  ~5.5:1 on ink-900 */
  --bone-500: #6f6a5c;   /* dim / decorative */

  /* --- signal: used sparingly, they mean something --- */
  --go-400:  #6bd46b;    /* "we're so back" */
  --go-900:  #10240f;
  --warn-400:#e0a838;
  --bad-400: #d0483c;
  --bad-900: #2a100d;

  /* --- semantic --- */
  --bg: var(--ink-900);
  --fg: var(--bone-200);
  --fg-dim: var(--bone-400);
  --accent: var(--gold-400);
  --line: var(--ink-600);
  --panel: var(--ink-800);

  /* --- type --- */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.6875rem;   /* 11 */
  --t-sm: 0.75rem;     /* 12 */
  --t-md: 0.8125rem;   /* 13 */
  --t-base: 0.9375rem; /* 15 */
  --t-lg: 1.125rem;
  --t-xl: 1.5rem;
  --t-2xl: clamp(1.6rem, 3.4vw, 2.6rem);
  --t-3xl: clamp(2.4rem, 7vw, 5rem);
  --t-display: clamp(3.2rem, 13vw, 11rem);

  /* --- space: 4px base --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 140px;

  /* --- shape: this is a workstation, corners stay tight --- */
  --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px;

  /* --- depth: hard, layered, no purple bloom --- */
  --sh-1: 0 1px 0 rgba(255,255,255,.03), 0 2px 6px rgba(0,0,0,.5);
  --sh-2: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.6);
  --sh-3: 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.7);
  --glow-gold: 0 0 0 1px rgba(224,168,56,.28), 0 0 28px -6px rgba(224,168,56,.35);
  --glow-go:   0 0 0 1px rgba(107,212,107,.3), 0 0 34px -6px rgba(107,212,107,.4);

  /* --- motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms; --dur-4: 900ms;

  --maxw: 1240px;
  --nav-h: 56px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}