/* ============================================================================
   TOKENS — l'identità di Salentauto
   ----------------------------------------------------------------------------
   Assi assegnati nel BRIEF: grigio-acciaio (palette e scala tipografica in
   valori fissi), classico-misurato (Cormorant Garamond nei titoli, Lato nel
   corpo), diagonale + spigolo (griglia sfalsata, bordi netti, niente raggio),
   respiro alternato, movimento riservato (solo reveal e hover).

   Il logo trovato (loghi/logo.png) è un frammento di un tema WordPress
   generico, non un colore di marchio deliberato — vedi identita.json.
   La palette resta quella assegnata dalla direzione.
   ========================================================================= */

:root {
  /* ——— COLORE — grigio-acciaio, valori fissi dal BRIEF ———————————————————— */
  --fondo: #1b1e22;
  --fondo-alt: #262a30;
  --testo: #e7eaee;
  --accento: #ffc300;
  --su-accento: #1a1400;

  /* Derivati: --testo-tenue 7.4:1 su --fondo (testo secondario, resta sopra
     4.5:1). --bordo 3:1 su --fondo: soglia UI (WCAG 1.4.11) per un tratto di
     un pixel, non per un testo — un bordo portato a 4.5:1 sarebbe un grigio
     chiaro quasi quanto --testo-tenue e perderebbe il ruolo di riga sottile. */
  --testo-tenue: #a7adb6;
  --bordo: #686e74;

  /* ——— TIPOGRAFIA — classico-misurato, assegnata ———————————————————————————
     Cormorant Garamond (titoli, elegante e sottile) + Lato (corpo). Il
     <link> Google Fonts corrispondente è in testa a index.html. */
  --font-titoli: 'Cormorant Garamond', Georgia, serif;
  --font-testo: 'Lato', system-ui, sans-serif;

  --t-corpo: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --t-piccolo: clamp(0.8125rem, 0.79rem + 0.14vw, 0.9375rem);
  --t-h4: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --t-h3: clamp(1.4375rem, 1.3rem + 0.7vw, 1.9375rem);
  --t-h2: clamp(1.9375rem, 1.65rem + 1.45vw, 2.875rem);
  --t-h1: clamp(2.625rem, 1.9rem + 3.6vw, 5rem);

  --interlinea: 1.68;
  --interlinea-titoli: 1.12;
  --spaziatura-titoli: -0.01em;

  /* ——— RESPIRO — alternato ————————————————————————————————————————————————
     Due misure di sezione, non una: dense e quasi vuote si alternano nel
     layout (s-densa / s-vuota in site.css). */
  --spazio-sezione: clamp(3.5rem, 2.8rem + 3.5vw, 6.5rem);
  --spazio-sezione-vuota: clamp(6rem, 4.5rem + 7vw, 11rem);
  --spazio-blocco: clamp(1rem, 0.85rem + 1vw, 1.75rem);
  --gronda: clamp(1.25rem, 4vw, 3rem);

  --larghezza-max: 76rem;
  --larghezza-lettura: 38rem;

  /* ——— FORMA — spigolo ————————————————————————————————————————————————————
     Nessun raggio, ovunque: tessere, immagini, pulsanti, badge. Superfici
     piatte, bordi netti da un pixel. */
  --raggio: 0;
  --bordo-spessore: 1px;

  /* ——— IMPIANTO — diagonale ——————————————————————————————————————————————
     Angolo di taglio condiviso da clip-path e sfalsamenti: usato da site.css
     ovunque serve una diagonale, per tenerle tutte coerenti tra loro. */
  --taglio: 3.5vw;

  /* ——— MOVIMENTO — riservato ——————————————————————————————————————————————
     Solo reveal all'ingresso (già in app.js) e hover. Nient'altro: nessuno
     scroll pilotato, nessuna texture animata. */
  --durata: 550ms;
  --durata-breve: 200ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}