/* ════════════════════════════════════════════════════════════════════
   TOKEN DEL BRAND — colori e scala dei titoli · Simone Zaganelli Architetto

   Questo file esiste in tre posti, identici:
     Design system/token-colori.css      <- L'ORIGINALE: si modifica solo questo
     Sito/Codice HTML/token-colori.css   <- copia per il sito
     CRM/Codice HTML/token-colori.css    <- copia per il CRM (e commesse, preventivo)

   Dopo una modifica all'originale, copialo sopra le due copie.
   Se una copia e' diversa, GitHub Desktop blocca il commit e dice quale
   (controllo in Design system/strumenti/pre-commit).

   Regola del 21/08/2026: non si cambia il valore di un colore qui sotto
   per risolvere un problema di contrasto. Si aggiunge una variabile nuova
   per il contesto che ne ha bisogno: un colore serve spesso due fondi
   opposti, e un valore unico che vada bene per entrambi non esiste.
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* Palette del brand */
  --cream:#F4F1EC;        /* fondo principale */
  --bone:#E8E2D7;         /* divisori, bordi di sezione, fondo alternato */
  --sand:#C5B49A;         /* bordi delle card; come testo solo su fondo scuro */
  --dark:#1C1916;         /* inchiostro, sidebar, pulsanti primari */
  --dark2:#141210;        /* footer, fondo profondo */
  --mid:#6B6155;          /* testo secondario su fondo chiaro */
  --accent:#8A7255;       /* sigillo: corsivo, hover, filetti, puntino del lockup */
  --white:#FDFCFA;        /* card e schede: il bianco del brand, mai #FFFFFF */

  /* Varianti per contesto */
  --accent-text:#816A4F;  /* eyebrow del sito su cream (4,54:1) */
  --accent-ink:#766149;   /* accento come TESTO PICCOLO su qualunque fondo chiaro:
                             white 5,73 · cream 5,21 · bone 4,56 · tinte >= 4,6 (23/09) */
  --mid-on-dark:#877B6C;  /* testo secondario su dark2, footer del sito (4,52:1) */
  --sand-on-dark:rgba(197,180,154,0.72); /* testo piccolo sand su dark/dark2: minimo
                             assoluto, regola del 18/08 (5,1:1). Sotto non si scende */
  --accent-fondo:#806A4F; /* accento come FONDO sotto testo chiaro (tasti, filtri scelti,
                             giorno di oggi): cream 4,55 · bianco 5,00 (26/09) */
  --accent-su-scuro:#A08566; /* accento come testo o segno su scuro (voce attiva della
                             barra del telefono): dark 5,03 · dark2 5,38 (26/09) */

  /* Colori funzionali: esistono solo nel CRM.
     Colorano il dato (etichetta, LED, importo), mai il contenitore. */
  --green:#4A7C59;        /* segno: LED, barre, filetti, bordi */
  --yellow:#B8960C;       /* segno: come testo fa 2,8:1, non usarlo per le parole */
  --red:#8B3A3A;
  --green-text:#447252;   /* verde come TESTO su chiaro (cream 4,94 · white 5,43) */
  --yellow-text:#7E6608;  /* giallo come TESTO su chiaro (cream 4,92 · white 5,40) */
  --err-ondark:#D08A8A;   /* l'unico rosso leggibile su fondo scuro (18/08/2026):
                             --red sul dark non si legge, non usarlo mai li' */
  --green-su-scuro:#5A966C; /* verde come testo o segno su scuro (stato del cantiere
                             nella testata del telefono): dark 5,01 · dark2 5,35 (28/09) */

  /* Palette dei dati (26/09/2026, solo CRM): un colore per categoria, tipo di
     appuntamento, cantiere, commessa. Tutti leggibili anche come testo piccolo su
     bianco e cream (>= 4,9:1). Scritti in esadecimale perche' il CRM li legge da qui
     e ci attacca la trasparenza. Le prime quattro coincidono con accent-ink,
     green-text, red e yellow-text. Chi assegna cosa: DESIGN.md, par. 2. */
  --dato-bronzo:#766149;  --dato-verde:#447252;   --dato-rosso:#8B3A3A;
  --dato-ocra:#7E6608;    --dato-blu:#3F6280;     --dato-petrolio:#3D6868;
  --dato-prugna:#6A4E78;  --dato-terra:#94502F;   --dato-grigio:#6B6155;
  --dato-scuro:#1C1916;

  /* Gli stessi colori in tre numeri, per le trasparenze (25/09/2026).
     Si usano cosi': rgba(var(--sand-rgb),0.12) = sand al 12%.
     Sono gli STESSI valori della palette qui sopra, scritti in un altro modo:
     se un giorno cambia un colore, si cambia anche la sua riga qui. */
  --cream-rgb:244,241,236;  --bone-rgb:232,226,215;  --sand-rgb:197,180,154;
  --dark-rgb:28,25,22;      --dark2-rgb:20,18,16;    --mid-rgb:107,97,85;
  --accent-rgb:138,114,85;  --white-rgb:253,252,250;
  --green-rgb:74,124,89;    --yellow-rgb:184,150,12; --red-rgb:139,58,58;

  /* Focus da tastiera (24/09/2026): anello 2px a 2px di distanza, solo con
     la tastiera. Contrasto dell'accento col fondo: cream 4,04 · bone 3,53 ·
     white 4,43 · dark 3,85 · dark2 4,11 (serve almeno 3) */
  --focus:var(--accent);
  --focus-scuro:var(--dark);    /* accanto a un bordo sand e sulle fasce accento */
  --focus-chiaro:var(--cream);  /* attorno ai pulsanti pieni di accento su scuro */

  /* Scala dei titoli del sito (24/09/2026): un ruolo, una misura.
     Prima il titolo principale aveva sette misure diverse secondo la pagina
     (da 3rem a 6rem di massimo) e "saltava" passando da una pagina all'altra. */
  --titolo-hero:clamp(3rem,5vw,5.2rem);     /* apertura con immagine: home, chi sono */
  --titolo-pagina:clamp(2.6rem,4.2vw,4.2rem); /* titolo delle altre pagine */
}