/* tokens.css — design genome event_rental. Noleggio/allestimenti per eventi e feste: registro GIOCOSO e
   arioso. Base SABBIA calda, superfici bianche, tre tinte pastello per le porte del catalogo, azzurro del
   marchio come accento. Il carattere lo danno la FORMA (angoli molto morbidi, pillole) e un display
   arrotondato: è ciò che distingue una vetrina di feste da una vetrina di studio professionale.
   Vocabolario CHIUSO: i nomi dei ruoli colore coincidono 1:1 con palette_roles dell'IR.

   ⭐⭐ LE SUPERFICI SONO QUELLE DEL CLIENTE, GLI INCHIOSTRI NO. Sabbia, bianco, salmone, azzurro polvere,
   rosa e la pillola d'accento sono i valori esatti del materiale di riferimento. Gli inchiostri invece
   NON possono esserlo: testo bianco su quei pastelli misura 1.50-1.74 e l'azzurro chiaro su bianco 2.05,
   cioè sotto ogni soglia — perfino sotto il 3.0 del testo grande. Portando il testo all'inchiostro caldo
   le stesse superfici danno 9.46-11.02 senza cambiare di una virgola il colore delle lastre.

   ⚠ VINCOLI D'USO, misurati:
   - --brand-mid è l'azzurro chiaro del materiale: SUPERFICIE e decoro, mai testo (2.05 su bianco).
   - --brand è l'azzurro che porta TESTO su chiaro (4.83 su sabbia, 5.66 su bianco) ma NON su scuro (2.95):
     sulle superfici scure l'accento è --sage, il ciano del marchio (10.56).
   - --accent, --accent-dark e le tre porte sono SUPERFICI: portano solo --ink o --ink-muted.
   - La banda alternata è più CHIARA della pagina, non più scura: su una banda più scura l'azzurro scende
     a 4.50, cioè a margine zero, e un margine zero non è un margine. */
:root {
  /* --- Colore. L'azzurro vive in due gradi: uno PROFONDO che porta testo, uno CHIARO che è solo
     superficie. Il ciano del marchio è l'accento delle superfici scure. --- */
  --brand-dark: #1B4560;  /* azzurro profondo: hover, fasce */
  --brand:      #215274;  /* azzurro del marchio: link, CTA, testo-accento. Portato sopra AAA (7.10 su sabbia,
                           8.32 su bianco): la tinta resta la loro, il grado no — quello del materiale
                           misurava 2.05 e non porta testo in nessun caso. */
  --brand-mid:  #8BB4D0;  /* azzurro chiaro del materiale: SUPERFICIE e decoro (porta solo ink, 8.28) */
  --sage:       #7FDCE6;  /* ciano del marchio: accento su scuro (10.56) e decoro su chiaro */
  --sage-light: #A8EAF2;  /* ciano chiaro */
  --sage-tint:  #DFF1F4;  /* tint ciano: chip e superfici tenui */
  --accent-ink: #8F4A34;  /* terracotta profonda: il caldo che porta TESTO su chiaro (5.60 su sabbia) */
  --accent:     #E6C9BC;  /* pillola d'accento del materiale (testo ink 10.55) */
  --accent-dark:#F0DDD4;  /* pillola chiara: stato di passaggio */

  --paper:   #F3ECE2;  /* fondo pagina: la sabbia del materiale */
  --surface: #FFFFFF;  /* card: il bianco pieno del materiale, che stacca sulla sabbia */
  --ink:     #241E19;  /* testo principale (14.05 su sabbia, 16.47 su bianco) */
  --ink-muted:#3E362E; /* testo secondario (10.11 su sabbia, 6.81 sul pastello più scuro) */
  --line:    #E4DACF;  /* bordi e divisori caldi (non-testo) */
  --on-dark: #FFFFFF;  /* testo su superfici scure (16.70) */
  --on-dark-muted:#D8CFC5; /* testo secondario su scuro (10.85) */
  --focus:   #215274;  /* anello di focus */

  /* --- Extra di design (non ruoli IR) --- */
  /* La banda alternata SCHIARISCE invece di scurire: è il modo in cui il ritmo delle sezioni alleggerisce
     la pagina invece di appesantirla, e lascia all'azzurro il margine che una banda scura gli toglie. */
  --sand:    #FAF6EF;  /* sezioni "alt": crema chiara */
  --sand-deep:#E4D8C8; /* sabbia piena: numeri-fantasma e decori, mai testo */
  --cream:   #F8F7F3;  /* targa/pillola chiara: il pannello che poggia sulle superfici colorate */
  --plaque:  #F8F7F3;  /* alias di targa usato dalle testate fotografiche */

  /* Le tre PORTE del catalogo: lastre a tinta piena, i valori esatti del materiale. Portano solo
     inchiostro (9.46 / 11.02 / 10.42), mai testo chiaro. */
  --door-1: #E8BAAD;  /* salmone */
  --door-2: #BAD9DC;  /* azzurro polvere */
  --door-3: #E8C5CB;  /* rosa */

  /* Le superfici scure restano CALDE (calore +0.035 contro il +0.067 della sabbia): una lastra neutra o
     fredda in mezzo a sabbia e pastelli si legge come un pezzo di un altro sito. Sul buio il marchio
     chiarissimo trova il fondo che gli serve. */
  --dark:     #221D19; /* VELI fotografici (testate di pagina, hero): restano neutri-caldi, perché un velo
                          colorato sopra una foto satura somma due voci */
  --dark-deep:#1B1714; /* velo più fondo */

  /* ⭐⭐ IL CROMO NON È PIÙ QUASI-NERO. Il marchio del cliente è un gradiente grigio→ciano: su una barra
     nera brillava ma la pagina diventava cupa. Il petrolio è la finestra in cui stanno TUTTI e tre i
     vincoli — bianco della nav 8.10, marchio del cliente 6.01, ciano del hover 5.12 — ed è l'unica
     famiglia di scuro che il marchio non contraddice: è il suo stesso lato freddo, tre gradini sotto. */
  --chrome:      #2B5566; /* testata */
  --chrome-deep: #1F4050; /* piè */

  --bg: var(--paper);
  --fg: var(--ink);

  /* --- Tipografia: Varela Round (display arrotondato) + Alegreya Sans (testo), OFL self-hosted.
     tokensOf() legge --font-display e --font-body (lancia se un token manca).
     ⚠⚠ VARELA ROUND HA UN SOLO PESO (400). Chiedere un 600 o un 700 non lo irrobustisce: fa sintetizzare
     al browser un finto neretto che ingrossa e sporca proprio le curve per cui il carattere è stato scelto.
     La gerarchia si fa quindi con la MISURA, il colore e le maiuscolette, mai col peso.
     ⚠ La scala display è più BASSA di quella di un serif: Varela Round ha un'altezza-x alta e tratti pieni,
     quindi alla stessa misura in px «pesa» molto di più e va tenuto più piccolo per non gridare. --- */
  --font-display: "Varela Round", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  /* ⭐⭐ UNA SOLA FAMIGLIA SU TUTTO IL SITO. Il carattere scelto dal cliente non è la voce dei soli titoli:
     è il carattere del marchio, e un corpo di famiglia diversa lo contraddice a ogni paragrafo.
     ⚠ Conseguenza diretta del peso unico: NESSUN testo può essere in neretto. L'enfasi passa dal COLORE
     (parola scura su testo tenue), che è anche il modo in cui il materiale del cliente la segna. */
  --font-body: "Varela Round", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  --text-xs:  0.8125rem;  /* 13px */
  --text-sm:  0.9375rem;  /* 15px */
  --text-base: 1.0625rem; /* 17px corpo */
  --text-md:  1.1875rem;  /* 19px lead */
  --text-lg:  1.3125rem;  /* 21px H3 */
  --text-xl:  clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem);
  --text-2xl: clamp(1.9rem, 1.35rem + 2.2vw, 2.8rem);   /* display sezione */
  --text-3xl: clamp(2.3rem, 1.6rem + 3.1vw, 3.9rem);    /* display hero */

  /* Il display arrotondato regge un'interlinea appena più aperta del serif: le curve chiuse hanno bisogno
     di aria fra le righe per non impastarsi. */
  --lh-tight: 1.1;
  --lh-snug: 1.22;
  --lh-body: 1.72;
  --tracking-label: 0.16em; /* micro-label maiuscole: il contrappunto del display arrotondato */

  /* --- Spaziatura (ritmo arioso) --- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --space-9: 6rem; --space-10: 8rem;
  --section-y: clamp(3.2rem, 2rem + 4.5vw, 6rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 740px;
  --gutter: clamp(1.1rem, 0.5rem + 3vw, 2rem);

  /* --- Forma: è QUI che vive il registro giocoso. L'angolo molto morbido e la pillola sono il segnale
     più forte del «non è un sito serioso», più del colore e più del carattere: una tessera con l'angolo
     vivo resta una scheda di catalogo qualunque tinta le si dia. --- */
  --radius: 34px;      /* tessere, card, riquadri */
  --radius-lg: 46px;   /* lastre grandi: porte, bande, hero */
  --radius-sm: 20px;   /* la foto DENTRO la sua cornice di carta */
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* --- ⭐⭐ IL VETRO. Non è un effetto decorativo: è un MATERIALE, e come tale ha tre proprietà che vanno
     insieme o non funziona. (1) È semitrasparente, quindi prende colore da ciò che ha sotto. (2) Ha un
     BORDO CHIARO in alto e uno scuro in basso — il riflesso e l'ombra dello spessore: è la riga che
     distingue una lastra di vetro da un rettangolo semitrasparente. (3) Sfoca e SATURA ciò che filtra,
     sennò il contenuto sotto si legge sporco invece che diffuso.
     ⚠ Su un fondo uniforme la sfocatura non ha nulla da diffondere: lì il vetro lo fanno la trasparenza,
     il bordo e il riflesso. Si vede davvero dove passa sopra una fotografia. --- */
  --glass:        rgba(255,255,255,.74);
  --glass-alta:   rgba(255,255,255,.86);
  --glass-sfoca:  blur(20px) saturate(1.55);
  --glass-bordo:  inset 0 1px 0 rgba(255,255,255,.92), inset 0 0 0 1px rgba(255,255,255,.42), inset 0 -1px 0 rgba(36,30,25,.05);

  /* --- Ombre: morbide e basse. Una superficie arrotondata senza un minimo di stacco galleggia male sulla
     sabbia; l'ombra qui sostituisce il bordo, che su un angolo largo si legge come contorno di adesivo. --- */
  --shadow-sm: 0 2px 6px -3px rgba(36,30,25,.10), 0 14px 32px -18px rgba(36,30,25,.22);
  --shadow-md: 0 4px 10px -4px rgba(36,30,25,.12), 0 28px 60px -28px rgba(36,30,25,.34);

  /* --- Griglia foto: il gutter è OBBLIGATORIO (le tessere non si toccano mai) --- */
  --tile-gap: clamp(0.9rem, 0.5rem + 1.4vw, 1.7rem);
  /* Passe-partout: il margine di carta attorno alla foto di prodotto. Toglie alle immagini con grafica
     promozionale impressa il tono da volantino e le riporta a scheda di catalogo. */
  --mat: clamp(0.7rem, 0.45rem + 0.9vw, 1.1rem);

  /* --- Motion: UNA sola grammatica, lenta. Risalita breve; nient'altro si muove. --- */
  --ease: cubic-bezier(.22,.61,.28,1);
  --dur: 240ms;
  --dur-reveal: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-reveal: 0ms; }
}