/* ==========================================================================
   editorIA — Token derivati

   PERCHE' UN SECONDO FILE
   tokens.css contiene i valori LETTI dai nodi Figma ed e' marcato in
   CLAUDE.md come "non modificare a mano": e' il tracciato di corrispondenza
   fra design e codice, e va rigenerato quando il design cambia.

   Questo file contiene invece i valori che il design NON dichiara ma che
   l'implementazione richiede: ritmo verticale, transizioni, z-index, stati.
   R2 impone che stiano in un file token e non inline nei CSS di sezione —
   sta qui, separato, per non inquinare la tracciabilita' di tokens.css.

   Ogni voce dichiara da dove viene: derivata dal design, oppure default
   applicato secondo docs/editoria-design-spec.md § 7 Aperti.
   ========================================================================== */

:root {

  /* --- Ritmo verticale ------------------------------------------------
     Derivato dalle coordinate Y delle sezioni sul frame desktop 1512px:
     gli stacchi reali vanno da ~120px a ~180px. Reso fluido con clamp
     per coprire i breakpoint intermedi, che il design non contiene
     ([ASSUMIBILE], spec § 7). */

  --eia-space-3xs:   4px;
  --eia-space-2xs:   8px;
  --eia-space-xs:   12px;
  --eia-space-sm:   16px;
  --eia-space-md:   24px;
  --eia-space-lg:   32px;
  --eia-space-xl:   48px;
  --eia-space-2xl:  64px;
  --eia-space-3xl:  96px;

  /* Stacco fra sezioni di primo livello */
  --eia-space-section: clamp(64px, 9vw, 144px);

  /* Stacco fra il titolo di sezione e il suo contenuto */
  --eia-space-heading: clamp(32px, 4vw, 64px);


  /* --- Breakpoint ------------------------------------------------------
     Il design esiste solo a 1512 e 393. Valori intermedi da
     [ASSUMIBILE] spec § 7. Non utilizzabili dentro @media (le custom
     property non sono valide li'): sono documentazione, e i media query
     nei CSS di sezione usano gli stessi numeri in forma letterale. */

  --eia-bp-desktop:  1512px;  /* frame di design */
  --eia-bp-laptop:   1280px;  /* container fluido */
  --eia-bp-tablet:   1024px;  /* due colonne, scroll-stacking disattivato */
  --eia-bp-compact:   768px;  /* colonna singola */
  --eia-bp-mobile:    393px;  /* frame di design mobile */


  /* --- Testo su fondo scuro -------------------------------------------
     Il design usa il bianco pieno per il corpo e il 20% di opacita' per la
     label del campo e-mail (nodo 2566:269). Quel 20% da' circa 1.9:1 di
     contrasto contro il 4.5:1 richiesto da WCAG 2.1 AA, su un campo
     OBBLIGATORIO. Default applicato: 60%, che porta il rapporto sopra la
     soglia mantenendo la gerarchia visiva voluta. Vedi spec § 7. */

  --eia-color-text-muted: rgba(255, 255, 255, 0.6);

  /* Separatori e bordi sottili */
  --eia-color-hairline: rgba(255, 255, 255, 0.15);

  /* Versione trasparente del fondo footer, per le sfumature della spec
     § 3.6. Serve perche' un gradiente verso "transparent" in alcuni
     browser interpola passando dal nero, producendo una banda scura. */
  --eia-color-bg-footer-fade: rgba(46, 44, 41, 0);

  /* Dimensione minima leggibile per il testo di servizio.
     Il design pone il consenso privacy a 9px (nodo 2566:268). Sotto i
     12px il testo e' di fatto illeggibile su schermo, e per un consenso
     al trattamento dati non e' un dettaglio estetico: il GDPR richiede
     forma "chiaramente distinguibile, comprensibile e facilmente
     accessibile" (art. 7 c. 2). Default applicato: 12px. */
  --eia-fs-consent-min: 12px;


  /* --- Stati interattivi -----------------------------------------------
     Non definiti nel file Figma. Default da [ASSUMIBILE] spec § 7. */

  --eia-hover-brightness: 1.15;
  --eia-transition:       150ms ease;
  --eia-transition-slow:  300ms ease;

  /* Anello di focus. Usa currentColor per restare leggibile su qualunque
     fondo, come da default dichiarato nella spec. */
  --eia-focus-width:  2px;
  --eia-focus-offset: 2px;


  /* --- Esito del form --------------------------------------------------
     Nessun colore di stato nel design: il form mostra solo il campo.
     Scelti due valori che superano 4.5:1 sul fondo --eia-color-bg-footer
     (#2e2c29): verde 7.4:1, rosso 5.6:1. */

  --eia-color-success: #7dd396;
  --eia-color-error:   #ef8a7f;

  /* Fondo tenue per i messaggi di errore e per l'evidenziazione dei
     segnaposto di contenuto in sviluppo. */
  --eia-color-error-bg: rgba(239, 138, 127, 0.12);


  /* --- Impilamento -----------------------------------------------------
     Scala esplicita: senza, gli overlay dei blocchi progetto e la navbar
     sticky finiscono a contendersi lo stesso piano. */

  --eia-z-decor:    0;   /* ellissi sfocate di fondo */
  --eia-z-content: 10;
  --eia-z-overlay: 20;   /* pannello sopra il media del blocco progetto */
  --eia-z-sticky:  30;   /* barre pilastri, blocchi impilati */
  --eia-z-nav:     40;   /* pill navbar */
  --eia-z-menu:    50;   /* menu mobile aperto */


  /* --- Scroll-stacking -------------------------------------------------
     [BLOCCANTE] spec § 5.1: offset di aggancio, punto di rilascio e
     comportamento mobile NON sono deducibili dal file Figma. I valori qui
     sotto sono un default dichiarato, da confermare con chi ha disegnato
     il prototipo.

     Aggancio: sotto la navbar, con un margine di respiro.
     Sfalsamento: ogni blocco si ferma qualche pixel piu' in basso del
     precedente, cosi' il bordo di quello sotto resta visibile. */

  --eia-stack-top:    calc(var(--eia-nav-offset) + var(--eia-nav-height) + var(--eia-space-md));
  --eia-stack-offset: 24px;   /* scalino fra un blocco impilato e il successivo */
}