/* ==========================================================================
   Valori di design — unico posto dove si scelgono i numeri.
   Le regole che li spiegano stanno in SISTEMA.md, nella cartella del progetto.
   Scala spazi: 4 8 12 16 24 32 48 64 96 128
   Scala testo: 13 15 17 21 27 34 44 58
   Raggi: 10 20 999 | Movimento: 140ms stato, 220ms entrata | Tocco: 44px
   ========================================================================== */
:root {
  /* colori, per ruolo */
  --fondo: #07090f;
  --superficie-1: #0f131e;
  --superficie-2: #161c2b;
  --bordo-tenue: #232b3d;
  --bordo-forte: #35405a;
  --testo: #f2f4f9;
  --testo-tenue: #a8b0c2;
  --accento: #46e05a;
  --alone-accento: rgba(70, 224, 90, .18);

  /* spazi */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;

  /* testo */
  --txt-xs: 13px; --txt-s: 15px; --txt-m: 17px; --txt-l: 21px;
  --txt-xl: 27px; --txt-xxl: 34px; --txt-display: clamp(34px, 5.2vw, 58px);
  --riga-aperta: 1.05; --riga-titolo: 1.2; --riga-corpo: 1.55;
  --misura: 68ch;

  /* raggi */
  --raggio-1: 10px; --raggio-2: 20px; --raggio-tondo: 999px;

  /* ombre e alone */
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .5);
  --ombra-2: 0 18px 48px rgba(0, 0, 0, .55);
  --alone: 0 0 0 1px rgba(70, 224, 90, .35), 0 0 64px rgba(70, 224, 90, .25);
  /* alone neon: e' la firma del sito, e sta solo sui pezzi che si premono o che contano */
  --alone-bottone: 0 0 0 1px rgba(70, 224, 90, .45), 0 6px 20px rgba(70, 224, 90, .26);
  --alone-bottone-forte: 0 0 0 1px rgba(70, 224, 90, .9), 0 10px 34px rgba(70, 224, 90, .5);

  /* tempi */
  --mov-stato: 140ms;
  --mov-entrata: 220ms;
}