/*
 * Le scelte di base di Automica Flow (brief 03 §1 n. 1).
 *
 * ⚠️⚠️ È l'UNICO file del prodotto in cui un colore si scrive in cifre: ogni
 * altro foglio, ogni pagina e ogni script usa questi nomi. Lo tiene vero il
 * presidio `presidi/stili.test.ts`.
 *
 * ⚠️ Dal 19/10/2026 il tema di partenza è il CHIARO, ispirato a Rapport (decisione
 * del committente, 0.4): fondo crema con aloni caldi, lastre bianche, l'inchiostro
 * quasi nero per quello che si sceglie e si preme, il verde salvia per i segni.
 * È ispirazione, non copia: colori e nomi sono nostri. Lo scuro di LeadForge
 * (28/09/2026) resta come variante, in fondo al file; si declinerà sul chiaro.
 *
 * ⚠️ Il contrasto si decide qui una volta (regola 8): ogni coppia testo/sfondo
 * è elencata in `contrasti.js`, e `web/sistema.test.ts` la misura nei due temi.
 * Un colore nuovo senza la sua coppia fa fallire il test.
 */
:root {
  /* I controlli del browser (l'icona del calendario, le barre di scorrimento,
     le tendine) si disegnano scuri o chiari come il tema, non sempre chiari. */
  color-scheme: light;

  /* ---- la tavolozza: valori, non usi. Le schermate non li nominano mai ----
     Crema e inchiostro, caldi; il salvia, il lago, il mattone e l'ocra per i segni. */
  --af-crema-fondo: #f3efe7;
  --af-crema-carta: #fbf9f5;
  --af-crema-tenue: #eee9df;
  --af-crema-bassa: #f7f4ee;
  --af-crema-bordo: #e2dccf;
  --af-crema-linea: #d6cfc1;
  --af-crema-campo: #857d70;
  --af-inchiostro: #1d1c1a;
  --af-inchiostro-700: #3a3834;
  --af-inchiostro-900: #0b0b0a;
  --af-inchiostro-tenue: #5b564e;
  --af-inchiostro-spento: #5f5a52;
  --af-inchiostro-chiaro: #f5f1e8;
  --af-inchiostro-grigio: #b9b2a5;
  --af-salvia-testo: #2c5e47;
  --af-salvia-velo: #e1ebe2;
  --af-salvia-alone: #bcd4c2;
  --af-lago-testo: #1f4f86;
  --af-lago-velo: #e3eaf4;
  --af-mattone-600: #b4321f;
  --af-mattone-700: #92281a;
  --af-mattone-testo: #a82c1b;
  --af-mattone-velo: #f8e1d9;
  --af-ocra-testo: #774900;
  --af-ocra-velo: #f7e7b6;
  --af-ocra-alone: #f0d98c;
  --af-pesca-alone: #f3c6a2;
  --af-bianco: #ffffff;

  /* ---- gli usi: è questi che nominano i fogli dei componenti ---- */
  --af-testo: var(--af-inchiostro);
  --af-testo-tenue: var(--af-inchiostro-tenue);
  --af-fondo: var(--af-crema-fondo);
  --af-carta: var(--af-crema-carta);
  --af-carta-tenue: var(--af-crema-tenue);
  /* le colonne della lavagna e le zone basse: un gradino fra fondo e carta */
  --af-carta-bassa: var(--af-crema-bassa);
  /* il bordo che separa (decorativo) e il bordo che delimita un campo: il
     secondo deve vedersi, 3:1 sulla carta (WCAG 1.4.11) */
  --af-bordo: var(--af-crema-bordo);
  --af-linea-tabella: var(--af-crema-linea);
  /* Il velo sulla scheda chiusa di un'azienda sfuma nella carta, e la freccina è scura. */
  --af-barra-scheda: var(--af-crema-carta);
  --af-su-barra-scheda: var(--af-inchiostro-tenue);
  --af-bordo-campo: var(--af-crema-campo);
  --af-campo-fondo: var(--af-crema-carta);

  /* Il bottone principale, la linguetta scelta: inchiostro pieno, testo chiaro. */
  --af-azione: var(--af-inchiostro);
  --af-azione-sopra: var(--af-inchiostro-700);
  --af-azione-premuta: var(--af-inchiostro-900);
  --af-su-azione: var(--af-inchiostro-chiaro);
  --af-azione-tenue: var(--af-salvia-velo);
  /* il verde come testo (la voce attiva, il bottone quieto) e i segni */
  --af-azione-testo: var(--af-salvia-testo);
  --af-collegamento: var(--af-lago-testo);
  --af-fuoco: var(--af-salvia-testo);

  --af-pericolo: var(--af-mattone-600);
  --af-pericolo-sopra: var(--af-mattone-700);
  --af-su-pericolo: var(--af-bianco);
  --af-pericolo-testo: var(--af-mattone-testo);

  --af-errore-testo: var(--af-mattone-testo);
  --af-errore-fondo: var(--af-mattone-velo);
  --af-successo-testo: var(--af-salvia-testo);
  --af-successo-fondo: var(--af-salvia-velo);
  --af-attenzione-testo: var(--af-ocra-testo);
  --af-attenzione-fondo: var(--af-ocra-velo);
  --af-info-testo: var(--af-lago-testo);
  --af-info-fondo: var(--af-lago-velo);

  /* disabilitato: WCAG lo esenta, noi no — si deve poter leggere cosa non si può fare */
  --af-disabilitato-testo: var(--af-inchiostro-spento);
  --af-disabilitato-fondo: var(--af-crema-tenue);

  /* La barra a sinistra: una rotaia d'inchiostro sulla pagina crema; la voce dove sei
     è una capsula crema con l'inchiostro sopra. */
  --af-rotaia: var(--af-inchiostro);
  --af-su-rotaia: var(--af-inchiostro-chiaro);
  --af-su-rotaia-tenue: var(--af-inchiostro-grigio);
  --af-rotaia-sopra: var(--af-inchiostro-700);
  --af-rotaia-scelta: var(--af-inchiostro-chiaro);
  --af-su-rotaia-scelta: var(--af-inchiostro);

  --af-velo: rgb(29 28 26 / 0.32);

  /* ---- il carattere: Inter se c'è, altrimenti quello del sistema; 14 px come LeadForge ---- */
  --af-carattere: Inter, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --af-carattere-cifre: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --af-testo-minimo: 0.6875rem;
  --af-testo-piccolo: 0.8125rem;
  --af-testo-base: 0.875rem;
  --af-testo-medio: 1rem;
  --af-testo-grande: 1.125rem;
  --af-testo-titolo: 1.375rem;
  --af-interlinea: 1.5;
  --af-interlinea-stretta: 1.25;
  --af-peso-normale: 400;
  --af-peso-medio: 500;
  --af-peso-forte: 600;

  /* ---- gli spazi: una scala sola, multipli di 4 px ---- */
  --af-spazio-1: 0.25rem;
  --af-spazio-2: 0.5rem;
  --af-spazio-3: 0.75rem;
  --af-spazio-4: 1rem;
  --af-spazio-5: 1.5rem;
  --af-spazio-6: 2rem;
  --af-spazio-7: 3rem;

  /* ---- raggi, ombre, linee ---- */
  --af-raggio-piccolo: 4px;
  --af-raggio: 9px;
  --af-raggio-grande: 12px;
  --af-raggio-tondo: 999px;
  --af-linea: 1px;
  --af-linea-fuoco: 3px;
  --af-ombra-1: 0 1px 2px rgb(60 45 25 / 0.08);
  --af-ombra-2: 0 18px 40px rgb(60 45 25 / 0.14);

  /* ---- le misure ---- */
  --af-larghezza-modulo: 28rem;
  --af-larghezza-pagina: 90rem;
  --af-larghezza-barra: 230px;
  --af-larghezza-barra-stretta: 64px;
  --af-altezza-testata: 4rem;
  --af-altezza-controllo: 2.25rem;
  --af-durata: 120ms;

  /* ---- le lastre: bianche e traslucide sul crema, con un'ombra lunga e calda ----
     ⚠️ Il contrasto regge perché la lastra sta sempre sopra --af-fondo e, così
     composta, è chiara quanto --af-carta: le coppie misurate sulla carta valgono. */
  --af-vetro: color-mix(in srgb, var(--af-crema-carta) 72%, transparent);
  --af-vetro-fitto: color-mix(in srgb, var(--af-crema-carta) 94%, transparent);
  --af-vetro-velo: color-mix(in srgb, var(--af-crema-carta) 62%, transparent);
  --af-vetro-incavo: color-mix(in srgb, var(--af-crema-tenue) 80%, transparent);
  --af-vetro-lente: color-mix(in srgb, var(--af-bianco) 94%, transparent);
  --af-vetro-filo: color-mix(in srgb, var(--af-inchiostro) 8%, transparent);
  --af-vetro-luce: color-mix(in srgb, var(--af-bianco) 90%, transparent);
  --af-vetro-riflesso: color-mix(in srgb, var(--af-bianco) 18%, transparent);
  --af-vetro-buio: rgb(60 45 25 / 0.16);
  /* I tre aloni del fondo: pesca in alto a sinistra, ocra in alto, salvia a destra. */
  --af-alone-1: color-mix(in srgb, var(--af-pesca-alone) 55%, transparent);
  --af-alone-2: color-mix(in srgb, var(--af-ocra-alone) 42%, transparent);
  --af-alone-3: color-mix(in srgb, var(--af-salvia-alone) 45%, transparent);
  --af-sfocatura: blur(28px) saturate(170%);
  --af-raggio-vetro: 11px;
  --af-raggio-vetro-interno: 7px;
  --af-testo-display: 1.75rem;
  --af-durata-liquida: 420ms;
  --af-curva-liquida: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/*
 * Il tema scuro: lo scuro di LeadForge (28/09/2026), com'era. Dal 19/10/2026 è la
 * variante a scelta; si declinerà sulle forme del chiaro. Non è un secondo foglio:
 * è un secondo set di valori per gli stessi usi. Il test del contrasto misura anche
 * questo blocco (`web/sistema.test.ts`).
 */
:root[data-tema="scuro"] {
  color-scheme: dark;

  /* ---- la tavolozza: valori, non usi. Le schermate non li nominano mai ----
     ⚠️ Dal 28/09/2026 è la tavolozza di LeadForge (decisione del committente:
     CRM e Funnel con la UX di LeadForge): blu notte, verde smeraldo, tema scuro.
     I colori pieni sono quelli di `leadforge/client/public/styles.css`; le sue
     tinte trasparenti qui sono scritte già composte sul fondo, perché il
     contrasto si misura su un colore solo. */
  --af-notte-900: #0f172a;
  --af-notte-800: #1e293b;
  --af-notte-700: #293b52;
  --af-notte-650: #22314a;
  --af-notte-600: #334155;
  --af-notte-400: #7a8aa3;
  --af-notte-300: #99a7ba;
  --af-notte-200: #aebacb;
  --af-notte-50: #f8fafc;
  --af-smeraldo-300: #34d399;
  --af-smeraldo-500: #10b981;
  --af-smeraldo-600: #059669;
  --af-smeraldo-scuro: #04110b;
  --af-smeraldo-velo: #173d3a;
  --af-cielo-400: #60a5fa;
  --af-cielo-velo: #1f3452;
  --af-rosso-400: #f87171;
  --af-rosso-600: #dc2626;
  --af-rosso-700: #b91c1c;
  --af-rosso-velo: #3b2330;
  --af-ambra-400: #fbbf24;
  --af-ambra-velo: #3a3424;
  --af-verde-velo: #173b35;
  --af-bianco: #ffffff;

  /* ---- gli usi: è questi che nominano i fogli dei componenti ---- */
  --af-testo: var(--af-notte-50);
  --af-testo-tenue: var(--af-notte-200);
  --af-fondo: var(--af-notte-900);
  --af-carta: var(--af-notte-800);
  --af-carta-tenue: var(--af-notte-700);
  /* la barra laterale e le colonne della lavagna: un gradino fra fondo e carta */
  --af-carta-bassa: var(--af-notte-650);
  /* il bordo che separa (decorativo) e il bordo che delimita un campo: il
     secondo deve vedersi, 3:1 sulla carta (WCAG 1.4.11) */
  --af-bordo: var(--af-notte-600);
  /* Le linee delle tabelle (13/10/2026): un passo più marcate del bordo delle zone, perché le righe si seguano. */
  --af-linea-tabella: #475569;
  /* Il velo sulla scheda chiusa di un'azienda sfuma in questo blu, e la freccina che la apre è bianca (13/10/2026). */
  --af-barra-scheda: var(--af-notte-900);
  --af-su-barra-scheda: #ffffff;
  --af-bordo-campo: var(--af-notte-400);
  --af-campo-fondo: var(--af-notte-900);

  /* ⚠️ Mai bianco sul verde pieno: testo scuro, come in LeadForge (`--su-acc`). */
  --af-azione: var(--af-smeraldo-500);
  --af-azione-sopra: var(--af-smeraldo-600);
  --af-azione-premuta: var(--af-smeraldo-300);
  --af-su-azione: var(--af-smeraldo-scuro);
  --af-azione-tenue: var(--af-smeraldo-velo);
  /* il verde come testo (collegamenti, voce attiva): quello più chiaro */
  --af-azione-testo: var(--af-smeraldo-300);
  --af-collegamento: var(--af-cielo-400);
  --af-fuoco: var(--af-smeraldo-300);

  --af-pericolo: var(--af-rosso-600);
  --af-pericolo-sopra: var(--af-rosso-700);
  --af-su-pericolo: var(--af-bianco);
  --af-pericolo-testo: var(--af-rosso-400);

  --af-errore-testo: var(--af-rosso-400);
  --af-errore-fondo: var(--af-rosso-velo);
  --af-successo-testo: var(--af-smeraldo-300);
  --af-successo-fondo: var(--af-verde-velo);
  --af-attenzione-testo: var(--af-ambra-400);
  --af-attenzione-fondo: var(--af-ambra-velo);
  --af-info-testo: var(--af-cielo-400);
  --af-info-fondo: var(--af-cielo-velo);

  /* disabilitato: WCAG lo esenta, noi no — si deve poter leggere cosa non si può fare */
  --af-disabilitato-testo: var(--af-notte-300);
  --af-disabilitato-fondo: var(--af-notte-700);

  --af-velo: rgb(0 0 0 / 0.6);

  /* La barra a sinistra nello scuro: un gradino sopra la pagina, la voce dove sei chiara. */
  --af-rotaia: var(--af-notte-800);
  --af-su-rotaia: var(--af-notte-50);
  --af-su-rotaia-tenue: var(--af-notte-200);
  --af-rotaia-sopra: var(--af-notte-700);
  --af-rotaia-scelta: var(--af-notte-50);
  --af-su-rotaia-scelta: var(--af-notte-900);

  --af-ombra-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --af-ombra-2: 0 10px 30px rgb(0 0 0 / 0.45);

  /* ---- il vetro (prova di design, 13/10/2026, ramo prove-design) ----
     Le superfici sono lastre traslucide sopra la pagina: lasciano passare, sfocati,
     i due aloni del fondo. ⚠️ Il contrasto regge perché il vetro sta sempre sopra
     --af-fondo e, così composto, è più scuro di --af-carta: le coppie misurate
     sulla carta valgono anche qui. */
  --af-vetro: color-mix(in srgb, var(--af-notte-800) 58%, transparent);
  --af-vetro-fitto: color-mix(in srgb, var(--af-notte-800) 86%, transparent);
  /* Il velo di un piede che sta sopra a quello che scorre: chiaro, perché sotto si veda la sfocatura. */
  --af-vetro-velo: color-mix(in srgb, var(--af-notte-800) 40%, transparent);
  --af-vetro-incavo: color-mix(in srgb, var(--af-notte-900) 48%, transparent);
  --af-vetro-lente: color-mix(in srgb, var(--af-notte-50) 9%, transparent);
  --af-vetro-filo: color-mix(in srgb, var(--af-notte-50) 10%, transparent);
  --af-vetro-luce: color-mix(in srgb, var(--af-notte-50) 16%, transparent);
  --af-vetro-riflesso: color-mix(in srgb, var(--af-notte-50) 18%, transparent);
  --af-vetro-buio: rgb(2 6 23 / 0.6);
  --af-alone-1: color-mix(in srgb, var(--af-smeraldo-500) 13%, transparent);
  --af-alone-2: color-mix(in srgb, var(--af-cielo-400) 9%, transparent);
  --af-alone-3: color-mix(in srgb, var(--af-smeraldo-500) 6%, transparent);
}

/*
 * La panoramica delle vendite (20/10/2026): le carte delle trattative calde, scure; in
 * mattone quelle che chiudono a giorni; la quota in una carta verde con l'arco ocra; la
 * linea dei ricavi. Nel tema chiaro e nello scuro.
 */
:root {
  --af-calda-fondo: var(--af-inchiostro);
  --af-calda-testo: var(--af-inchiostro-chiaro);
  --af-urgente-fondo: var(--af-mattone-600);
  --af-quota-fondo: var(--af-salvia-testo);
  --af-quota-testo: var(--af-inchiostro-chiaro);
  --af-quota-arco: var(--af-ocra-alone);
  --af-grafico-linea: var(--af-mattone-600);
}
:root[data-tema="scuro"] {
  --af-calda-fondo: var(--af-notte-900);
  --af-calda-testo: var(--af-bianco);
  --af-quota-fondo: color-mix(in srgb, var(--af-smeraldo-600) 70%, var(--af-notte-900));
  --af-quota-testo: var(--af-bianco);
  --af-grafico-linea: #f08a6c;
}

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