/* ═══════════════════════════════════════════════════════════════════════════
   NEW LIFE — TOKEN («La croce evoluta», approvata il 29/9/2026)
   ───────────────────────────────────────────────────────────────────────────
   Da qui in avanti è questo il file dei token: nasce da
   selezione-rebrand/04-asset/token/token.css (colori letti sul vettoriale del
   brand book, pag. 7 e 22-29) con in più le misure dell'impaginato.
   Regole d'uso: DESIGN.md.

   Due strati, come nel brand book:
     STRATO 1  :root                 comune a tutti i siti
     STRATO 2  [data-brand="…"]      il verticale riscrive SOLO l'accento

   Regola dei due valori: ogni colore di marca ha il valore per riempire e il
   valore per scrivere (-ink). Sotto i 24px si usa solo -ink.

   ═══════════════════════════════════════════════════════════════════════════ */


:root {
  /* Marca comune */
  --nl-blu:        #0F92B7;   /* l'elemento azzurro: riempimenti, testi ≥24px — 3.61:1 */
  --nl-blu-ink:    #0A6E8C;   /* testo e link sul bianco — 5.8:1 */
  --nl-blu-notte:  #0B4F66;   /* fasce scure, piè di pagina (bianco 9.1:1) */
  --nl-elemento:   var(--nl-blu);

  /* Fondi chiari: dal più neutro al più colorato */
  --nl-ghiaccio:   #F5FAFC;   /* fondo del brand book */
  --nl-vetro:      #EBF6F8;   /* fondo alternato */
  --nl-carta:      #DDE8F1;   /* fondo dei pannelli e dei voucher del Lab */
  --nl-tinta-blu:  #CFE9F1;   /* tinta azzurra del brand book */
  --nl-sabbia:     #ECEBE6;   /* fondo caldo della copertina e delle vetrofanie */

  /* Inchiostri: solo questi (#6B7A90 e #94A3B8 restano vietati) */
  --nl-ink:   #0D2B49;   /* 14.4:1 */
  --nl-ink-2: #46586E;   /* 7.3:1 */
  --nl-ink-3: #5A6B80;   /* 5.4:1 */
  --nl-bordo: #D5E2EA;
  --nl-bianco: #FFFFFF;
  --nl-ink-su-scuro-2: #E3F2F7;   /* testo secondario sulle fasce scure (5.4:1 sul blu inchiostro) */
  --nl-filetto-su-scuro: rgba(255, 255, 255, .22);  /* filetti e bordi sulle fasce scure */
  --nl-bordo-su-scuro:   rgba(255, 255, 255, .6);   /* cerchio delle icone su scuro */
  --nl-velo-su-scuro:    rgba(255, 255, 255, .08);  /* fondo delle schede su scuro */

  /* Scala dei testi piccoli oltre a quelli di DESIGN.md */
  --nl-t-voce: 1.2rem;          /* titolo di una voce: risposte, ingressi, motivi, domande */
  --nl-t-sottotitolo: 1.5rem;   /* sottotitolo sotto un titolo di sezione */
  --nl-t-piccolo: 1rem;         /* note, pulsanti, garanzie: il minimo per leggere */

  /* Profondità: una sola ombra, per ciò che galleggia */
  --nl-ombra: 0 18px 40px rgba(13, 43, 73, .14);

  /* Tipografia (brand book pag. 8-9) */
  --nl-font-testo: "Stevie Sans", "Barlow", system-ui, sans-serif;
  --nl-font-marchio: "Montserrat", "Nunito Sans", system-ui, sans-serif;

  /* Forme. Angoli appena smussati (5/10): l'unica curva piena del sito è il
     quarto di cerchio della croce, e schede tonde la diluivano. Restano
     tondi solo pulsanti ed etichette (pillola) e l'angolo delle foto. */
  --nl-r-campo: 6px;      /* campi dei moduli */
  --nl-r-medio: 8px;      /* schede piccole, barra rapida, tendine */
  --nl-r-scheda: 12px;    /* schede, foto, pannelli (come i riquadri dei pannelli di sala) */
  --nl-r-pillola: 999px;

  /* Scala dei titoli (DESIGN.md § Typography) */
  --nl-t-display: clamp(2.6rem, 1.6rem + 4.2vw, 5.2rem);
  --nl-t-titolo:  clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  --nl-t-scheda:  clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
  --nl-t-lead:    clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --nl-t-corpo:   1.0625rem;
  --nl-t-etichetta: .875rem;    /* Montserrat maiuscolo: solo parole singole, mai frasi (14px dal 5/10) */

  /* Impaginato */
  --nl-contenitore: 90rem;      /* 1440px (5/10, era 78rem): su schermi larghi la pagina non resta stretta al centro */
  --nl-margine: clamp(1.25rem, .5rem + 3vw, 3.5rem);
  --nl-sezione: clamp(4.5rem, 3rem + 5vw, 8rem);
  --nl-testata: 5.25rem;        /* altezza della testata: serve al menu da telefono e alle ancore */
  --nl-barra: 4.75rem;          /* altezza della barra rapida da telefono */
  --nl-riga: 2.5rem;            /* altezza della riga di sistema blu, ferma da 768px (7/10) */
  --nl-sezioni: 3.5rem;         /* altezza della barra delle sezioni sotto il menu (10/10, solo dove il sito la dà) */
  --nl-cima: var(--nl-testata); /* quello che resta fermo in cima: componenti.css lo allunga con riga o barra */
  /* WhatsApp: il verde scuro del marchio WhatsApp, non un colore New Life.
     Solo sul bottone flottante, così si riconosce come una chat. Icona bianca
     a 4.14:1 (≥3:1 per un'icona; il verde chiaro #25D366 farebbe 1.98:1). */
  --nl-whatsapp: #128C7E;
  --nl-whatsapp-scuro: #075E54;
  --nl-veloce: .16s;
  /* Curve (5/10, valori della skill di Emil Kowalski): uscita decisa per
     tutto ciò che compare, «cassetto» per i pannelli che scorrono. */
  --nl-esce: cubic-bezier(.23, 1, .32, 1);
  --nl-cassetto: cubic-bezier(.32, .72, 0, 1);

  /* Errore: comune a tutti i siti, distinto dall'accento (che è anche il
     colore dell'azione). 6.5:1 sul bianco. */
  --nl-errore: #B3261E;
  --nl-errore-tinta: #FBE4E2;
  --nl-nav-largo: 75em;

  /* Colori di categoria (D5, 29/9): solo come filetto delle schede dei
     Percorsi, mai fondo né testo. Toni spenti e scuri, lontani dagli accenti
     pieni dei sotto-brand (teal Odontoiatria, rosa Estetica, oliva Lavoro,
     giallo Radiologia, viola Endoscopia). Tutti ≥3:1 sul bianco. Proposta: si
     cambiano qui. Le 13 categorie li usano in giro (js/catalogo-pagine.js). */
  --nl-categoria-1: #3F6E9A;   /* ardesia */
  --nl-categoria-2: #2E6F5E;   /* bosco */
  --nl-categoria-3: #9A6A2E;   /* bronzo */
  --nl-categoria-4: #6A5A8C;   /* lavagna viola */
  --nl-categoria-5: #9C4F4A;   /* terracotta scura */
  --nl-categoria-6: #4E6273;   /* grafite blu */
}

/* ── STRATO 2 — accento per sito (il primo è il predefinito: Centro Medico) ── */
:root, [data-brand="centro"] {
  --nl-accento:       #E20613;   /* riempimento, forme, testi sopra i 24px — 4.92:1 sul bianco */
  --nl-accento-ink:   #D80512;   /* testo piccolo e fondo del pulsante — 5.32:1 */
  --nl-accento-brace: #B3040E;   /* hover */
  --nl-accento-tinta: #FBD8DA;   /* tinta del brand book, fondi chiari */
}
[data-brand="lab"] {
  --nl-accento:       #EE4000;   /* riempimento, forme, testi sopra i 24px — 3.91:1 sul bianco */
  --nl-accento-ink:   #C43400;   /* testo piccolo e fondo del pulsante — 5.47:1 */
  --nl-accento-brace: #A22B00;   /* hover */
  --nl-accento-tinta: #FCD9CC;   /* tinta del brand book, fondi chiari */
}
[data-brand="odontoiatria"] {
  --nl-accento:       #13AEA4;   /* riempimento, forme, testi sopra i 24px — 2.76:1 sul bianco */
  --nl-accento-ink:   #0D7871;   /* testo piccolo e fondo del pulsante — 5.33:1 */
  --nl-accento-brace: #0A635D;   /* hover */
  --nl-accento-tinta: #A1DFDB;   /* tinta del brand book, fondi chiari */
}
[data-brand="medicina-estetica"] {
  --nl-accento:       #F752A4;   /* riempimento, forme, testi sopra i 24px — 3.14:1 sul bianco */
  --nl-accento-ink:   #B63C79;   /* testo piccolo e fondo del pulsante — 5.37:1 */
  --nl-accento-brace: #973164;   /* hover */
  --nl-accento-tinta: #FCBADB;   /* tinta del brand book, fondi chiari */
}
[data-brand="medicina-lavoro"] {
  --nl-accento:       #829B29;   /* riempimento, forme, testi sopra i 24px — 3.15:1 sul bianco */
  --nl-accento-ink:   #60721E;   /* testo piccolo e fondo del pulsante — 5.35:1 */
  --nl-accento-brace: #4F5E18;   /* hover */
  --nl-accento-tinta: #CDD7A9;   /* tinta del brand book, fondi chiari */
}
[data-brand="radiologia"] {
  --nl-accento:       #FFAF00;   /* riempimento, forme, testi sopra i 24px — 1.84:1 sul bianco */
  --nl-accento-ink:   #916300;   /* testo piccolo e fondo del pulsante — 5.26:1 */
  --nl-accento-brace: #785200;   /* hover */
  --nl-accento-tinta: #FFEFCC;   /* tinta del brand book, fondi chiari */
}
[data-brand="chirurgia-ambulatoriale"] {
  --nl-accento:       #DB0039;   /* riempimento, forme, testi sopra i 24px — 5.16:1 sul bianco */
  --nl-accento-ink:   #D80038;   /* testo piccolo e fondo del pulsante — 5.28:1 */
  --nl-accento-brace: #B3002E;   /* hover */
  --nl-accento-tinta: #F8CCD7;   /* tinta del brand book, fondi chiari */
}
[data-brand="endoscopia"] {
  --nl-accento:       #9042AC;   /* riempimento, forme, testi sopra i 24px — 5.90:1 sul bianco */
  --nl-accento-ink:   #9042AC;   /* testo piccolo e fondo del pulsante — 5.90:1 */
  --nl-accento-brace: #77368E;   /* hover */
  --nl-accento-tinta: #E9D9EE;   /* tinta del brand book, fondi chiari */
}
[data-brand="fisioterapia"] {
  --nl-accento:       #201D5D;   /* riempimento, forme, testi sopra i 24px — 15.05:1 sul bianco */
  --nl-accento-ink:   #201D5D;   /* testo piccolo e fondo del pulsante — 15.05:1 */
  --nl-accento-brace: #1A184D;   /* hover */
  --nl-accento-tinta: #D2D2DF;   /* tinta del brand book, fondi chiari */
}