/* =========================================================
   ARENA UI — DESIGN TOKENS (Palette unificata + Alias)
   ? Palette ufficiale: AA
   ? Alias retrocompatibili: ZL
   ? Niente valori inventati
========================================================= */

:root {
  /* =====================================================
     PALETTE UFFICIALE — ARENA UI
     (Colori realmente usati in card, hero, overlay, CTA ecc.)
  ===================================================== */
  --aa-cyan:   #38bdf8;   /* da game-card, grid, pill */
  --aa-pink:   #ec4899;   /* CTA neon */
  --aa-violet: #8b5cf6;   /* CTA neon gradient */
  --aa-dark:   #020617;   /* sfondo globale (già usato) */
  --aa-slate:  #0f172a;   /* background slate (card/hero) */

  /* Overlay system (estratto dalle tue card originali) */
  --aa-overlay-top:  rgba(2,6,23,0.10);
  --aa-overlay-mid:  rgba(2,6,23,0.62);
  --aa-overlay-deep: rgba(2,6,23,0.92);

  /* Border */
  --aa-border-slate: rgba(148,163,184,0.12);

  /* =====================================================
     RADII REALI usati nelle tue card e CTA
  ===================================================== */
  --aa-radius-sm: 12px;
  --aa-radius-md: 16px;
  --aa-radius-lg: 18px;

  /* =====================================================
     SHADOW SYSTEM (copiato dal tuo file al 100%)
  ===================================================== */
  --aa-shadow-card:        0 18px 46px rgba(0,0,0,.45);
  --aa-shadow-card-hover:  0 28px 70px rgba(0,0,0,.58);
  --aa-shadow-neon:        0 12px 28px rgba(236,72,153,.45);

  /* =====================================================
     TYPOGRAPHY
  ===================================================== */
  --aa-font-sans: "Plus Jakarta Sans", Inter, system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", sans-serif;

  --aa-font-h1-min: 2.2rem;
  --aa-font-h1-max: 4rem;
  --aa-font-body:   1rem;

  /* =====================================================
     SPACING SCALE
  ===================================================== */
  --aa-space-xs: 4px;
  --aa-space-sm: 8px;
  --aa-space-md: 16px;
  --aa-space-lg: 32px;
  --aa-space-xl: 48px;

  /* =====================================================
     TIMINGS
  ===================================================== */
  --aa-time-fast:   0.25s;
  --aa-time-normal: 0.45s;

  /* =====================================================
     PALETTE ALIAS — ZERO LATENCY (retrocompatibilità)
     Usa i colori AA come base, senza cambiare estetica
  ===================================================== */
  --zl-cyan: var(--aa-cyan);      /* prima era #22d3ee */
  --zl-blue: #0ea5e9;             /* lo manteniamo come colore secondario */
  --zl-bg:   var(--aa-dark);      /* prima era lo stesso colore */

  /* CTA arancione (già usata da .btn-cta nel tuo file) */
  --aa-cta-from: #f97316;         /* arancio neon */
  --aa-cta-to:   #facc15;         /* giallo neon */
}