/* ════════════════════════════════════════════════════════════════════
   livegames-tokens.css  ·  LiveGames Design System  ·  v1
   ────────────────────────────────────────────────────────────────────
   ONE platform. MANY games. Shared DNA, different personalities.

   Architecture
   ─────────────
   :root            → STRUCTURAL tokens shared by every LiveGames title.
                      Layout, type, spacing, radius, elevation, the dark
                      neutral ramp. These NEVER change between games — a
                      user learns the chassis once.

   [data-game="…"]  → PERSONALITY layer. Each game remaps a small, fixed
                      set of semantic slots: accent, positive, negative,
                      pulse, and motion feel. Nothing structural.

   To ship a new game you author ONE [data-game] block. That's the whole
   contract. NFL Drive, NBA Run, Soccer Momentum all plug in here.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutral ramp — SHARED ──────────────────────────────────────────
     Every LiveGames title is a dark app. The graphite ramp and ink set
     are constant so cards, chrome and dividers read identically across
     games. Color personality rides on TOP of this, never replaces it. */
  --lg-bg-app:      #050709;
  --lg-graphite:    #0a0d10;
  --lg-graphite-2:  #0e1418;
  --lg-graphite-3:  #14191e;
  --lg-graphite-4:  #181d22;

  --lg-ink:         #f0f0ec;
  --lg-ink-dim:     rgba(240,240,236,0.55);
  --lg-ink-faint:   rgba(240,240,236,0.32);
  --lg-ink-ghost:   rgba(240,240,236,0.14);

  --lg-edge:        rgba(255,255,255,0.06);
  --lg-edge-2:      rgba(255,255,255,0.10);

  /* ── Typography — SHARED ───────────────────────────────────────────
     One display face (condensed, athletic), one mono (numbers, IDs,
     odds, multipliers). One sizing ladder used in EVERY game so a
     "metric" reads at the same weight whether it's a dice total or a
     crash multiplier. */
  --lg-font-display: 'Barlow Condensed', system-ui, sans-serif;
  --lg-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --lg-text-label:   10px;   /* eyebrows, zone labels, tags        */
  --lg-text-meta:    12px;   /* metadata, secondary mono           */
  --lg-text-body:    14px;   /* body, button labels                */
  --lg-text-metric:  18px;   /* a live metric (balance, total)     */
  --lg-text-hero:    32px;   /* the ONE big number on a surface    */

  --lg-tracking-label: 0.20em;
  --lg-tracking-tag:   0.14em;
  --lg-weight-bold:    800;

  /* ── Spacing — SHARED ──────────────────────────────────────────────
     4px base. Tight by design: these are dense, glanceable game HUDs. */
  --lg-space-1: 4px;
  --lg-space-2: 8px;
  --lg-space-3: 12px;
  --lg-space-4: 16px;
  --lg-space-5: 24px;
  --lg-space-6: 32px;

  /* ── Radius — SHARED ───────────────────────────────────────────────*/
  --lg-radius-chip: 7px;
  --lg-radius-zone: 4px;
  --lg-radius-card: 10px;
  --lg-radius-pill: 999px;

  /* ── Elevation / cards — SHARED ────────────────────────────────────
     Identical card recipe across games: same bg, same hairline border,
     same shadow. LiveCrash and LiveRoll cards are physically the same
     object. */
  --lg-card-bg:      var(--lg-graphite-2);
  --lg-card-border:  1px solid var(--lg-edge);
  --lg-shadow-card:  0 8px 24px rgba(0,0,0,0.40);
  --lg-shadow-rail:  0 -8px 24px rgba(0,0,0,0.50);
  --lg-shadow-pop:   0 8px 24px rgba(0,0,0,0.70);

  /* ── Layout shell — SHARED ─────────────────────────────────────────
     The chassis. top bar → contest strip → play area → betting rail.
     Same heights, same max width, on every title. */
  --lg-shell-max:   480px;   /* phone-first app column              */
  --lg-strip-h:     52px;    /* contest / quick-switch strip        */
  --lg-rail-h:      96px;    /* wallet + betting rail               */

  /* ── Semantic slots — DEFAULTS (overridden per game) ───────────────
     These exist so structural CSS can reference --lg-accent etc.
     without knowing which game it's in. The platform default is a
     neutral steel — a game SHOULD override it. */
  --lg-accent:      #9fb0c0;
  --lg-accent-soft: #c4d2df;
  --lg-accent-dim:  rgba(159,176,192,0.16);
  --lg-pos:         #6dba80;
  --lg-neg:         #e57373;
  --lg-pulse:       #9fb0c0;
  --lg-pulse-glow:  rgba(159,176,192,0.45);

  /* ── Motion — DEFAULTS (overridden per game) ───────────────────────*/
  --lg-motion-fast: 200ms;
  --lg-motion-base: 240ms;
  --lg-ease:        cubic-bezier(0.2, 0.9, 0.3, 1.05);
}

/* ════════════════════════════════════════════════════════════════════
   LIVEROLL  ·  "I am sitting at a table."
   Gold · amber · casino white. Motion is slow, deliberate, weighty —
   chips settle, dice land. Patient and tactical.
   ════════════════════════════════════════════════════════════════════ */
[data-game="roll"] {
  --lg-accent:      #d4a843;          /* gold                         */
  --lg-accent-soft: #e8c875;          /* lit gold                     */
  --lg-accent-dim:  rgba(212,168,67,0.18);
  --lg-pos:         #6dba80;          /* felt green                   */
  --lg-neg:         #e57373;          /* muted loss red               */
  --lg-pulse:       #e8c875;
  --lg-pulse-glow:  rgba(232,200,117,0.45);

  /* weighty: longer settles, soft overshoot */
  --lg-motion-fast: 200ms;
  --lg-motion-base: 280ms;
  --lg-ease:        cubic-bezier(0.18, 0.95, 0.32, 1.08);
}

/* ════════════════════════════════════════════════════════════════════
   LIVECRASH  ·  "I am riding a rocket."
   Cyan · electric green · hot pink. Motion is fast, explosive,
   energetic — multipliers rip, the curve climbs. Greed and nerve.
   ════════════════════════════════════════════════════════════════════ */
[data-game="crash"] {
  --lg-accent:      #2af0ff;          /* cyan                         */
  --lg-accent-soft: #7ef4ff;          /* lit cyan                     */
  --lg-accent-dim:  rgba(42,240,255,0.16);
  --lg-pos:         #39ff88;          /* electric green (pump)        */
  --lg-neg:         #ff2e93;          /* hot pink (crash)             */
  --lg-pulse:       #2af0ff;
  --lg-pulse-glow:  rgba(42,240,255,0.55);

  /* explosive: short, snappy, near-linear out */
  --lg-motion-fast: 90ms;
  --lg-motion-base: 130ms;
  --lg-ease:        cubic-bezier(0.3, 0.0, 0.2, 1);
}