/* ==========================================================
   AIRÒ 2026 — TOKEN DI BRAND
   Da mettere in src/styles/tokens.css (o equivalente) e
   importare per primo, prima di qualsiasi altro foglio.

   Da qui in avanti nessun colore, raggio o font va scritto
   a mano nei componenti: si usano solo queste variabili.
   È l'unico modo perché il prossimo cambio di brand costi
   un'ora invece di una settimana.
   ========================================================== */

:root{

  /* ---------- accento ---------- */
  --volt:        #EAFB24;
  --volt-cupo:   #B4C41C;   /* hover e stato premuto */

  /* ---------- fondi, scala di elevazione ---------- */
  --nero:        #000000;   /* fondo base */
  --carbone:     #0A0A0A;   /* pannelli, riquadri */
  --grafite:     #141414;   /* superfici in evidenza, hover */
  --linea:       #232323;   /* bordi e divisori */
  --linea-viva:  #3A3A3A;   /* bordo al passaggio del mouse */

  /* ---------- testi ---------- */
  --bianco:      #F8F8F8;   /* mai #FFF puro: su nero vibra */
  --grigio:      #8C8C8C;   /* secondario, didascalie */
  --grigio-cupo: #5E5E5E;   /* terziario, note di chiusura */

  /* ---------- tipografia ---------- */
  --display: "Anton", "Haettenschweiler", "Arial Narrow", "Impact", sans-serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --sp-etichetta: 0.35em;   /* la firma del brand: non ridurla */

  /* ---------- forma ---------- */
  --raggio: 4px;            /* ovunque, senza eccezioni */
  --bordo: 1px solid var(--linea);

  /* ==========================================================
     COLORI DI STATO — non sono brand, sono linguaggio

     Servono nell'area allievi e nel pannello per dire riuscito,
     fallito, in attesa, informazione. NON vanno convertiti in
     volt: se un pagamento riuscito e uno fallito diventano dello
     stesso colore, l'interfaccia smette di comunicare.

     Sono però ritarati sul fondo scuro del brand: quelli
     ereditati erano pensati per un'altra palette.
     ========================================================== */
  --ok:         #2ECC71;   /* era #2ecc71 — invariato, funziona */
  --errore:     #E5484D;   /* era #e74c3c — alzato per contrasto su nero */
  --attenzione: #E8A33D;   /* era #f39c12 — abbassata la saturazione */
  --info:       #4C9BE8;   /* era #3498db — alzato per contrasto */

  /* Usati SOLO per comunicare uno stato. Mai come accento
     decorativo, mai su pagine pubbliche. */
}

/* ==========================================================
   FONT AUTO-OSPITATI
   Scarica Anton e Archivo, converti in .woff2 e mettili in
   /public/font. NON caricarli da Google Fonts: il trasferimento
   di IP verso Google senza consenso è già stato sanzionato in UE.
   ========================================================== */

@font-face{
  font-family:"Anton";
  src:url("font/Anton-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("font/Archivo-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("font/Archivo-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("font/Archivo-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("font/Archivo-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ==========================================================
   BASE
   ========================================================== */

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--nero);
  color:var(--bianco);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;             /* Anton ha un solo peso */
  letter-spacing:0.01em;
  line-height:1.1;
  margin:0 0 .5em;
}

/* Interlinea del titolo mai sotto 1.05: Anton porta gli accenti
   molto in alto e la È di "Airò" finisce dietro la riga sopra. */
h1{ font-size:clamp(2.6rem, 12vw, 3.6rem); line-height:1.08; letter-spacing:0.005em; }
h2{ font-size:clamp(1.4rem, 5vw, 1.8rem); }

/* Anton non ha un corsivo vero: il browser lo inclina via software
   e le lettere si deformano. Nei titoli l'enfasi si fa col colore,
   mai col corsivo. .section-heading copre i "titolo sezione" che
   sono div, non h1/h2/h3, e quindi non erediterebbero questa regola. */
h1 em, h2 em, h3 em, .hero em, .section-heading em { font-style: normal; }

p{ margin:0 0 1em; max-width:72ch; }   /* righe sotto gli 80 caratteri */

a{ color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--volt);
  outline-offset:3px;
}

/* ==========================================================
   ELEMENTI RICORRENTI
   ========================================================== */

/* etichetta ultra spaziata: il contrasto fra titolo compresso ed
   etichetta larga è ciò che rende il risultato sobrio invece che urlato */
.etichetta{
  font-size:.8rem;
  line-height:1.4;
  letter-spacing:var(--sp-etichetta);
  text-transform:uppercase;
  color:var(--grigio);
}

/* filetto: apre o chiude un blocco di testo */
.filetto{
  display:block;
  width:76px; height:3px;
  background:var(--volt);
  border:0;
}

.bottone{
  display:inline-block;
  padding:19px 22px;
  border:0; border-radius:var(--raggio);
  background:var(--volt);
  color:var(--nero);
  font-family:var(--sans); font-weight:700; font-size:1.06rem;
  letter-spacing:.005em; text-decoration:none;
  transition:background .18s ease;
  cursor:pointer;
}
.bottone:hover{ background:var(--volt-cupo); }

.bottone--vuoto{
  background:transparent;
  color:var(--bianco);
  border:1px solid var(--volt);
}
.bottone--vuoto:hover{ background:var(--grafite); }

.riquadro{
  background:var(--carbone);
  border:var(--bordo);
  border-radius:var(--raggio);
  padding:24px;
  transition:background .18s ease, border-color .18s ease;
}
.riquadro:hover{ background:var(--grafite); border-color:var(--linea-viva); }

hr, .divisore{ border:0; border-top:1px solid var(--linea); margin:0; }

/* fotografia: bianco e nero, dissolvenza verso il fondo */
.foto{
  filter:grayscale(1) contrast(1.08);
  display:block; width:100%; height:auto;
}
.foto-fascia{ position:relative; }
.foto-fascia::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(to bottom, rgba(0,0,0,0), var(--nero));
  pointer-events:none;
}

/* diagonale: elemento di firma. Lo spessore resta costante a ogni
   larghezza grazie a vector-effect sull'SVG del bordo. */
.diagonale{ clip-path:polygon(0 0, 100% 0, 100% 92%, 0 100%); }
.diagonale-filo line{ stroke:var(--volt); stroke-width:3; vector-effect:non-scaling-stroke; }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ==========================================================
   REGOLA D'USO DELL'ACCENTO

   Un solo elemento volt per schermata. Il colore è un premio,
   non una decorazione: se sta su pulsanti, icone e bordi insieme,
   l'occhio non sa dove andare e l'azione che conta smette di
   risaltare.

   Volt sì:  pulsante principale, filetto, diagonale, battito
             del logo, contorno di focus.
   Volt no:  icone social, bordi generici, testo corrente,
             riempimenti di sfondo estesi.

   CONTRASTO — vincolante:
   #EAFB24 fa 18,3:1 su nero e 1,15:1 su bianco.
   Su fondo scuro si può usare come testo, filetto, icona, bordo.
   Su fondo chiaro MAI come testo: solo blocco pieno con testo nero.
   ========================================================== */