/* =============================================================================
   tema_pa.css — I TOKEN della linea PA. Solo variabili, nessuna regola.
   Campionati da logo_areterisksuite.png il 22/08/2026, non scelti a occhio.

   PERCHE' SOLO TOKEN. La struttura (griglia dei campi, spaziature, forma dei
   riquadri) viene dalle schede del rischio e sta in `scheda.css`, scritto senza
   un solo colore letterale e sempre attraverso queste variabili. Cosi' cambiare
   tinta vuol dire sostituire QUESTO file, non rincorrere un colore dentro venti
   pagine — che e' la situazione da cui siamo partiti, con il blocco :root
   copiato dentro ogni <style>.

   I TRE FOGLI NON SI SOVRAPPONGONO. Regola scritta qui perche' e' il punto in
   cui si sbaglia:
     - `campi.css`  -> le MISURE dei campi (padding, corpo, margini) e il
                       padding del riquadro. Ha il doppio corredo mouse/dito.
     - `scheda.css` -> la FORMA (sfondi, bordi, raggi, ombre, disposizione).
     - `tema_pa.css`-> i VALORI di colore che la forma usa.
   `.blocco` finisce diviso fra due fogli apposta: il padding sta in campi.css,
   lo sfondo e il bordo in scheda.css. Non aggiungere padding in scheda.css:
   scavalcherebbe il corredo dito e in campo le caselle tornerebbero da mouse.

   ORDINE DEI FOGLI, uguale in tutte le pagine:
     tema_pa.css  ->  campi.css  ->  scheda.css  ->  intestazione.css
   Nelle due mappe i vendor MapLibre restano in testa, prima di tutto.

   ------------------------------------------------------------------------
   QUELLO CHE QUESTO FILE NON GOVERNA — E' LA REGOLA PIU' IMPORTANTE QUI DENTRO.

   Il tema governa la CORNICE: intestazioni, riquadri, pulsanti, sfondi, testo.
   NON tocca i colori che sono DATO, perche' quelli non sono decorazione e
   ripassarli in blu renderebbe illeggibile una perizia:

     - i quattro verdi delle classi, in `classi_verde.js` — finiscono nella
       mappa E nelle stampe, e dicono che cos'e' quel poligono;
     - i colori di rischio, in `colori_rischio.json` — sono il metodo, congelati;
     - l'arancio e il fucsia dell'allerta di scadenza;
     - il PESO DEL DIFETTO (PS / S / MS) — e' una scala del protocollo, non uno
       stato dell'interfaccia. Oggi ha DUE codifiche diverse in giro per le
       pagine (grigio-verde/ambra/mattone in prototipo_verde.html, contro
       giallo/arancio/rosso della matrice in prototipo_vra_completo.html):
       finche' non e' deciso quale sia quella buona resta dov'e', scritta nella
       pagina, e non entra ne' qui ne' in scheda.css;
     - le icone-dato degli alberi.

   Se un giorno uno di questi finisse qui dentro, sarebbe un errore da
   correggere, non una scelta di stile.
   ------------------------------------------------------------------------

   Il marchio e' BICROMATICO: due tinte, non tre. Bordi, sfondi e testo tenue si
   ricavano da quelle due per luminosita'. E' un vincolo utile: una palette di
   due colori non si sfalsa nel tempo.

   L'UNICA ECCEZIONE E' IL FUOCO, ed e' voluta. Il contorno del campo attivo
   faceva l'ambra, che nel marchio PA non esiste; ricavarlo dalle due tinte
   avrebbe messo il bordo del campo nella stessa famiglia dell'intestazione che
   gli sta venti pixel sopra, e su una scheda da quaranta campi sapere dove si
   sta scrivendo conta piu' della coerenza. Quindi `--pa-fuoco` e' una terza
   tinta, viola-indaco, di SOLA INTERFACCIA: non compare in nessuna stampa, non
   descrive nessun dato, e si usa SOLO come contorno, mai come riempimento —
   cosi' non puo' essere scambiata per una pastiglia di dato. Le famiglie libere
   erano due (turchese e indaco): il turchese e' scartato perche' a colpo
   d'occhio si legge come "carta da zucchero, ma di piu'".
   ============================================================================= */

:root {
  /* --- Le due tinte del marchio, esatte ---------------------------------- */
  /* Meta' scura dello scudo, "Arete", "RISK". */
  --pa-blu-notte: #0a2c51;
  /* Meta' chiara dello scudo, l'albero, "Suite". */
  --pa-carta-zucchero: #6099c4;

  /* --- Derivate, per luminosita' ---------------------------------------- */
  /* Stati premuti e ombre profonde. */
  --pa-blu-profondo: #061a30;
  /* Passaggi e cornici sul chiaro. */
  --pa-azzurro-tenue: #a9c8e0;
  --pa-azzurro-velo: #e4eef6;

  /* --- Accento ----------------------------------------------------------- */
  /* Cio' che e' acceso ma non e' l'intestazione: bottone modulo attivo, scheda
     aggiunta al volo, orlo del bottone sotto il puntatore. Sta nella famiglia
     chiara del marchio, non e' una tinta in piu'. */
  --pa-accento: #6099c4;
  --pa-accento-scuro: #436b89;
  --pa-accento-velo: rgba(96, 153, 196, 0.14);

  /* --- Fuoco (vedi la nota in testa: terza tinta, solo interfaccia) ------ */
  --pa-fuoco: #6a4fbf;
  --pa-fuoco-velo: rgba(106, 79, 191, 0.16);

  /* --- Superfici --------------------------------------------------------- */
  /* Il fondo pagina non e' bianco puro: sotto un'intestazione blu notte il
     bianco pieno fa vibrare il bordo. */
  --pa-fondo: #f4f7fa;
  --pa-pannello: #ffffff;
  --pa-confine: #d5e0ea;
  /* Il campo che si legge e non si scrive. Piu' scuro del fondo pagina, se no
     su un riquadro bianco un readonly sembra scrivibile. */
  --pa-campo-bloccato: #eef2f6;

  /* --- Veli -------------------------------------------------------------- */
  /* Fondo scuro della foto a schermo intero e dei dialoghi. Ricavato dal blu
     profondo, non dal nero: il nero sotto un'immagine tira al viola. */
  --pa-velo-scuro: rgba(6, 26, 48, 0.85);
  --pa-velo-medio: rgba(6, 26, 48, 0.55);
  --pa-velo-tondo: rgba(6, 26, 48, 0.65);
  /* Chiari, per cio' che sta SOPRA una superficie blu piena. */
  --pa-velo-chiaro: rgba(255, 255, 255, 0.85);
  --pa-velo-chiaro-tenue: rgba(255, 255, 255, 0.75);

  /* --- Testo ------------------------------------------------------------- */
  /* Il testo corrente e' il blu notte schiarito, non nero: il nero accanto al
     blu del marchio si legge come una terza tinta estranea. */
  --pa-testo: #17273a;
  --pa-testo-tenue: #5b7189;
  --pa-testo-su-scuro: #ffffff;

  /* --- Segnali ----------------------------------------------------------- */
  /* Solo interfaccia: conferme, errori e avvisi dei FORM. Non hanno niente a
     che vedere con i colori del dato elencati in testa a questo file. Il velo
     e' il fondo della fascia, la tinta piena il testo che ci sta sopra. */
  --pa-ok: #2e7d5b;
  --pa-ok-velo: #e2efe9;
  --pa-ok-orlo: #b9d8cb;
  --pa-attenzione: #b8791f;
  --pa-attenzione-velo: #f7ecd9;
  --pa-attenzione-orlo: #e6cfa8;
  --pa-errore: #b3402f;
  --pa-errore-velo: #f6e4e1;
  --pa-errore-orlo: #e3bdb7;

  /* --- Sopra una superficie blu piena ------------------------------------
     Bottoni e orli dentro l'intestazione o dentro una barra scura: non
     possono usare i confini chiari, sparirebbero. */
  --pa-orlo-su-scuro: rgba(255, 255, 255, 0.50);
  --pa-fondo-su-scuro: rgba(255, 255, 255, 0.12);
  --pa-fondo-su-scuro-forte: rgba(255, 255, 255, 0.24);

  /* --- Tipografia -------------------------------------------------------- */
  --pa-carattere: -apple-system, "Segoe UI", Arial, sans-serif;
  /* Misurate sulle schede del rischio il 22/08/2026, non stimate. Il corpo dei
     CAMPI non e' qui: sta in campi.css, che lo cambia da solo fra mouse e dito.
     Qui c'e' solo cio' che campi.css non tocca. */
  --pa-corpo-grande: 14px;    /* valore a destra nelle righe di risultato */
  --pa-corpo: 12.5px;         /* bottoni con etichetta lunga */
  --pa-corpo-piccolo: 12px;   /* voci scelte, fasce di stato */
  --pa-titolo-sezione: 12px;  /* .blocco h3 — era 10.5px stimato */
  --pa-sottotitolo: 11px;     /* .blocco h4 */
  --pa-minuto: 11.5px;        /* schede della barra */
  --pa-nota: 11px;

  /* --- Forma ------------------------------------------------------------- */
  /* Scala unica. Prima il riquadro era 12px nelle schede moderne e 10px nelle
     figlie, il campo 7px contro 6px: divergenze nate a copia-incolla. */
  --pa-raggio-piccolo: 4px;
  --pa-raggio: 6px;
  --pa-raggio-medio: 8px;
  --pa-raggio-grande: 10px;
  --pa-raggio-tondo: 999px;

  /* Il contorno che si mette INTORNO a un testo colorato dal dato — il nome
     del colore di triage, che puo' capitare giallo su fondo giallo. Non e' una
     tinta di marca: e' cio' che rende leggibile il dato qualunque esso sia, e
     per questo non segue il tema. */
  --pa-contorno-dato: #333333;

  --pa-ombra-lieve: 0 1px 2px rgba(10, 44, 81, 0.05);
  --pa-ombra: 0 2px 8px rgba(10, 44, 81, 0.12);
  --pa-ombra-media: 0 4px 16px rgba(10, 44, 81, 0.18);
  --pa-ombra-pannello: 0 2px 10px rgba(10, 44, 81, 0.20);
  --pa-ombra-barra: 0 2px 8px rgba(10, 44, 81, 0.07);
  --pa-ombra-alta: 0 8px 30px rgba(6, 26, 48, 0.40);
}