/* ============================================================================
   tokens.css — design tokens + arena-shared pins  (Voucher Wars, additive)
   ----------------------------------------------------------------------------
   Loaded FIRST, before style.css / dashboard.css. Every value here equals the
   colour the game already uses, so loading this file changes NOTHING visually.

   Purpose:
     1. Give the two legacy stylesheets a SINGLE source of truth. dashboard.css's
        names (--primary-color, --card-bg, …) are canonical; style.css's names
        (--accent, --card, …) are aliased to the same values so both agree.
     2. Add a spacing / radius / typography scale the neon_city theme uses.
     3. PIN the handful of arena-shared selectors to literal colours so a theme
        that swaps tokens can never leak into the combat screen (see
        docs/UI_REDESIGN_AUDIT.md §9).

   Themes override the tokens below under `html[data-theme="…"]`
   (see css/theme-neon-city.css). Default (no attribute / "classic") = today.
   ========================================================================== */

:root {
  /* ---- Canonical palette (was dashboard.css :root) ---- */
  --primary-color:   #00d4ff;
  --secondary-color: #ff006e;
  --success-color:   #00f5a0;
  --danger-color:    #ff4757;
  --warning-color:   #ffa502;
  --dark-bg:         #0a0e27;
  --card-bg:         #1a1f3a;
  --border-color:    #2d3561;
  --text-color:      #e0e0e0;
  --text-muted:      #8892b0;

  /* ---- Legacy aliases (was style.css :root) — point at the canonical set so
          the two stylesheets can never disagree again. Kept at their original
          values to stay pixel-identical today. ---- */
  --bg:     #0f1724;
  --card:   #0b1220;
  --accent: #06b6d4;
  --muted:  #94a3b8;
  --good:   #10b981;
  --bad:    #ef4444;

  /* ---- Surfaces / gradients used by the shell ---- */
  --app-gradient: linear-gradient(135deg, var(--dark-bg) 0%, #1a2a4d 100%);
  --header-bg:    rgba(10, 14, 39, 0.85);

  /* ---- Spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px;

  /* ---- Radius scale ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* ---- Typography ---- */
  --font-body:    'Arial', sans-serif;
  --font-display: 'Arial', sans-serif;
  --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-md: 1rem;
  --fs-lg: 1.25rem; --fs-xl: 1.6rem;  --fs-2xl: 2.2rem;
  --tracking-wide: 0.02em;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(2, 6, 23, 0.4);
  --shadow-md: 0 6px 18px rgba(2, 6, 23, 0.55);
  --shadow-glow: none;   /* themes light this up */

  /* ---- Focus ring ---- */
  --focus-ring: 2px solid var(--primary-color);
}

/* ============================================================================
   ARENA PINS — never let a token swap recolour combat.
   These selectors live in the globally-loaded stylesheets and are the only ones
   that bleed into the arena. Pinned to literal values (matching today) so a
   theme changing --accent / body font cannot touch the combat screen.
   Do NOT add arena rules to a theme file; pin them here instead.
   ========================================================================== */
.mobile-btn,
.mb-label,
#moveStick,
#aimStick,
#actionCluster,
.ability-pill {
  --accent: #06b6d4;   /* freeze the token locally for arena-shared controls */
}
body.in-arena {
  /* the combat screen keeps the classic body font regardless of theme */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Accessibility: honour reduced-motion for any themed animation. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}