/* ==========================================================================
   PowerUp Events — Design tokens
   Direzione: competitive premium. Nero profondo, un solo accento, oro
   riservato al denaro. L'effetto premium viene da struttura, tipografia e
   spaziatura — non da glow ed effetti.
   Cambiare identità visiva significa cambiare questo file e nient'altro.
   ========================================================================== */

:root {
  /* ── Superfici ────────────────────────────────────────────────────────
     Scala neutra leggermente fredda. Il salto fra bg e surface è piccolo
     di proposito: la gerarchia la fanno i bordi, non le ombre. */
  --bg:          #08080A;
  --bg-elev:     #0D0D11;
  --surface:     #121216;
  --surface-2:   #1A1A20;
  --surface-3:   #23232B;

  /* ── Bordi ───────────────────────────────────────────────────────────
     Netti e visibili: sono lo strumento principale di separazione. */
  --border:      #26262E;
  --border-soft: #1C1C23;
  --border-lit:  #34343F;

  /* ── Testo ───────────────────────────────────────────────────────────── */
  --text:        #F2F2F5;
  --text-2:      #B4B4C0;
  --muted:       #82828F;
  --faint:       #5A5A66;

  /* ── Accento: uno solo, ovunque ───────────────────────────────────────
     CTA, link, stati attivi, focus. Se serve un secondo colore per
     distinguere qualcosa, quasi sempre serve invece più contrasto. */
  --accent:      #7C5CFF;
  --accent-hi:   #9B82FF;
  --accent-lo:   #5B3FD9;
  --accent-dim:  rgba(124, 92, 255, 0.14);
  --accent-line: rgba(124, 92, 255, 0.34);

  /* ── Oro: SOLO denaro e premi ─────────────────────────────────────────
     Mai decorativo. Se l'oro appare dove non ci sono soldi, smette di
     segnalare i soldi. */
  --gold:        #F0B429;
  --gold-hi:     #FFCC55;
  --gold-dim:    rgba(240, 180, 41, 0.13);
  --gold-line:   rgba(240, 180, 41, 0.32);

  /* ── Stati ───────────────────────────────────────────────────────────── */
  --live:        #FF3B5C;
  --live-dim:    rgba(255, 59, 92, 0.14);
  --ok:          #2FD98A;
  --ok-dim:      rgba(47, 217, 138, 0.13);
  --warn:        #FFA23A;
  --warn-dim:    rgba(255, 162, 58, 0.13);
  --err:         #FF4D4D;
  --err-dim:     rgba(255, 77, 77, 0.13);

  /* ── Logo ────────────────────────────────────────────────────────────── */
  --logo-ink:    var(--text);
  --logo-bolt:   var(--gold);

  /* ── Tipografia ───────────────────────────────────────────────────────
     Saira Condensed per titoli e numeri: condensata, angolare, regge bene
     le cifre grandi. Inter per il testo. JetBrains Mono per codici e tag,
     dove serve che ogni carattere sia inequivocabile. */
  --font-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scala tipografica: rapporto ~1.25, arrotondata a valori interi */
  --fs-2xs:  0.6875rem;   /* 11px — micro-etichette */
  --fs-xs:   0.75rem;     /* 12px — meta, badge */
  --fs-sm:   0.8125rem;   /* 13px */
  --fs-base: 0.9375rem;   /* 15px — corpo */
  --fs-md:   1.0625rem;   /* 17px */
  --fs-lg:   1.375rem;    /* 22px */
  --fs-xl:   1.75rem;     /* 28px */
  --fs-2xl:  2.25rem;     /* 36px */
  --fs-3xl:  3rem;        /* 48px */
  --fs-4xl:  4rem;        /* 64px — numeri hero */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.6;

  /* Tracking: il condensed maiuscolo ha bisogno di respiro, il corpo no */
  --track-display: 0.01em;
  --track-eyebrow: 0.18em;
  --track-wide:    0.08em;

  /* ── Spaziature: scala a 4px ──────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  /* ── Raggi: contenuti. Bordi netti, non pillole ──────────────────────── */
  --r-xs:  3px;
  --r-sm:  5px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* ── Ombre: usate con parsimonia, solo per elementi sovrapposti ──────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container: 1200px;
  --nav-h: 68px;

  /* ── Movimento ───────────────────────────────────────────────────────── */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Compatibilità col vecchio tema ───────────────────────────────────
     Gli stili inline nei template usano ancora i nomi del tema viola/ciano —
     185 riferimenti, concentrati in live.html e admin.html, che non sono stati
     riscritti. Rimapparli qui costa tredici righe e non lascia nessun colore
     indefinito; sostituirli uno a uno è lavoro da fare quando quei due file
     verranno riscritti davvero. */
  --purple:    var(--accent);
  --purple-l:  var(--accent-hi);
  --cyan:      var(--accent-hi);
  --green:     var(--ok);
  --red:       var(--err);
  --card:      var(--surface);
  --card2:     var(--surface-2);
  --bg2:       var(--bg-elev);
  --border2:   var(--border-lit);
  --glow:      var(--accent-dim);
  --glow-cyan: var(--accent-dim);

  /* ── Livelli ─────────────────────────────────────────────────────────── */
  --z-sticky:  100;
  --z-nav:     200;
  --z-dropdown:300;
  --z-backdrop:400;
  --z-modal:   500;
  --z-toast:   600;
}

/* Chi ha chiesto meno movimento lo ottiene davvero: le animazioni di questo
   sito sono decorative, nessuna trasporta informazione. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}