/*
 * Le variabili del progetto: l'unico posto dove si decidono i colori.
 *
 * Personalizzare l'aspetto per un cliente è riscrivere questo file. Se un
 * colore compare in cifre da qualche altra parte, quel posto diventerà quello
 * che nessuno pensa di cambiare, e l'installazione resterà a metà fra due
 * palette.
 *
 * ── La direzione, in breve ──────────────────────────────────────────────────
 *
 * Questo è un gestionale che qualcuno guarda otto ore al giorno per trovare un
 * cliente, registrare un intervento, controllare cosa è in ritardo. Non è una
 * vetrina: ogni scelta qui sotto risponde a "si legge più in fretta?" e non a
 * "fa più effetto?".
 *
 *   Fondo grafite freddo, un solo accento verde-acqua. L'accento non è un
 *   colore di marca spalmato ovunque: segna l'azione principale e la posizione
 *   corrente, e siccome non compare altrove si trova a colpo d'occhio. Verde e
 *   ambra e rosso restano liberi di significare esito, avviso ed errore.
 *
 *   Due famiglie di caratteri con due mestieri: IBM Plex Sans per l'interfaccia,
 *   IBM Plex Mono per ciò che è una macchina a scriverlo — codici di recupero,
 *   codici a sei cifre, identificativi, importi, date in colonna. In colonna le
 *   cifre a larghezza fissa si confrontano verticalmente senza rileggerle.
 *
 *   L'ombra vuole dire "questo sta sopra la pagina": ce l'hanno le tendine, i
 *   popover e i modali. I riquadri no — hanno un bordo. Se l'ombra è sotto
 *   tutto, non distingue più niente.
 *
 *   Raggi stretti (10px sui riquadri, 7px sui comandi). Un raggio largo chiede
 *   spazio vuoto attorno a sé: su una tabella di ottanta righe quello spazio si
 *   paga in righe che non si vedono.
 *
 * ── Contrasto ──────────────────────────────────────────────────────────────
 *
 * Il livello è **AA**, in entrambe le palette: ogni coppia testo/fondo in uso
 * sta sopra 4,5:1 e ogni bordo di comando sopra 3:1. AAA (7:1) lo raggiunge il
 * solo `--testo`; `--testo-tenue` scende a 6,05 e `--testo-debole` a 4,62, e
 * chi aggiunge un colore deve calibrarsi su 4,5 — non su 7.
 *
 * I numeri per coppia NON stanno scritti qui, e non in un documento: li calcola
 * `tests/Unit/TokensTest.php` a ogni esecuzione della suite, e la fa fallire
 * dicendo quale coppia e quanto fa. Una tabella in un commento è la fotografia
 * di un pomeriggio e comincia a mentire dalla prima modifica; il test è la
 * risposta viva. Aggiungendo una coppia all'interfaccia va aggiunta anche
 * all'elenco dentro quel test: una coppia non elencata non è sorvegliata.
 *
 * ── Chiaro non è scuro schiarito ────────────────────────────────────────────
 *
 * `--attenzione` e `--errore` in chiaro sono PIÙ SCURI dei corrispondenti in
 * scuro: un'ambra che si legge su grafite diventa invisibile su bianco. È il
 * punto in cui i temi chiari aggiunti dopo si tradiscono.
 */

:root {
  /* Il fondo dei messaggi di posta in HTML: bianco anche nel tema scuro, perché chi li scrive dà per scontato il bianco. */
  --carta-posta: #ffffff;
  /* Geometria. Il raggio dice cosa è la cosa: riquadro, comando, etichetta. */
  --raggio:      10px;   /* riquadri, tabelle, pannelli */
  --raggio-s:    7px;    /* campi, pulsanti, voci di menu */
  --raggio-pill: 999px;  /* solo le etichette di stato */

  /* Passo dello spazio. Tutto è un multiplo di .25rem: due margini "quasi
     uguali" si vedono, e si vedono soprattutto quando sono uno sopra l'altro.
     Il passo non ha una variabile sua perché nessuna regola lo moltiplica: i
     gradini sono questi sette e si usano per nome. */
  --s1:     .25rem;
  --s2:     .5rem;
  --s3:     .75rem;
  --s4:     1rem;
  --s5:     1.5rem;
  --s6:     2rem;
  --s7:     3rem;
  --s8:     4rem;

  /* Caratteri. Due famiglie, due mestieri — vedi la nota in testa. */
  --carattere:      'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --carattere-dati: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scala tipografica. Radice a 16px (non si tocca: il tema W3CRM misura la
     barra laterale e l'intestazione in rem, e cambiarla sposta il telaio). */
  --t-xs:  .75rem;      /* 12px — etichette di stato, note a margine */
  --t-s:   .8125rem;    /* 13px — testo secondario, intestazioni di tabella */
  --t-m:   .875rem;     /* 14px — corpo dell'interfaccia */
  --t-l:   1rem;        /* 16px — titolo di un riquadro */
  --t-xl:  1.25rem;     /* 20px — titolo di sezione */
  --t-2xl: 1.625rem;    /* 26px — titolo di pagina */
  --t-3xl: 2.125rem;    /* 34px — il solo titolo grande, sull'accesso */

  --lh-stretta: 1.22;   /* titoli */
  --lh-corpo:   1.55;   /* paragrafi */
  --sp-titolo:  -.015em;
  --sp-minuto:  .01em;

  /* Misura massima di una riga di testo corrente: oltre i 70 caratteri
     l'occhio perde il capo della riga successiva. */
  --misura: 68ch;

  --transizione: 160ms cubic-bezier(.4, 0, .2, 1);

  --spessore-marcatore: 3px;  /* la barretta che segna la voce corrente */

  /* La barra laterale ha colori suoi, perché un tema può volerla scura anche
     quando le pagine sono chiare (Impostazioni → Aspetto, App\Services\Aspetto\Temi).
     Di serie sono quelli delle pagine: la palette qui sotto resta l'unica fonte. */
  --rail-fondo:        var(--rail);
  --rail-testo:        var(--testo);
  --rail-testo-tenue:  var(--testo-tenue);
  --rail-testo-debole: var(--testo-debole);
  --rail-hover:        var(--superficie-alt);
  --rail-attivo:       var(--accento-tenue);
  --rail-accento:      var(--accento-testo);
  --rail-marcatore:    var(--accento);
  --rail-bordo:        var(--bordo);
}

/* ── Palette chiara: "banco" ────────────────────────────────────────────────
   Il fondo è grigio freddo e le superfici sono bianche: così un riquadro si
   stacca dalla pagina senza bisogno di un'ombra, e la barra laterale (bianca)
   è la parte più chiara dello schermo. È l'inverso esatto della palette scura,
   dove la barra è la più scura: in entrambi i casi la spina verticale ha un
   tono suo e si capisce dove finisce la navigazione e comincia il lavoro. */
:root[data-bs-theme="light"] {
  color-scheme: light;

  --sfondo:          #eceff4;
  --rail:            #ffffff;
  --superficie:      #ffffff;
  --superficie-alt:  #e6ebf1;
  --bordo:           #d9e0e8;   /* struttura: riquadri, tabelle. Volutamente quieto. */
  --bordo-forte:     #6f7a86;   /* comandi: campi, select, pulsanti secondari. 4,4:1 sul bianco. */

  --testo:           #141b24;
  --testo-tenue:     #4a586a;
  --testo-debole:    #5c6978;

  --accento:         #0e7c77;   /* riempimenti: pulsante principale, marcatore */
  --accento-forte:   #0a6560;   /* :hover del riempimento */
  --accento-testo:   #0b6d69;   /* l'accento usato come testo o icona */
  --su-accento:      #ffffff;   /* testo sopra il riempimento */
  --accento-tenue:   #dcefee;   /* fondi tinti: etichette, voce di menu corrente */
  /* Le stesse cifre di --accento, in decimale: Bootstrap costruisce le sue
     trasparenze con rgb(var(--bs-primary-rgb) / .5) e vuole i canali nudi, che
     in CSS non si ricavano da un esadecimale. È l'unica ripetizione di un
     colore in tutto il progetto, e non è affidata a questo commento: la
     sorveglia TokensTest, che rifiuta la suite se i due valori smettono di
     descrivere lo stesso colore. */
  --accento-rgb:     14, 124, 119;
  /* L'alone del fuoco da tastiera NON è un colore suo: è l'accento diluito.
     Scritto in cifre, cambiare `--accento` (che è l'unica modifica che
     l'intestazione di questo file invita a fare) lascerebbe l'anello sulla
     tinta di prima — l'installazione a metà fra due palette contro cui avverte
     l'intestazione stessa, e per giunta in un punto che si vede solo navigando
     da tastiera, cioè quasi mai da chi la modifica. */
  --anello:          color-mix(in srgb, var(--accento) 35%, transparent);

  --ok:              #1f7a3a;
  --ok-tenue:        #e0f2e4;
  --attenzione:      #8a5a08;   /* più scuro del corrispondente in scuro: vedi la nota in testa */
  --attenzione-tenue:#fbf0da;
  --errore:          #b3261e;   /* idem */
  --errore-tenue:    #fbe6e4;
  --info:            #1a5f96;
  --info-tenue:      #e2eefa;
  --lavorazione:       #6b3fa0;   /* le lavorazioni dei progetti in agenda */
  --lavorazione-tenue: #efe7fa;

  /* L'ombra la portano solo le cose che stanno DAVVERO sopra la pagina. */
  --ombra:      0 1px 2px rgb(20 27 36 / .07), 0 6px 16px -8px rgb(20 27 36 / .14);
  --ombra-alta: 0 2px 6px rgb(20 27 36 / .10), 0 20px 44px -18px rgb(20 27 36 / .26);

  /* Reticolo inciso del pannello di accesso: carta millimetrata, non sfumatura. */
  --reticolo:   #dbe2ea;

  /* Il velo dietro un pannello a sovrapposizione (la galleria delle immagini
     della newsletter, Task 15): scuro a prescindere dalla palette, perché
     deve staccare il pannello dalla pagina sotto — non è testo, non entra
     nel controllo AA di TokensTest, come --ombra qui sopra. */
  --velo:        rgba(20, 27, 36, .5);
  /* Un comando appoggiato SOPRA una fotografia qualunque (il pulsante
     «Elimina» di una cella della galleria): il suo fondo e il suo segno
     restano leggibili sopra qualunque immagine, quindi non seguono la
     palette come il resto dell'interfaccia. */
  --chip-fondo:  rgba(20, 27, 36, .6);
  --chip-testo:  #ffffff;

  /* ── Il meteo ──────────────────────────────────────────────────────────────
     Una famiglia a parte, e non per vezzo: ambra e rosso qui sopra significano
     avviso ed errore, e il verde-acqua significa «l'azione principale». Un sole
     dipinto con l'ambra dell'avviso insegna a leggere l'ambra come «attenzione»
     in un posto dove vuol dire soltanto «c'è il sole», e il giorno che serve
     davvero un avviso quello non si distingue più.

     Sono illustrazioni, non testo: il contrasto qui non risponde al 4,5:1 dei
     token di interfaccia (nessuno legge una nuvola). Risponde a una domanda più
     bassa — si riconosce a 24px, che è la misura nella riga delle previsioni. */
  --meteo-sole:        #e39a12;
  --meteo-fulmine:     #e0a800;
  --meteo-nuvola:      #8ca4bd;
  --meteo-nuvola-cupa: #66798f;
  --meteo-pioggia:     #3b7fba;
  --meteo-neve:        #7fa9c9;
}

/* ── Palette scura: "officina" ──────────────────────────────────────────────
   Grafite freddo, non nero tinto: il nero puro su uno schermo acceso fa
   vibrare il testo chiaro sopra di sé, e dopo un'ora si sente. */
:root[data-bs-theme="dark"] {
  color-scheme: dark;

  --sfondo:          #131820;
  --rail:            #0e131a;
  --superficie:      #1a212c;
  --superficie-alt:  #222b38;
  --bordo:           #2c3643;
  --bordo-forte:     #6e7d90;

  --testo:           #e7edf4;
  --testo-tenue:     #9dabbb;
  --testo-debole:    #8594a8;

  --accento:         #22c1b5;
  --accento-forte:   #3ad4c8;
  --accento-testo:   #3ad4c8;
  --su-accento:      #05171a;   /* sul verde-acqua acceso il testo scuro si legge, il bianco no */
  --accento-tenue:   #12333a;
  --accento-rgb:     34, 193, 181;   /* come sopra: sorvegliato da TokensTest */
  --anello:          color-mix(in srgb, var(--accento) 40%, transparent);

  --ok:              #5cc46a;
  --ok-tenue:        #17301c;
  --attenzione:      #e8b34a;
  --attenzione-tenue:#3a2d15;
  --errore:          #f4736c;
  --errore-tenue:    #3d1d1e;
  --info:            #5fb0ef;
  --info-tenue:      #152c40;
  --lavorazione:       #b890f2;
  --lavorazione-tenue: #2b2142;

  --ombra:      0 1px 2px rgb(0 0 0 / .40), 0 6px 16px -8px rgb(0 0 0 / .55);
  --ombra-alta: 0 2px 6px rgb(0 0 0 / .45), 0 20px 44px -18px rgb(0 0 0 / .70);

  --reticolo:   #1e2734;

  /* Più fitto che in chiaro: la cromia di fondo qui è già scura, un velo
     alla stessa opacità della palette chiara si vedrebbe a malapena. */
  --velo:        rgba(4, 6, 9, .65);
  --chip-fondo:  rgba(0, 0, 0, .6);
  --chip-testo:  #ffffff;

  /* Il meteo in scuro: gli stessi ruoli, non le stesse cifre schiarite. Su
     grafite un oro scuro sparisce e un azzurro pallido abbaglia — si alzano il
     sole e la pioggia, si abbassa la neve. */
  --meteo-sole:        #ffc24d;
  --meteo-fulmine:     #ffd43b;
  --meteo-nuvola:      #8096ad;
  --meteo-nuvola-cupa: #5d7187;
  --meteo-pioggia:     #5ba3e0;
  --meteo-neve:        #cfe5f5;
}


/* ── Stampa: sempre la palette chiara ────────────────────────────────────────
   Un PDF salvato col tema scuro attivo sarebbe testo chiaro su fondo scuro,
   e sulla carta un fondo scuro è inchiostro sprecato. Solo in stampa i token
   del tema scuro riprendono i valori del chiaro (i valori sono gli stessi di
   sopra: se cambiano lassù, cambiano anche qui). */
@media print {
  :root[data-bs-theme="dark"] {
    color-scheme: light;
    --sfondo: #eceff4;
    --rail: #ffffff;
    --superficie: #ffffff;
    --superficie-alt: #e6ebf1;
    --bordo: #d9e0e8;
    --bordo-forte: #6f7a86;
    --testo: #141b24;
    --testo-tenue: #4a586a;
    --testo-debole: #5c6978;
    --accento: #0e7c77;
    --accento-forte: #0a6560;
    --accento-testo: #0b6d69;
    --su-accento: #ffffff;
    --accento-tenue: #dcefee;
    --accento-rgb: 14, 124, 119;
    --ok: #1f7a3a;
    --ok-tenue: #e0f2e4;
    --attenzione: #8a5a08;
    --attenzione-tenue: #fbf0da;
    --errore: #b3261e;
    --errore-tenue: #fbe6e4;
    --info: #1a5f96;
    --info-tenue: #e2eefa;
    --lavorazione: #6b3fa0;
    --lavorazione-tenue: #efe7fa;
    --reticolo: #dbe2ea;
  }
}