/* ============================================================================
   DESIGN TOKEN — proposta "Oltremare"
   ============================================================================

   Questo file è l'unico posto del progetto in cui compaiono i colori, i corpi
   del testo e le misure del sito. Tutti gli altri fogli di stile li richiamano
   per nome, con la formula `var(--nome-del-token)`.

   A cosa serve: per cambiare, per esempio, il blu di tutti i bottoni del sito
   basta modificare qui una riga, e la modifica si propaga ovunque. Se invece i
   colori fossero riscritti in ogni file bisognerebbe cercarli uno per uno, con
   il rischio di dimenticarne qualcuno.

   Ogni riga qui sotto ha il suo commento: la spiegazione sta accanto al valore
   e non si perde quando il file viene riordinato. Un test automatico
   (`test_design_tokens.py`) controlla che la regola valga sempre, e che nessun
   colore della palette venga riscritto a mano in un altro foglio di stile.

   Riferimento: spec/style/STYLE-GUIDE.md
   ========================================================================= */

:root {
  /* --- Palette ------------------------------------------------------------
     Sette colori in tutto. Il blu oltremare è l'unico accento: va sui bottoni
     e sui dettagli, mai su superfici grandi, altrimenti il sito perde la sua
     quiete notturna e le foto smettono di essere le protagoniste. */

  --ultra: #2436C8;          /* Blu oltremare: bottoni, link, dettagli in evidenza */
  --ultra-hi: #4257F0;       /* Blu più chiaro: solo per il passaggio del mouse e gli stati attivi */
  --ultra-text: #7083FF;     /* Blu schiarito per il TESTO piccolo su fondo scuro: contrasto ≥ 5:1 (--ultra-hi arriva solo a 3,2:1, sotto la soglia AA) */
  --deep: #080D33;           /* Blu notte: sfondo di tutte le pagine */
  --deep-2: #0D1447;         /* Blu notte leggermente più chiaro: card e sezioni alternate */
  --ice: #EEF0FF;            /* Bianco ghiaccio: colore del testo su fondo scuro */
  --ink-dim: #9AA1D4;        /* Azzurro spento: didascalie, date, testo di servizio */
  --on-accent: #FFFFFF;      /* Bianco pieno: testo scritto sopra il blu oltremare */

  /* --- Palette in componenti numeriche ------------------------------------
     Gli stessi colori scomposti nei tre numeri rosso/verde/blu. Servono per
     ottenere versioni semitrasparenti senza riscrivere il colore: si usano
     nella forma `rgb(var(--ice-rgb) / .15)`, dove l'ultimo numero è
     l'opacità (0 = invisibile, 1 = pieno). */

  --ultra-rgb: 36 54 200;    /* Componenti del blu oltremare, per i veli trasparenti */
  --ice-rgb: 238 240 255;    /* Componenti del bianco ghiaccio, per bordi e testo attenuato */
  --deep-rgb: 8 13 51;       /* Componenti del blu notte, per le velature sopra le foto */

  /* --- Superfici e bordi derivati -----------------------------------------
     Combinazioni ricorrenti di colore e trasparenza, nominate una volta sola
     perché tornano in header, bottoni, card e footer. */

  --line: rgb(var(--ice-rgb) / .15);              /* Righe sottili di separazione fra le sezioni */
  --border-strong: rgb(var(--ice-rgb) / .32);     /* Bordo più marcato dei bottoni trasparenti */
  --surface-glass: rgb(var(--ice-rgb) / .1);      /* Fondo "vetro" dei bottoni sopra le foto */
  --surface-glass-hi: rgb(var(--ice-rgb) / .2);   /* Stesso fondo vetro al passaggio del mouse */
  --text-soft: rgb(var(--ice-rgb) / .82);         /* Testo lungo: leggermente meno acceso del bianco */
  --text-muted-ui: rgb(var(--ice-rgb) / .72);     /* Voci di menu a riposo, prima del passaggio del mouse */
  --scrim-deep: rgb(var(--deep-rgb) / .82);       /* Velo scuro dell'header sopra la foto dell'hero */

  /* --- Caratteri ----------------------------------------------------------
     Due famiglie, servite dal sito stesso (mai da Google): il serif per i
     titoli, il senza grazie per tutto il resto. Dopo il nome del carattere
     sono elencate le alternative di sistema, usate solo se il file non si
     carica. */

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;                 /* Titoli: elegante, con grazie */
  --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Testo corrente, menu, bottoni */

  /* --- Corpi del testo ----------------------------------------------------
     Sono scritti con `clamp(minimo, valore-che-si-adatta, massimo)`: il testo
     cresce insieme alla larghezza dello schermo restando dentro i due limiti.
     Così non serve una misura diversa per ogni dimensione di schermo. */

  --step-hero: clamp(52px, 9vw, 140px);      /* Titolone della prima schermata */
  --step-section: clamp(38px, 5.4vw, 76px);  /* Titolo di una sezione della pagina */
  --step-quote: clamp(22px, 3.2vw, 44px);    /* Citazione sulla banda fotografica */
  --step-title-lg: clamp(34px, 4.4vw, 58px); /* Titolo grande di un blocco (es. newsletter) */
  --step-title-md: clamp(26px, 2.8vw, 34px); /* Titolo di una card di produzione o di un link rapido */
  --step-title-sm: clamp(24px, 2.6vw, 32px); /* Titolo di una card evento */
  --step-lead: clamp(17px, 1.5vw, 20px);     /* Paragrafo di apertura, più grande del testo normale */

  --text-body: 17px;         /* Testo corrente delle pagine */
  --text-meta: 14px;         /* Didascalie, luoghi, voci del footer */
  --text-ui: 13px;           /* Etichette dei bottoni */
  --text-eyebrow: 11px;      /* Sopratitolo maiuscolo che precede i titoli */
  --text-micro: 10px;        /* Etichette minime: intestazioni di colonna e di scheda dati */

  --leading-body: 1.68;      /* Distanza fra le righe del testo corrente */
  --leading-title: 1.02;     /* Distanza fra le righe dei titoli: quasi nulla, righe compatte */
  --weight-body: 300;        /* Spessore del testo corrente: leggero */
  --weight-ui: 500;          /* Spessore di bottoni ed etichette: medio */

  /* --- Spaziatura fra le lettere ------------------------------------------
     I titoli grandi vengono stretti, le etichette maiuscole vengono allargate:
     è ciò che dà al sito il suo aspetto da programma di sala. */

  --track-hero: -.035em;     /* Titolone: lettere ravvicinate */
  --track-title: -.015em;    /* Titoli normali: lettere appena ravvicinate */
  --track-eyebrow: .24em;    /* Sopratitolo maiuscolo: lettere molto distanziate */
  --track-label: .22em;      /* Etichette piccole maiuscole */
  --track-ui: .12em;         /* Testo dei bottoni */
  --track-nav: .1em;         /* Voci del menu */

  /* --- Impianto della pagina ---------------------------------------------- */

  --wrap: 1340px;                    /* Larghezza massima del contenuto: oltre, resta centrato */
  --gut: clamp(20px, 4vw, 52px);     /* Margine bianco fra il contenuto e il bordo dello schermo */
  --header-h: 82px;                  /* Altezza della barra in alto */
  --header-h-sm: 66px;               /* Altezza della barra in alto sugli schermi piccoli */
  --radius: 2px;                     /* Arrotondamento degli angoli: appena accennato */

  --section-pad: clamp(76px, 9vw, 132px);  /* Spazio vuoto sopra e sotto ogni sezione */
  --section-gap: clamp(36px, 4.6vw, 58px); /* Spazio fra il titolo di una sezione e il suo contenuto */
  --grid-gap: clamp(18px, 2.4vw, 30px);    /* Spazio fra le card affiancate */

  /* --- Proporzioni delle immagini ----------------------------------------- */

  --ratio-cover: 4 / 5;      /* Copertine delle produzioni: verticali, come una locandina */
  --ratio-card: 4 / 3;       /* Foto in cima alle card evento */
  --ratio-band: 32 / 11;     /* Banda fotografica panoramica con la citazione */
  --ratio-panorama: 2 / 1;   /* Foto grande di apertura di una sezione, larga ma non una striscia */

  /* --- Segnalazione di errore ---------------------------------------------
     L'unico colore caldo del progetto, e l'unico che esce dalla famiglia
     dell'oltremare: serve appunto a distinguersi da tutto il resto. Si usa
     solo per i campi da correggere nei moduli, mai per decorare. Su fondo blu
     notte il contrasto è 8,3:1, ben oltre la soglia AA. */

  --errore: #FF8898;         /* Corallo: bordo e testo dei campi da correggere */

  /* --- Trattamento delle fotografie ---------------------------------------
     Tutte le foto del sito passano dalla stessa correzione, perché materiali
     scattati in anni e teatri diversi sembrino appartenere alla stessa
     pubblicazione. Nessuna foto viene desaturata: si aumenta appena il
     contrasto, si abbassa un poco la luminosità e si stende sopra un velo
     di blu oltremare che tinge solo il colore, lasciando intatte luci e
     ombre. */

  --photo-filter: contrast(1.06) brightness(.92) saturate(1.1); /* Correzione applicata a ogni foto */
  --photo-veil: .16;         /* Quanto è visibile il velo blu sopra le foto (0 = assente) */

  /* --- Animazioni ---------------------------------------------------------
     Durate brevi e uguali per tutti i componenti. Chi ha attivato nel proprio
     sistema la riduzione delle animazioni le vede azzerate: se ne occupa
     `components.css`. */

  --motion: .22s;            /* Durata normale di un passaggio di colore o di stato */
  --motion-slow: .3s;        /* Durata più lenta, per le immagini che schiariscono */

  /* --- Livelli di sovrapposizione -----------------------------------------
     Quale elemento sta sopra a quale quando si accavallano. */

  --z-header: 100;           /* La barra in alto sta sopra al contenuto della pagina */
  --z-skip: 200;             /* Il collegamento "salta al contenuto" sta sopra a tutto */
}

/* --- Soglie di adattamento (per memoria) -------------------------------------
   Le larghezze di schermo a cui il layout cambia sono 1120px, 900px e 640px.
   Non possono diventare token perché il linguaggio CSS non permette di usare
   una variabile dentro una regola `@media`: vanno riscritte come numeri nei
   singoli fogli di stile. Se cambiano, vanno aggiornate anche lì.
   -------------------------------------------------------------------------- */