/* ═══════════════════════════════════════════════════════════════════════════
   LE TINTE — CSS PURO, E STA IN UN FILE A SÉ PER QUESTO
   ═══════════════════════════════════════════════════════════════════════════
   Qui dentro non c'è una sola direttiva di Tailwind: sono tre blocchi `:root`
   che un browser legge da solo, senza costruzione. È la ragione del file.

   `tema.css` lo importa, e Vite lo inlinea nel foglio delle tre interfacce
   esattamente come quando queste righe stavano lì: per pannello e regie non
   cambia niente.

   Ma il TEMA DI KEYCLOAK non passa da Vite — è Java, serve file statici — e
   senza questo file avrebbe dovuto COPIARE i valori. Due copie divergono, e a
   divergere sarebbe il colore della schermata di accesso: la prima cosa che un
   cliente vede, e l'ultima che qualcuno pensa di controllare.

   Perciò: chi ha bisogno delle tinte senza Tailwind punta QUESTO file.
   Aggiungere una tinta qui la rende visibile a tutti e quattro insieme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ LE TINTE: i valori grezzi, che cambiano col tema ══════════════════════
   Queste NON sono token di Tailwind: sono le variabili che i token leggono.
   La separazione è il trucco che tiene in piedi tutto il resto.

   Un token di Tailwind vale `var(--tinta-sfondo)`. Sia il token sia la tinta
   sono dichiarati su `:root`; quando una regola più specifica (`:root[data-tema
   ="scuro"]`) ridefinisce la tinta, il token — che è calcolato su `:root`
   sullo stesso elemento — si risolve col valore vincente e scende per eredità
   a tutto il documento.

   La conseguenza pratica è che il tema si cambia in UN posto e nessuna utility
   ha bisogno del prefisso `scuro:`. `bg-superficie` è già giusta in entrambi i
   temi. La variante `scuro:` di sopra serve solo per le poche cose che nei due
   temi sono davvero DIVERSE come regola, non come colore — e in questo sistema
   di progetto sono pochissime.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --tinta-sfondo:       #faf9f8;
  --tinta-superficie:   #ffffff;
  --tinta-superficie-2: #f5f4f3;
  --tinta-superficie-3: #edebe9;
  --tinta-tratto:       #e1dfdd;
  --tinta-tratto-2:     #c8c6c4;

  --tinta-testo:        #1b1a19;
  --tinta-testo-2:      #605e5c;
  --tinta-testo-3:      #8a8886;

  /* Il verde del marchio è #00d672, e nel tema SCURO è esattamente quello. Qui
     no, ed è voluto: su bianco #00d672 rende 1.93:1, contro il 4.5:1 che serve
     a un testo — e il marchio qui è anche testo (collegamenti, scheda attiva).
     Scurito fino a essere leggibile diventa #008044, 5.03:1, come il colore che
     c'era prima.

     Da lì nasce lo spostamento di `--tinta-buono`: il verde del marchio
     leggibile e il verde di «tutto bene» distavano dE 1.5 — lo stesso colore.
     Un collegamento e un servizio in salute si sarebbero disegnati uguali.
     Portando lo stato sul verde-acqua la distanza torna a dE 27, e «ok» si
     legge ancora. Non è la sola difesa: la pastiglia di stato porta un segno e
     una parola (§4 più sotto), perché il colore da solo non basta mai. */
  --tinta-marchio:        #008044;
  --tinta-marchio-scuro:  #00713c;
  --tinta-marchio-tinta:  #effcf6;
  --tinta-marchio-tinta2: #d9f9ea;

  /* ── IL FONDALE, che NON segue il tema ─────────────────────────────────
     Questi quattro valori stanno nel blocco chiaro e non vengono ridefiniti
     piu' sotto: e' voluto. Sono i colori dello sfondo del funnel — la pagina
     di accesso lo porta —, e quello sfondo e' scuro SEMPRE, in tutti e due i
     temi. Una tinta che seguisse il tema qui farebbe danno: in tema chiaro
     l'alone diventerebbe verde cupo su fondo nero, cioe' invisibile.

     I valori vengono da `funnel/assets/css/`: `--black` di base.css e
     `--accent-glow` di brand-mailpod.css, che a sua volta dichiara di prendere
     il verde «di peso da TakeUp-PreLaunch». Sono copiati e non puntati perche'
     il funnel e' un sito statico che non condivide fogli con l'impianto.

     L'alone porta gia' moltiplicata l'opacita' che nel funnel sta sull'elemento
     (.35 del colore x .4 del blocco): scritto cosi' non serve un secondo strato
     sopra il modulo di accesso, che e' l'unica cosa che quella pagina deve far
     leggere. */
  --tinta-fondale:         #08080a;
  --tinta-fondale-marchio: #00d672;
  --tinta-fondale-alone:   rgba(0, 214, 114, .14);
  --tinta-fondale-riga:    rgba(255, 255, 255, .02);

  /* Il contorno della scheda di accesso, e vive solo sul fondale: i tratti del
     tema (`--tinta-tratto`, `--tinta-tratto-2`) sono tarati su `--tinta-sfondo`
     #1b1a19, mentre il fondale e' piu' scuro — sul nero rendono 1,76:1 e 2,58:1,
     sotto il 3:1 che serve a far vedere un contorno. Questo fa 3,90:1 sul
     fondale e 3,29:1 sulla scheda: passa da tutti e due i lati, che e' cio' che
     conta per un bordo, il quale ha uno sfondo diverso per lato. */
  --tinta-fondale-bordo:   #706d6c;

  --tinta-buono:      #0f7b6c;
  --tinta-attenzione: #8f5700;
  --tinta-grave:      #b91c1c;

  /* Solo ciò che galleggia porta un'ombra; tutto il resto ha un bordo.
     È la regola 3 della bozza, e questi sono i suoi due unici valori. */
  --tinta-alza: 0 2px 4px rgba(27,26,25,.06), 0 8px 22px rgba(27,26,25,.10);

  /* ── DIFETTO DELLA BOZZA, corretto qui ────────────────────────────────────
     Nella bozza questa vale `none`, e viene usata come `box-shadow: var(--alza),
     var(--luce)`. La grammatica di box-shadow è `none | <shadow>#`: `none` è
     ammesso SOLO da solo, mai dentro un elenco. Un elenco che lo contiene è
     invalido e il browser scarta l'INTERA dichiarazione — quindi nella bozza il
     pannello che dovrebbe galleggiare non ha alcuna ombra in tema chiaro, e ce
     l'ha in tema scuro (dove --luce è un inset legittimo).

     Misurato con il lexer di css-tree contro la grammatica di box-shadow:
       "…rgba(27,26,25,.10), none"      → Mismatch
       "…rgba(27,26,25,.10), 0 0 #0000" → valida
     Un'ombra nulla e trasparente occupa il posto senza disegnare niente. */
  --tinta-luce: 0 0 #0000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --tinta-sfondo:       #1b1a19;
    --tinta-superficie:   #252423;
    --tinta-superficie-2: #2d2c2b;
    --tinta-superficie-3: #3b3a39;
    --tinta-tratto:       #3b3a39;
    --tinta-tratto-2:     #545251;

    --tinta-testo:        #faf9f8;
    --tinta-testo-2:      #c8c6c4;
    --tinta-testo-3:      #a19f9d;

    /* Lo stesso verde del fondale, e si punta invece di riscriverlo: sono la
       stessa cosa — il marchio nella sua forma piena, quella che vive su fondo
       scuro. Se dovessero divergere, il legame va sciolto qui con una ragione
       scritta, non separato per distrazione. */
    --tinta-marchio:        var(--tinta-fondale-marchio);
    --tinta-marchio-scuro:  #00f080;
    --tinta-marchio-tinta:  #173927;
    --tinta-marchio-tinta2: #125636;

    --tinta-buono:      #45b8ad;
    --tinta-attenzione: #dda63a;
    --tinta-grave:      #e88c86;

    --tinta-alza: 0 2px 4px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.5);
    --tinta-luce: inset 0 1px 0 rgba(255,255,255,.04);
  }
}

/* La scelta esplicita ripete i valori invece di riusare il blocco di sopra:
   il blocco di sopra vive dentro una @media e non è raggiungibile da fuori.
   Duplicazione voluta, ed è l'unica del file — sono le stesse sedici righe
   della bozza, per la stessa ragione. */
:root[data-tema="scuro"] {
  --tinta-sfondo:       #1b1a19;
  --tinta-superficie:   #252423;
  --tinta-superficie-2: #2d2c2b;
  --tinta-superficie-3: #3b3a39;
  --tinta-tratto:       #3b3a39;
  --tinta-tratto-2:     #545251;

  --tinta-testo:        #faf9f8;
  --tinta-testo-2:      #c8c6c4;
  --tinta-testo-3:      #a19f9d;

  /* Lo stesso verde del fondale, e si punta invece di riscriverlo: sono la
     stessa cosa — il marchio nella sua forma piena, quella che vive su fondo
     scuro. Se dovessero divergere, il legame va sciolto qui con una ragione
     scritta, non separato per distrazione. */
  --tinta-marchio:        var(--tinta-fondale-marchio);
  --tinta-marchio-scuro:  #00f080;
  --tinta-marchio-tinta:  #173927;
  --tinta-marchio-tinta2: #125636;

  --tinta-buono:      #45b8ad;
  --tinta-attenzione: #dda63a;
  --tinta-grave:      #e88c86;

  --tinta-alza: 0 2px 4px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.5);
  --tinta-luce: inset 0 1px 0 rgba(255,255,255,.04);
}