/* ════════════════════════════════════════════════════════════════
   1 — TOKEN
   Palette, tipografia, elevazione, transizioni.
   Unico posto in cui cambiare l'identità visiva del sito.
   ════════════════════════════════════════════════════════════════ */
:root {
  --navy:         #16234E;   /* Blu Navy Dominante */
  --navy-dark:    #0F1A3C;   /* Blu Navy Scuro Footer/Topbar */
  --navy-light:   #223766;   /* Navy per sfondi sezioni */
  --blue-accent:  #3B5BB0;   /* Accento Blu */
  --gold:         #FACC15;   /* Oro Accento */
  --gold-deep:    #EAB308;   /* Oro Scuro Hover */
  --white:        #FFFFFF;
  --light-bg:     #F1F5F9;   /* Grigio Chiaro */
  --slate-border: #E2E8F0;
  --text-dark:    #16234E;
  --text-muted:   #475569;

  /* Esito di una partita — calendario e risultati.
     Scuri e poco accesi: devono leggersi accanto al navy senza
     contendergli l'attenzione. Il colore non è mai l'unico segnale:
     ogni riga porta anche la lettera V, N o P, perché chi non
     distingue rosso e verde deve capire lo stesso com'è finita. */
  --esito-vinta:  #1B7A4B;
  --esito-persa:  #A32330;
  --esito-pari:   #64748B;

  /* I veli delle schede sono OPACHI, non trasparenti. Da trasparenti
     sembravano identici finché la pagina restava bianca, ma appoggiati
     sulla fascia blu del calendario lasciavano passare il fondo e il
     testo navy diventava illeggibile. Questi sono gli stessi colori
     già fusi con il bianco: rendono uguale su qualunque fondo. */
  --velo-vinta:    #F1F7F4;
  --velo-persa:    #FAF4F5;
  --velo-casa:     #FDF6DD;   /* oro chiaro: le gare al PalaSport */
  --velo-prossima: #FAE9AE;   /* oro pieno: la gara che viene ora */

  --font-display: 'Oswald', sans-serif;
  --font-body:    'Work Sans', sans-serif;

  --shadow-sm:  0 2px 4px rgba(22, 35, 78, 0.06);
  --shadow-md:  0 8px 20px -6px rgba(22, 35, 78, 0.15);
  --shadow-lg:  0 20px 40px -10px rgba(22, 35, 78, 0.25);

  --transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Angoli squadrati per i componenti di sezione (schede, tabelle,
   riquadri sponsor). Header, hero e footer conservano i propri
   raggi originali: la grafica di base non va toccata. */
:root {
  --radius: 0;
}

/* Movimento — curva e durata uniche, così le micro-interazioni
   di tutto il sito si muovono allo stesso modo. */
:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .28s;
}

/* Altezza del contenitore dell'header: serve all'hero per scorrergli
   sotto, così il riquadro del menu galleggia sopra l'immagine. */
:root {
  --header-h: 92px;
}

/* Larghezza massima dei contenuti dentro le sezioni.
   Era ripetuta 17 volte: da qui si regola una volta sola. */
:root {
  --wrap: 1140px;
}

/* Respiro verticale delle sezioni e stacco sotto la testata.
   Erano valori sparsi fra 60 e 80px: da qui si regolano insieme. */
:root {
  --sec-pad-y:   54px;
  --sec-head-gap: 34px;
}

/* Larghezza del riquadro del menu. La topbar ci si allinea a destra
   con un calcolo, quindi i due bordi restano incolonnati.
   Se cambiano le voci del menu, va aggiornata qui. */
:root {
  --menu-w: 662px;
}