/*
Design system Vanda · token
Versione 1.5 · 14 ottobre 2026
Tre livelli, dall'alto in basso:
1. Tavolozza: i colori veri, campionati dai loghi, dalle confezioni e dal negozio.
Non si usano direttamente nei componenti.
2. Ruoli: quello che i componenti leggono (--vd-azione, --vd-titoli, ...).
Di default puntano alla casa Vanda.
3. Temi di linea: [data-linea="..."] su un contenitore ridefinisce i ruoli.
Tutto quello che sta dentro cambia faccia senza toccare i componenti.
Caratteri (Google Fonts, gratuiti). Da mettere nel di ogni pagina:
Solo per Cera di Cleo, in aggiunta:
Solo per Insu Lean, in aggiunta:
Solo per il Circolo dei Medici, in aggiunta:
*/
:root {
/* ---------- 1. Tavolozza ---------- */
/* Casa Vanda. Il verde è quello del logo (#037831) e del negozio (#047832). */
--vanda-verde: #047832;
--vanda-verde-scuro: #03602A; /* passaggio del mouse e pressione: scurisce, non schiarisce */
--vanda-verde-velo: #E8F3EC;
--vanda-inchiostro: #222529; /* titoli */
--vanda-grafite: #3F3F3F; /* testo corrente */
--vanda-grigio: #666666; /* note e didascalie. Il #777 del negozio è sotto 4,5:1 */
--vanda-bordo: #DADBD8;
--vanda-bordo-forte: #BCBDBD;
--vanda-carta: #FFFFFF;
--vanda-carta-2: #F5F5F2;
/* Cera di Cleo: dalla landing live v4 (promo.vandastore.it/cera-di-cleo-kit-di-prova-0526-4,
letta il 29/09/2026), da brand_guidelines.md §5 (v6) e dal logo */
--cdc-avorio: #F5EFE6;
--cdc-avorio-chiaro: #FBF7F0;
--cdc-beige: #EBE1D2;
--cdc-beige-2: #E6DDC9;
--cdc-inchiostro-notte: #101612; /* titoli e bottoni della landing v4 */
--cdc-inchiostro: #1F2A22; /* fascia scura in cima, sezioni scure */
--cdc-inchiostro-morbido: #232C25; /* testo corrente */
--cdc-verde-grigio: #3D4A3F;
--cdc-oro: #B8935C; /* filetti, dettagli */
--cdc-oro-logo: #CEA33F; /* oro del logo e dell'astuccio */
--cdc-oro-chiaro: #CDB98A;
--cdc-bronzo: #8B6F47; /* corsivo nei titoli: 4,1:1 su avorio, solo titoli grandi */
--cdc-bronzo-scuro: #6A5234; /* etichette in oro leggibili su avorio */
/* Il Patto Collagene. Logo: rosso campionato dal file. Landing: Brand/Identità visiva/
03 Il Patto Collagene/Landing - style.css. Astuccio: file di stampa vettoriale
(valori campionati dal render, da confermare sul file di stampa). */
--patto-rosso: #BA1A1A; /* logo: corna, occhi, coda */
--patto-rosso-landing: #8B0015; /* bottoni e titoli di sezione della landing */
--patto-rosso-vivo: #B3001B; /* il rosso chiaro della landing: solo decoro e sfumature */
--patto-bordeaux: #680F15; /* astuccio, a metà sfumatura */
--patto-notte: #200810; /* astuccio, in alto */
--patto-rosso-stampa: #952629; /* astuccio, in basso */
--patto-nero: #121212; /* quasi nero della landing */
--patto-oro: #C5A880; /* dettagli della landing: solo decoro, 2,3:1 sul bianco */
--patto-grigio-chiaro: #F5F5F7; /* fondo chiaro della landing */
/* Insu Lean: dalla landing saltalontanodaldiabete.it, letta il 30/09/2026. L'orchidea è
quella del logo (campionata dal file: #BA66A4): sul bianco è 4:1, non regge il testo. */
--insu-orchidea: #B2669C; /* voce attiva del menu e piè di pagina della landing */
--insu-orchidea-scura: #8A3F78; /* testo e bottoni: non è sulla landing, serve per il contrasto */
--insu-orchidea-notte: #6E3160;
--insu-nero: #1A1A1A; /* titoli della landing */
--insu-testo: #333333;
--insu-rosato: #F7F0F2; /* fondo della landing */
--insu-verde-landing: #3EB512; /* il bottone della landing: 2,7:1 col testo bianco, qui non si usa */
/* Esperivit: verde della foglia, arancio-oro del frutto e della fascia */
--esperivit-verde: #087240;
--esperivit-verde-scuro: #065A32;
--esperivit-arancio: #E6AB4F;
--esperivit-arancio-pieno: #DD7C2C;
--esperivit-velo: #FDF4E6;
/* Gsh-Va Glutatione: rosso della scatola (logo non presente in Brand/). La landing
glutationefficace.com, letta il 30/09/2026, usa un rosso più morbido, quasi sempre in velatura. */
--gsh-rosso: #D80008;
--gsh-rosso-landing: #E04748; /* 4,1:1 sul bianco: solo velature e decoro */
--gsh-verde-landing: #44AE00; /* il bottone della landing: 2,9:1 col testo bianco, qui non si usa */
--gsh-rosso-scuro: #B00007;
--gsh-antracite: #3A3B3D;
--gsh-velo: #FCECEC;
--gsh-rosso-logo: #C63B38; /* tavola del logo (6 ottobre 2026): CMYK 7/98/90/1 convertito; il negativo del logo va su questo */
/* Circolo dei Medici: dalla landing (Brand/Identità visiva/05 Circolo dei Medici/
Landing - style.css), che prende i colori dal Quaderno n. 5 */
--circolo-blu-notte: #16162C; /* titoli e bottoni */
--circolo-blu-notte-2: #212140; /* passaggio del mouse, sezioni scure */
--circolo-senape: #D8A227; /* il colore del Circolo: scena dell'intestazione, filetti */
--circolo-senape-chiaro: #E6B94C;
--circolo-carta: #FAF9F6; /* fondo delle sezioni editoriali */
--circolo-testo: #2D2D3A;
--circolo-grigio: #66667A; /* note. Il #7A7A8C della landing è 4,2:1 sul bianco */
/* Dal 14/10/2026: il codice visivo dei Quaderni (copertine n. 1-6). Il giallo della testata
sostituisce il senape della vecchia landing come colore del Circolo. */
--circolo-giallo: #ECAC26; /* testata dei Quaderni: blu notte sopra 8,8:1 */
--circolo-giallo-velo: #FDF3D8; /* fondo chiaro delle sezioni gialle */
--circolo-evidenziatore: #F7D46B;/* evidenziatore sotto il testo: testo sopra 9,5:1 */
--circolo-celeste: #0096C6; /* fasce delle copertine: solo fondi e titoli grandi (3,4:1 col bianco) */
--circolo-celeste-scuro: #00739A;/* celeste per il testo: 5,4:1 sul bianco */
/* ---------- 2. Ruoli (default: casa Vanda) ---------- */
--vd-marchio: var(--vanda-verde); /* colore del logo: filetti, bande, decoro */
--vd-azione: var(--vanda-verde); /* bottoni e link: regge il testo chiaro sopra */
--vd-azione-hover: var(--vanda-verde-scuro);
--vd-su-azione: #FFFFFF;
--vd-velo: var(--vanda-verde-velo); /* riquadri evidenziati */
--vd-fondo: var(--vanda-carta);
--vd-fondo-2: var(--vanda-carta-2);
--vd-fondo-scuro: var(--vanda-inchiostro);
--vd-su-scuro: #FFFFFF;
--vd-fondo-accento: var(--vanda-verde);
--vd-su-accento: #FFFFFF;
--vd-titoli: var(--vanda-inchiostro);
--vd-testo: var(--vanda-grafite);
--vd-note: var(--vanda-grigio);
--vd-etichetta: var(--vanda-verde-scuro);
--vd-bordo: var(--vanda-bordo);
--vd-bordo-forte: var(--vanda-bordo-forte);
--vd-fuoco: #0B57D0; /* anello di messa a fuoco da tastiera */
--vd-prezzo: var(--vanda-inchiostro);
--vd-prezzo-pieno: var(--vanda-grigio);
--vd-su-prove: #FFFFFF; /* testo della fascia delle prove */
--vd-evidenzia: var(--vanda-verde-velo); /* evidenziatore sotto le parole importanti */
--vd-fondo-testata: var(--vanda-carta-2); /* la testata delle pagine editoriali */
--vd-velo-accento: var(--vanda-verde-velo);
--vd-secondario: var(--vanda-verde); /* secondo colore della linea, per fasce e decoro */
--vd-secondario-testo: var(--vanda-verde-scuro);
/* Tre ruoli senza valore qui, di proposito: --vd-titolo-enfasi (ripiega su --vd-titoli),
--vd-fondo-prove (ripiega su --vd-marchio), --vd-font-sottotitolo e --vd-font-citazione
(ripiegano su --vd-font-lettura).
Un ruolo scritto qui come var(--altro-ruolo) verrebbe risolto una volta sola alla radice
e i temi di linea non lo cambierebbero più. Il ripiego sta nei componenti. */
/* ---------- Tipografia ---------- */
--vd-font-titoli: "Source Serif 4", Georgia, "Times New Roman", serif;
--vd-font-lettura: "Source Serif 4", Georgia, "Times New Roman", serif;
--vd-font-interfaccia: "Poppins", "Helvetica Neue", Arial, sans-serif;
--vd-font-dati: "Poppins", "Helvetica Neue", Arial, sans-serif;
--vd-stile-sottotitolo: normal;
--vd-peso-titoli: 700;
--vd-peso-sottotitoli: 600;
--vd-peso-interfaccia: 600;
--vd-traccia-titoli: -0.01em;
--vd-traccia-etichette: 0.08em;
/* Scala. 1rem = 16px. Il testo corrente sta a 19px, 18 sul telefono. Niente sotto 15px,
tranne le etichette in maiuscolo a 14px. */
--vd-t-etichetta: 0.875rem; /* 14 */
--vd-t-nota: 0.9375rem; /* 15 */
--vd-t-piccolo: 1.0625rem; /* 17: bottoni, didascalie lunghe */
--vd-t-corpo: 1.1875rem; /* 19 */
--vd-t-lead: 1.375rem; /* 22: sottotitolo */
--vd-t-h4: 1.375rem; /* 22 */
--vd-t-h3: 1.625rem; /* 26 */
--vd-t-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); /* 28 → 36 */
--vd-t-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); /* 34 → 52 */
--vd-t-prezzo: 1.625rem; /* 26 */
--vd-interlinea-testo: 1.6;
--vd-interlinea-titoli: 1.15;
--vd-misura: 40rem; /* colonna di lettura: circa 65 battute a 19px */
/* ---------- Spaziature (base 4px) ---------- */
--vd-s-1: 0.25rem; /* 4 */
--vd-s-2: 0.5rem; /* 8 */
--vd-s-3: 0.75rem; /* 12 */
--vd-s-4: 1rem; /* 16 */
--vd-s-5: 1.5rem; /* 24 */
--vd-s-6: 2rem; /* 32 */
--vd-s-7: 3rem; /* 48 */
--vd-s-8: 4rem; /* 64 */
--vd-s-9: 6rem; /* 96 */
--vd-s-10: 8rem; /* 128 */
/* ---------- Raggi ---------- */
--vd-r-piccolo: 6px;
--vd-r-medio: 12px;
--vd-r-grande: 20px;
--vd-r-pillola: 999px;
--vd-raggio-bottone: var(--vd-r-pillola); /* come i bottoni del negozio */
--vd-raggio-card: var(--vd-r-medio);
/* ---------- Ombre (morbide, mai più di tre livelli) ---------- */
--vd-ombra-1: 0 1px 2px rgba(34, 37, 41, 0.06), 0 1px 3px rgba(34, 37, 41, 0.08);
--vd-ombra-2: 0 2px 4px rgba(34, 37, 41, 0.05), 0 8px 24px rgba(34, 37, 41, 0.08);
--vd-ombra-3: 0 4px 8px rgba(34, 37, 41, 0.06), 0 20px 48px rgba(34, 37, 41, 0.12);
/* ---------- Misure dei comandi ---------- */
--vd-altezza-bottone: 3.25rem; /* 52px: sopra il minimo di 44 per il dito */
}
@media (max-width: 640px) {
:root {
--vd-t-corpo: 1.125rem; /* 18 */
--vd-t-lead: 1.25rem; /* 20 */
}
}
/* ---------- 3. Temi di linea ---------- */
[data-linea="cera-di-cleo"] {
--vd-marchio: var(--cdc-oro);
--vd-azione: var(--cdc-inchiostro-notte);
--vd-azione-hover: var(--cdc-inchiostro);
--vd-su-azione: var(--cdc-avorio);
--vd-velo: var(--cdc-avorio-chiaro);
--vd-fondo: var(--cdc-avorio);
--vd-fondo-2: var(--cdc-avorio-chiaro);
--vd-fondo-scuro: var(--cdc-inchiostro);
--vd-su-scuro: var(--cdc-avorio);
--vd-fondo-accento: var(--cdc-inchiostro);
--vd-su-accento: var(--cdc-avorio);
--vd-titoli: var(--cdc-inchiostro-notte);
--vd-testo: var(--cdc-inchiostro-morbido);
--vd-note: var(--cdc-verde-grigio);
--vd-titolo-enfasi: var(--cdc-bronzo);
--vd-su-prove: var(--cdc-inchiostro-notte); /* sulla landing il testo è avorio: 2,4:1 */
--vd-etichetta: var(--cdc-bronzo-scuro);
--vd-bordo: var(--cdc-beige-2);
--vd-bordo-forte: var(--cdc-oro);
--vd-prezzo: var(--cdc-inchiostro-notte);
--vd-prezzo-pieno: var(--cdc-verde-grigio);
--vd-font-titoli: "Cormorant Garamond", Georgia, serif;
--vd-font-lettura: "Inter", "Helvetica Neue", Arial, sans-serif;
--vd-font-interfaccia: "Inter", "Helvetica Neue", Arial, sans-serif;
--vd-font-dati: "JetBrains Mono", ui-monospace, Menlo, monospace;
--vd-font-sottotitolo: "Cormorant Garamond", Georgia, serif;
--vd-stile-sottotitolo: italic;
--vd-t-lead: 1.5rem; /* il Cormorant corsivo è piccolo di occhio: 24px */
--vd-peso-titoli: 300;
--vd-peso-sottotitoli: 500;
--vd-peso-interfaccia: 500;
--vd-traccia-titoli: -0.02em;
--vd-traccia-etichette: 0.06em;
}
[data-linea="il-patto"] {
--vd-marchio: var(--patto-rosso);
--vd-azione: var(--patto-rosso-landing);
--vd-azione-hover: var(--patto-bordeaux);
--vd-velo: var(--patto-grigio-chiaro);
--vd-fondo-2: var(--patto-grigio-chiaro);
--vd-fondo-scuro: var(--patto-bordeaux);
--vd-fondo-accento: var(--patto-nero);
--vd-titoli: var(--patto-nero);
--vd-etichetta: var(--patto-rosso-landing);
--vd-font-titoli: "Playfair Display", Georgia, "Times New Roman", serif;
--vd-font-lettura: "Inter", "Helvetica Neue", Arial, sans-serif;
--vd-font-interfaccia: "Inter", "Helvetica Neue", Arial, sans-serif;
--vd-font-dati: "Inter", "Helvetica Neue", Arial, sans-serif;
--vd-traccia-titoli: 0;
/* Caratteri della landing (Brand/Identità visiva/03 Il Patto Collagene/Landing - style.css),
scelti da Luca il 6 ottobre 2026 al posto dell'ITC Bodoni Seventy-Two della confezione,
che è commerciale. Courier Prime, terzo carattere della landing, resta fuori: lì fa solo
il «contratto» decorativo. */
}
[data-linea="insu-lean"] {
--vd-marchio: var(--insu-orchidea);
--vd-azione: var(--insu-orchidea-scura);
--vd-azione-hover: var(--insu-orchidea-notte);
--vd-velo: var(--insu-rosato);
--vd-fondo-2: var(--insu-rosato);
--vd-fondo-scuro: var(--insu-nero);
--vd-fondo-accento: var(--insu-orchidea-scura);
--vd-titoli: var(--insu-nero);
--vd-testo: var(--insu-testo);
--vd-etichetta: var(--insu-orchidea-scura);
--vd-fondo-prove: var(--insu-orchidea-scura); /* l'orchidea chiara non regge il testo */
--vd-prezzo: var(--insu-nero);
--vd-font-titoli: "Lexend", "Helvetica Neue", Arial, sans-serif;
--vd-font-lettura: "Lexend", "Helvetica Neue", Arial, sans-serif;
--vd-font-interfaccia: "Lexend", "Helvetica Neue", Arial, sans-serif;
--vd-font-dati: "Lexend", "Helvetica Neue", Arial, sans-serif;
--vd-traccia-titoli: 0;
}
[data-linea="esperivit"] {
--vd-marchio: var(--esperivit-arancio);
--vd-azione: var(--esperivit-verde);
--vd-azione-hover: var(--esperivit-verde-scuro);
--vd-velo: var(--esperivit-velo);
--vd-fondo-scuro: var(--esperivit-verde-scuro);
--vd-fondo-accento: var(--esperivit-verde);
--vd-etichetta: var(--esperivit-verde);
--vd-su-prove: var(--vanda-inchiostro);
}
[data-linea="gsh-va"] {
--vd-marchio: var(--gsh-rosso);
--vd-azione: var(--gsh-rosso);
--vd-azione-hover: var(--gsh-rosso-scuro);
--vd-velo: var(--gsh-velo);
--vd-fondo-scuro: var(--gsh-antracite);
--vd-fondo-accento: var(--gsh-rosso);
--vd-etichetta: var(--gsh-rosso-scuro);
}
[data-linea="circolo"] {
--vd-marchio: var(--circolo-giallo); /* dal 14/10/2026, prima senape #D8A227 */
--vd-evidenzia: var(--circolo-evidenziatore);
--vd-fondo-testata: var(--circolo-giallo);
--vd-velo-accento: var(--circolo-giallo-velo);
--vd-secondario: var(--circolo-celeste);
--vd-secondario-testo: var(--circolo-celeste-scuro);
--vd-azione: var(--circolo-blu-notte);
--vd-azione-hover: var(--circolo-blu-notte-2); /* qui schiarisce di poco: il contrasto resta sopra 15:1 */
--vd-velo: var(--circolo-carta);
--vd-fondo-2: var(--circolo-carta);
--vd-fondo-scuro: var(--circolo-blu-notte);
--vd-fondo-accento: var(--circolo-giallo);
--vd-su-accento: var(--circolo-blu-notte);
--vd-titoli: var(--circolo-blu-notte);
--vd-testo: var(--circolo-testo);
--vd-note: var(--circolo-grigio);
--vd-etichetta: var(--circolo-blu-notte);
--vd-su-prove: var(--circolo-blu-notte);
--vd-prezzo: var(--circolo-blu-notte);
--vd-font-titoli: "Cardo", Georgia, "Times New Roman", serif;
--vd-font-lettura: "Inter", "Helvetica Neue", Arial, sans-serif;
--vd-font-interfaccia: "Inter", "Helvetica Neue", Arial, sans-serif;
--vd-font-dati: "Inter", "Helvetica Neue", Arial, sans-serif;
--vd-font-citazione: "Cardo", Georgia, "Times New Roman", serif; /* la parola al medico, in corsivo */
--vd-peso-sottotitoli: 700; /* Cardo ha solo 400 e 700 */
--vd-traccia-titoli: 0;
}