/* =========================================================================
   01-token.css — i valori. 03/09/2026.

   REGOLA DELLO STRATO, E VALE PER TUTTI I FILE DI QUESTA CARTELLA:
   un colore, una misura o una durata si scrivono QUI e da nessun'altra
   parte. Negli altri strati e nei fogli di pagina si usa var(--lc-…).
   Con 120 pagine da migrare, un valore scritto in due punti e' un valore
   che prima o poi divergera'.

   L'unica eccezione ammessa e' un valore che esiste in una pagina sola e
   non significa niente altrove — per esempio le dodici tinte pastello dei
   percorsi della Longevity, che restano nel foglio di quella pagina.

   I VALORI NON SONO NUOVI. Vengono dalle pagine gia' online e approvate dal
   cliente (Centro Longevity da luglio 2026, Palestra del Benessere da
   agosto), estratti da assets/css/longevity.css e longevity-immagini.css.
   Non sono stati "ridisegnati": due pagine dello stesso sito che divergono
   di due pixel sull'occhiello sono un difetto, non una variazione.
   ========================================================================= */

.lc-page {

	/* --- Colori di brand ------------------------------------------------
	   Il blu e' il colore istituzionale, l'azzurro quello delle azioni.    */
	--lc-blu:            #004a87;   /* titoli, fondi pieni.   9,02:1 su bianco */
	--lc-blu-chiaro:     #3661ab;   /* occhiello, numeri.     6,08:1 su bianco */
	--lc-azzurro:        #44ade3;   /* bottone primario, focus */
	--lc-azzurro-scuro:  #2f9bd2;   /* hover del primario */
	--lc-azzurro-tenue:  #7fcdf2;   /* occhiello e focus SU FONDO BLU. 5,12:1 */

	/* ⚠️ --lc-azzurro su bianco fa 2,52:1 e il testo bianco su --lc-azzurro
	   fa altrettanto: sotto qualunque soglia WCAG. E' il colore di brand del
	   bottone "Prenota subito" dell'header ed e' approvato dal cliente cosi'
	   (CLAUDE.md §7.4). NON usarlo per il testo: per quello c'e'
	   --lc-blu-chiaro. Per rientrare servirebbe scurirlo a #1a7fb3 (4,44:1)
	   o #0e5f88 (6,97:1) — decisione del cliente, non di impaginazione. */

	/* --- Testo ---------------------------------------------------------- */
	--lc-testo:          #42525e;   /* corpo.                 8,26:1 su bianco */
	--lc-testo-tenue:    #33414c;   /* sottotitoli, occhielli scuri */
	--lc-testo-su-blu:   #d6e7f4;   /* corpo su fondo blu.    7,12:1 */
	--lc-bianco:         #fff;

	/* --- Superfici e bordi ---------------------------------------------
	   ⚠️ #f5f8fa contro il bianco NON si distingue a schermo: usato per
	   alternare le sezioni faceva leggere la pagina come una colonna unica
	   (CLAUDE.md §7.1). --lc-fondo-alt e' un gradino piu' marcato ed e'
	   quello da usare per il ritmo delle sezioni; --lc-superficie resta per
	   i fondi che devono solo staccare di pochissimo.                      */
	--lc-superficie:     #f5f8fa;
	--lc-fondo-alt:      #eef4f9;
	--lc-fondo-tenue:    #f4f9fd;   /* hover di righe e card */
	--lc-chip-fondo:     #e4eff8;
	--lc-chip-testo:     #1f4a6d;   /* 7,97:1 sul fondo chip */
	--lc-bordo:          #dbe6f0;   /* bordo di card e riquadri */
	--lc-bordo-tenue:    #e6eef6;   /* separatori interni */
	--lc-bordo-bottone:  #cfdae4;   /* bordo del bottone secondario */
	--lc-bordo-su-blu:   #6fa8d0;   /* bordo del secondario su fondo blu */

	--lc-focus:          var(--lc-azzurro);

	/* --- Misure --------------------------------------------------------
	   --lc-header-h non e' l'altezza dell'header: e' quanto spazio lasciare
	   sopra un'ancora. ⚠️ Non dedurla dal DOM al volo: quale elemento copre
	   davvero la pagina (#header o #header_main) NON e' stabile — il
	   31/08/2026 era #header_main, il 02/09 in produzione #header, e chi
	   ne cercava uno per nome misurava zero (CLAUDE.md §8.1). Dove serve la
	   misura vera al momento del click, la fa il JS guardando quale dei due
	   e' fuori dal flusso. Questo valore e' la rete di sicurezza per gli
	   arrivi da URL con hash.                                              */
	--lc-header-h:       104px;
	--lc-header-h-mob:   96px;

	--lc-raggio:         14px;      /* card e riquadri grandi */
	--lc-raggio-piccolo: 12px;      /* card in griglia, voci di accordion */
	--lc-raggio-bottone: 4px;

	--lc-larghezza:      1176px;    /* contenitore: la larghezza utile a 1440 */
	--lc-larghezza-testo: 860px;    /* colonna di sola lettura, ~75 caratteri */

	/* --- Movimento ------------------------------------------------------
	   Una durata sola per tutto: due componenti che si aprono con tempi
	   diversi sulla stessa pagina si notano. La curva e' quella gia' in uso
	   sull'apertura delle fasi cliniche e delle FAQ (CLAUDE.md §8.4).      */
	--lc-durata:         .28s;
	--lc-curva:          cubic-bezier(.22, .61, .36, 1);
}