/* BGF Design Tokens — 8-BIT EDITION
 * --------------------------------------------------------------
 * Retro pixel-art accent. Greens, purples, reds. Hard black borders.
 * Offset drop shadows. Sharp corners. Pixel fonts on headings,
 * readable grotesque on body. Image-rendering: pixelated on art.
 */

/* Pixel fonts: Press Start 2P (display + accent), VT323 (mono), Pixelify Sans (optional body alt). Onest stays for legibility. */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Pixelify+Sans:wght@400..700&family=Onest:wght@300..800&display=swap");

:root {
  /* ───────────────────────── PIXEL COLOR PALETTE ───────────────────────── */

  /* Green — primary, console-cart green */
  --green-50:   #E8F8DD;
  --green-100:  #C8EFB0;
  --green-300:  #66D26B;
  --green-500:  #2EB04B;   /* primary */
  --green-700:  #156A2C;   /* primary deep */
  --green-900:  #082F12;

  /* Purple — secondary, arcade purple */
  --purple-100: #ECDDF6;
  --purple-300: #B68DD9;
  --purple-500: #7A3FBF;   /* secondary */
  --purple-700: #4D2380;
  --purple-900: #29103E;

  /* Red — accent, alert, "last seat" urgency */
  --red-100:    #FCD8D6;
  --red-300:    #F08581;
  --red-500:    #E0322C;   /* accent */
  --red-700:    #9F1A1F;

  /* Hot yellow — pixel mustard for the filling state + power-up callouts */
  --yellow-300: #FFE082;
  --yellow-500: #F4B934;
  --yellow-700: #A87514;

  /* Sky blue — cover-color palette (game library covers, see CreateGame screen) */
  --blue-300: #B8DBFF;
  --blue-500: #6BB6FF;
  --blue-700: #2E6FBF;

  /* Burnt orange — cover-color palette (game library covers, see CreateGame screen) */
  --orange-300: #E0A07A;
  --orange-500: #B85C2F;
  --orange-700: #7A3814;

  /* Neutrals — Mario/NES brighter: pure ink black, sunlit cream paper, white surfaces */
  --bg:         #FFE9A8;   /* paper — Mario-block cream, sunlit */
  --bg-2:       #F5C966;   /* sand — deeper cream for stripes / dividers */
  --surface:    #FFFFFF;   /* card surface — pure white, NES screen feel */
  --surface-2:  #FFF5D2;   /* hover / nested */
  --ink:        #000000;   /* fg1 — pure NES black */
  --ink-2:      #3A3A3A;   /* fg2 */
  --ink-3:      #6C6C6C;   /* fg3 */
  --ink-inverse:#FFFFFF;

  /* Atmosphere accents — alt backgrounds for special surfaces (onboarding hero, brick walls, sky panels) */
  --sky:        #6BB6FF;   /* Mario sky blue */
  --sky-deep:   #2A6FDB;
  --brick:      #B85C2F;   /* NES brick brown */
  --brick-deep: #7A3818;
  --coin:       #FFD24A;   /* Mario coin yellow */

  /* Semantic */
  --status-open:        var(--green-500);
  --status-open-tint:   var(--green-100);
  --status-fill:        var(--yellow-500);
  --status-fill-tint:   var(--yellow-300);
  --status-full:        var(--red-500);
  --status-full-tint:   var(--red-100);
  --status-info:        var(--purple-500);
  --status-info-tint:   var(--purple-100);
  --status-yours:       var(--purple-500);
  --status-yours-tint:  var(--purple-100);

  /* Aliases used elsewhere */
  --paper:           var(--bg);
  --paper-2:         var(--bg-2);
  --felt:            var(--green-500);
  --felt-deep:       var(--green-700);
  --felt-tint:       var(--green-100);
  --terracotta:      var(--red-500);
  --terracotta-tint: var(--red-100);
  --mustard:         var(--yellow-500);
  --mustard-tint:    var(--yellow-300);

  /* Borders — HARD BLACK is the load-bearing element of 8-bit */
  --border-subtle: #E5BE5E;             /* subtle inner divider — sun-cream tone */
  --border:        var(--ink);          /* the default card border */
  --border-strong: var(--ink);
  --border-felt:   var(--ink);

  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;

  /* Scrims */
  --scrim:      rgba(26, 24, 20, 0.55);
  --scrim-soft: rgba(26, 24, 20, 0.18);

  /* ────────────────────────────────  TYPE  ─────────────────────────────── */

  --font-pixel:   "Press Start 2P", "VT323", monospace;            /* chunky display */
  --font-pixel-l: "Pixelify Sans", "VT323", monospace;             /* lighter pixel — labels */
  --font-display: "Press Start 2P", "VT323", monospace;            /* alias used in components */
  --font-body:    "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "VT323", "JetBrains Mono", ui-monospace, monospace;

  /* The pixel font Press Start 2P has NO line-height tolerance; we use bigger LH multipliers. */
  --text-display: 28px;   --lh-display: 36px;   /* pixel: needs much line-height */
  --text-h1:      20px;   --lh-h1:      28px;
  --text-h2:      16px;   --lh-h2:      24px;
  --text-h3:      14px;   --lh-h3:      20px;   /* often the cap of Press Start 2P */
  --text-body:    15px;   --lh-body:    22px;   /* Onest body remains the readable workhorse */
  --text-sm:      13px;   --lh-sm:      18px;
  --text-xs:      11px;   --lh-xs:      14px;
  --text-num-xl:  28px;   --lh-num-xl:  32px;   /* Press Start 2P numbers */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --track-tight:  0em;       /* pixel fonts already have wide built-in metrics — no negative tracking */
  --track-normal: 0em;
  --track-loose:  0.02em;
  --track-caps:   0.08em;

  /* ───────────────────────────  SPACE & RADIUS  ────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Sharp corners. Everything that has to feel like a sprite is 0. */
  --radius-sm:    0px;
  --radius-md:    0px;
  --radius-lg:    0px;
  --radius-xl:    4px;     /* sheets and big surfaces get the tiniest hint */
  --radius-pill:  0px;     /* "pill" buttons are RECTANGULAR in 8-bit */

  /* ──────────────────────────────  SHADOW  ─────────────────────────────── */

  /* The single 8-bit signature: hard offset drop shadow in solid ink, no blur. */
  --shadow-card:  3px 3px 0 var(--ink);
  --shadow-pop:   5px 5px 0 var(--ink);
  --shadow-press: 1px 1px 0 var(--ink);    /* pressed state — shadow shrinks */
  --shadow-ring:  0 0 0 2px var(--bg), 0 0 0 4px var(--green-500);

  /* ──────────────────────────────  MOTION  ─────────────────────────────── */

  /* 8-bit feel: stepped, not silky. Use steps() on hover. */
  --ease-step:  steps(3, end);
  --ease-out:   cubic-bezier(.2, .7, .2, 1);
  --ease-in:    cubic-bezier(.4, .0, .6, 1);
  --dur-micro:  90ms;
  --dur-std:    160ms;
  --dur-sheet:  260ms;

  /* ──────────────────────────────  LAYOUT  ─────────────────────────────── */

  --gutter-mobile: 16px;
  --nav-height:    72px;
  --max-content:   480px;
}

/* ──────────────────────────────  ELEMENTS  ─────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Pixel art renders crisp — used on logos and illustrations. */
.pixelated, .pixelated * { image-rendering: pixelated; image-rendering: crisp-edges; }

.h-display { font-family: var(--font-pixel); font-size: var(--text-display); line-height: var(--lh-display); font-weight: 400; color: var(--ink); }
.h1        { font-family: var(--font-pixel); font-size: var(--text-h1);      line-height: var(--lh-h1);      font-weight: 400; color: var(--ink); }
.h2        { font-family: var(--font-pixel); font-size: var(--text-h2);      line-height: var(--lh-h2);      font-weight: 400; color: var(--ink); }
.h3        { font-family: var(--font-body);  font-size: var(--text-h3);      line-height: var(--lh-h3);      font-weight: var(--weight-semi); color: var(--ink); }
.p         { font-family: var(--font-body);  font-size: var(--text-body);    line-height: var(--lh-body);    font-weight: var(--weight-regular); color: var(--ink); }
.sm        { font-family: var(--font-body);  font-size: var(--text-sm);      line-height: var(--lh-sm);      color: var(--ink-2); }
.xs        { font-family: var(--font-body);  font-size: var(--text-xs);      line-height: var(--lh-xs);      color: var(--ink-2); letter-spacing: var(--track-loose); }
.eyebrow   { font-family: var(--font-pixel); font-size: 9px;                 line-height: 12px;              font-weight: 400; color: var(--ink-2); letter-spacing: var(--track-caps); }
.num       { font-family: var(--font-pixel); font-variant-numeric: tabular-nums; }
.num-xl    { font-family: var(--font-pixel); font-size: var(--text-num-xl); line-height: var(--lh-num-xl); }
.mono      { font-family: var(--font-mono);  font-size: 18px;                color: var(--ink); } /* VT323 reads bigger */
.pix       { font-family: var(--font-pixel); font-size: 9px; line-height: 12px; }

/* utility */
.fg-2 { color: var(--ink-2); }
.fg-3 { color: var(--ink-3); }