/* ==========================================================================
   TOKENS — le uniche costanti del progetto.
   Qualsiasi colore, font o misura ricorrente vive qui e da nessun'altra parte.
   Cambiare l'accento del sito = cambiare una riga di questo file.
   ========================================================================== */

:root {

  /* --- colori ----------------------------------------------------------- */
  --bg:          #040506;   /* fondo principale, near-black */
  --bg-alt:      #0c0e12;   /* fondo delle sezioni alternate */
  --fg:          #ffffff;
  --muted:       rgba(255, 255, 255, .56);
  --faint:       rgba(255, 255, 255, .30);
  --line:        rgba(255, 255, 255, .10);
  --accent:      #b2ff05;   /* verde acido: CTA, numeri, etichette */
  --accent-soft: rgba(178, 255, 5, .20);
  --ink:         #040506;   /* testo sopra l'accento */
  --danger:      #ff6b6b;   /* errori di form */

  /* --- tipografia -------------------------------------------------------
     Nessuna condensata: entrambe a larghezza normale. Chakra Petch porta il
     carattere tecnico con gli angoli tagliati sulle lettere, Saira e' la sua
     compagna neutra per la lettura. Space Mono resta per le etichette, che
     devono leggersi come output di un terminale.                          */
  --font-display: 'Chakra Petch', system-ui, sans-serif;
  --font-body:    'Saira', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* --- misure ----------------------------------------------------------- */
  --wrap-max:     1600px;
  --wrap-pad:     48px;
  --wrap-pad-sm:  22px;
  --sec-pad:      clamp(90px, 12vw, 158px);

  /* --- movimento -------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --dur-fast:  .2s;
  --dur:       .3s;
  --dur-slow:  .7s;

  /* --- geometria angolare ------------------------------------------------
     Il taglio d'angolo e' la firma del linguaggio: nessun raggio, mai.
     `--cut` e' la misura del taglio, usata nei clip-path.                 */
  --cut:       14px;
  --cut-small: 9px;

  /* Griglia di puntini sul fondo nero: da vicino non si vede, ma toglie
     al nero l'effetto "vuoto" e fa da reticolo tecnico. */
  --dots: radial-gradient(rgba(178,255,5,.16) 1px, transparent 1px);
  --dots-size: 34px 34px;

  /* --- texture ---------------------------------------------------------- */
  /* Grana finissima sovrapposta a tutta la pagina: toglie l'effetto
     "piatto" dei fondi scuri senza pesare come un'immagine. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Breakpoint usati nel progetto, per riferimento — le media query non
   accettano variabili, quindi i valori restano scritti a mano:
     960px  nav compatta, compare l'hamburger
     860px  discipline in colonna
     820px  portfolio, manifesto e contatti in colonna
     760px  padding ridotto, footer in colonna
     520px  form in colonna singola, logo piu' piccolo                      */