/* ============================================================
   Voice Break — vb-tema.css
   COLORE E TIPOGRAFIA, IN UN POSTO SOLO            (28/08/2026)
   ============================================================

   RESPONSABILITA'
     questo foglio     la palette, i due temi, i caratteri
     vb-ritmo.css      gli spazi e le misure di lettura
     le pagine         SCOSTAMENTI dichiarati, non una seconda palette

   PERCHE' ESISTE
   --------------
   La stessa palette stava ricopiata in ventidue pagine. Misurato il
   28/08: 1070 dichiarazioni di token nelle pagine, di cui l'87% era la
   stessa riga ripetuta -- --book-blue #363B97 identico in ventuno file.

   Il costo non e' lo spazio: e' che ventidue copie DIVERGONO. E avevano
   gia' divergito, in modo visibile:

     tema scuro, fondo   #2A2D78 in 16 pagine, #14152A in 5
     tema scuro, testo   #FAF6F0 in 16, #F0EBE0 in 5, #E8E4F5 in 1
     tema chiaro, bordo  due sfumature, 12 pagine contro 9

   Si vedeva a occhio nudo passando da "Le mie sessioni" al dettaglio di
   una seduta: due pagine collegate fra loro, e in tema scuro il fondo
   cambiava sotto i piedi.

   COME SONO SCELTI I VALORI CANONICI
   ----------------------------------
   Il valore di maggioranza, con una conferma che non e' un caso: il
   fondo del tema scuro, #2A2D78, E' --book-blue-deep. Il tema scuro e'
   il blu profondo del libro. Le cinque pagine deviate usavano un
   quasi-nero che con la palette non c'entra niente: non era una
   variante, era deriva.

   Per i colori di STATO il criterio e' un altro, e vince sulla
   maggioranza: il contrasto misurato. Errore e successo stavano nella
   palette fissa, un valore per tutti e due i temi, e sul fondo blu il
   rosso faceva 2,3:1 -- meta' della soglia AA. La maggioranza aveva
   torto e le cinque pagine deviate avevano ragione. Ora stanno nei due
   temi, e prova_tema.js blocco 5 misura il rapporto invece di fidarsi
   del colore: chi domani ne sceglie un altro lo puo' fare, e sa subito
   se si legge.

   La relazione e' scritta qui nei commenti e NON ancora nel codice
   (--bg-base: var(--book-blue-deep)): quel passaggio cambierebbe la
   forma dei valori e renderebbe illeggibile la verifica di questa
   migrazione, che deve poter dimostrare di aver cambiato solo cio' che
   voleva. Si fa dopo, e si verifica da solo.

   COME SI USA
   -----------
   La pagina lo carica PRIMA del proprio <style>, cosi' cio' che
   dichiara per se' vince. Uno scostamento di pagina si scrive nel
   proprio blocco e si commenta col perche': senza il perche', fra un
   mese e' indistinguibile da una nuova deriva.
   ============================================================ */

/* ------------------------------------------------------------
   LA PALETTE, uguale nei due temi.
   I quattro archetipi non sono decorazione: sono l'oggetto del
   prodotto, e il loro colore non cambia col tema perche' Fuoco
   deve restare Fuoco su carta e sullo schermo scuro.
   ------------------------------------------------------------ */
:root {
  --book-blue:      #363B97;
  --book-blue-deep: #2A2D78;
  --book-rose:      #C87DC6;
  --book-lavender:  #8FB6F1;

  --aria:   #F2B838;
  --acqua:  #6BA8D4;
  --terra:  #A8754C;
  --fuoco:  #D4492C;
}

/* ------------------------------------------------------------
   TEMA CHIARO — "editorial"
   Carta calda e inchiostro. I bordi tirano verso il blu del
   libro invece che verso il grigio: un grigio neutro sembra non
   scelto, una traccia di accento sembra decisa.
   ------------------------------------------------------------ */
[data-skin="editorial"] {
  --bg-deep:  #F4F0E6;
  --bg-base:  #FAF8F3;
  --bg-card:  rgba(255, 255, 255, 0.65);
  --bg-glass: rgba(255, 255, 255, 0.55);

  /* IL FONDO DELLE FINESTRE MODALI, qui dal 20/09. Stava in quattro
     pagine, otto dichiarazioni identiche copiate a mano: oggi coincidono,
     domani no, e nessuno se ne accorgerebbe -- un pannello leggermente
     diverso dagli altri non e' un errore che salta all'occhio. Sul tema
     chiaro e' la carta stessa; sullo scuro e' piu' profondo del fondo,
     perche' una finestra che si apre deve staccare da cio' che copre. */
  --bg-modal: #FAF8F3;

  --border:        rgba(54, 59, 151, 0.12);
  --border-strong: rgba(54, 59, 151, 0.22);


  /* I QUATTRO LIVELLI DI TESTO, misurati sul proprio fondo: 16,4 / 10,6
     / 8,3 -- e --fg-faint a 2,6, sotto la soglia AA di 4,5. E' voluto:
     e' il token dei dettagli spenti, una data, un contatore. Il patto e'
     che non porti MAI da solo un'informazione che serve. Se un giorno
     servira' per del testo vero va schiarito prima, e prova_tema.js
     blocco 5 e' il posto dove si verifica. */
  --fg:       #1A1631;
  --fg-mid:   rgba(26, 22, 49, 0.85);
  --fg-low:   rgba(26, 22, 49, 0.78);
  --fg-faint: rgba(26, 22, 49, 0.42);

  --accent:   var(--book-rose);
  --accent-2: var(--book-blue);

  /* ERRORE E SUCCESSO NON STANNO NELLA PALETTE FISSA, e non e' una
     questione di gusto: e' misurata. Un rosso solo per tutti e due i
     temi faceva 4,9:1 sulla carta ma 2,3:1 sul fondo blu -- meta'
     della soglia AA, cioe' un messaggio d'errore che sul tema scuro
     non si legge. Un colore di stato che non si legge e' il caso
     peggiore: compare solo quando qualcosa e' gia' andato storto. */
  /* L'AMBRA E I FONDI DELLE PASTIGLIE, qui dal 20/09. Stavano in tre
     pagine con valori diversi -- ambra #96650F contro #C9881C, verde
     #2F6B4C contro #3B7A5A, rosso #B0392C contro #B5483A -- e le
     differenze erano troppo piccole per vedersi a occhio e troppo
     grandi per essere le stesse. Verde e rosso non tornano: erano
     --success-color e --error-color scritti due volte, e le pagine
     ora usano quelli. L'ambra resta perche' un avviso non e' ne' un
     errore ne' un successo.
     #8E5F0E e non #96650F: sulla pastiglia color miele il primo fa
     4,7:1, il secondo 4,2. */
  --amber:         #8E5F0E;
  --bg-ok:         #DDF2E5;
  --bg-avviso:     #FBEAC9;

  --error-color:   #B5483A;   /* 5,0:1 sulla carta */
  --success-color: #287946;   /* 5,1:1 — il verde delle pagine stava
                                 a 4,1 e non passava */

  /* Il serif in corsivo e' la voce del libro; il senza grazie legge il
     testo di lavoro. Il peso leggero del corpo tiene la pagina ariosa
     senza allargare gli spazi. */
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --display-italic-style: italic;
  --display-weight: 400;
  --body: 'Public Sans', system-ui, sans-serif;
  --body-weight: 300;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  --logo-frame: transparent;
  --logo-frame-border: transparent;
  --logo-glow: none;
  --grain-opacity: 0.04;
}

/* ------------------------------------------------------------
   TEMA SCURO — "studio"
   Il fondo E' --book-blue-deep: non un nero qualsiasi, il blu
   del libro portato in ombra. Da li' viene tutto il resto --
   i bordi e i testi sono la carta chiara a opacita' calanti,
   cosi' il grigio non compare mai per caso.
   Il corsivo qui non c'e': a questa dimensione, su fondo scuro,
   il serif inclinato perde peso invece di guadagnarlo.
   ------------------------------------------------------------ */
[data-skin="studio"] {
  --bg-deep:  #14123A;
  --bg-base:  #2A2D78;
  --bg-card:  rgba(250, 246, 240, 0.06);
  --bg-modal: #1F2042;
  --bg-glass: rgba(54, 59, 151, 0.45);

  --border:        rgba(250, 246, 240, 0.14);
  --border-strong: rgba(250, 246, 240, 0.30);


  /* I QUATTRO LIVELLI DI TESTO, misurati sul proprio fondo: 11,2 / 9,7 /
     8,0 -- e --fg-faint a 3,3, sotto la soglia AA di 4,5, come sul
     chiaro e per lo stesso motivo: dettagli spenti, mai da soli. */
  --fg:       #FAF6F0;
  --fg-mid:   rgba(250, 246, 240, 0.92);
  --fg-low:   rgba(250, 246, 240, 0.82);
  --fg-faint: rgba(250, 246, 240, 0.42);

  --accent:   var(--book-rose);
  --accent-2: var(--book-lavender);

  /* Gli stessi due, schiariti fin sopra la soglia sul fondo blu. */
  /* SULLO SCURO LE PASTIGLIE SONO VELI, non pastelli. Nel profilo
     utente il fondo chiaro restava chiaro anche sul tema scuro, con il
     testo verde sopra: 2,1:1, illeggibile -- e l'ambra 1,6:1. Un velo
     del colore stesso al 14% sul blu del libro tiene il testo a 5,3:1
     e 5,2:1. */
  --amber:         #F0B95A;
  --bg-ok:         rgba(74, 222, 128, 0.14);
  --bg-avviso:     rgba(240, 185, 90, 0.14);

  --error-color:   #FCA5A5;   /* 6,3:1 sul fondo scuro */
  --success-color: #4ADE80;   /* 6,9:1 */

  --display: 'Geist', system-ui, sans-serif;
  --display-italic-style: normal;
  --display-weight: 500;
  --body: 'Geist', system-ui, sans-serif;
  --body-weight: 400;
  --mono: 'Geist Mono', 'JetBrains Mono', monospace;

  --logo-frame: #FAF6F0;
  --logo-frame-border: rgba(250, 246, 240, 0.20);
  --logo-glow: url(#logoGlow);
  --grain-opacity: 0.045;
}