/* ===========================================================
   GARDEN STREET GAMES — Design Tokens
   The single source of truth. Nothing hardcodes a color.
   Palette logic: near-black soil, bright paper white, one
   chlorophyll accent, one Lake Pepin sunset signal.
   =========================================================== */

:root {
  /* --- Core surfaces --- */
  --ink:        #07090A;  /* deepest black, page ground        */
  --ink-2:      #0E1113;  /* raised panel                      */
  --ink-3:      #171B1E;  /* card / hairline fill              */
  --ink-4:      #23292D;  /* borders on dark                   */

  --paper:      #F6F5EF;  /* bright warm white, primary text   */
  --paper-2:    #C9CAC4;  /* secondary text on dark            */
  --paper-3:    #8A8D88;  /* tertiary / meta                   */

  /* --- Accents --- */
  --green:      #9BFF3C;  /* chlorophyll — primary accent      */
  --green-deep: #4FA315;  /* pressed / shadow state            */
  --amber:      #FFB020;  /* Pepin sunset — signal, sparing    */

  /* --- Semantic --- */
  --bg:            var(--ink);
  --surface:       var(--ink-2);
  --surface-raised:var(--ink-3);
  --border:        var(--ink-4);
  --text:          var(--paper);
  --text-muted:    var(--paper-2);
  --text-faint:    var(--paper-3);
  --accent:        var(--green);
  --accent-ink:    var(--ink);      /* text ON accent fills    */

  /* --- Type --- */
  --font-display: 'Anton', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* fluid display scale */
  --fs-hero:  clamp(3rem, 13vw, 11.5rem);
  --fs-xl:    clamp(2.25rem, 6vw, 4.5rem);
  --fs-lg:    clamp(1.5rem, 3vw, 2.25rem);
  --fs-md:    1.125rem;
  --fs-base:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.75rem;

  --tracking-display: -0.02em;
  --tracking-label:    0.18em;

  /* --- Space (8pt) --- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* --- Geometry --- */
  --radius:    2px;   /* signage is sharp. barely any rounding */
  --radius-lg: 4px;
  --hairline:  1px solid var(--border);

  /* --- Motion --- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur:      280ms;
  --dur-slow: 620ms;

  /* --- Layout --- */
  --maxw:      1440px;
  --maxw-text: 68ch;
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --nav-h:     72px;
}

/* Light mode is NOT a goal for this brand — it is deliberately
   a dark, high-contrast identity. Locked. */
:root { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}