/* vrp-livrea.css - LA LIVREA DI CASA. Un file solo, e dentro ci sono solo
 * variabili: nessuna regola, nessun selettore che dipinga qualcosa.
 *
 * PERCHE' (vitti, 12/09/2026): *"cambiamo idea... una livrea unica per tutta
 * la piattaforma! E il servizio si riconosce dal contenuto, e proprio se
 * vogliamo fare i fighi dal favicon!"*.
 *
 * Prima di oggi in casa c'erano TRE livree diverse, e nessuna in un posto
 * solo: l'ardesia-blu della piattaforma (vrp-lab.css), il grigio-antracite di
 * wiz_foto e dello share, e dal mattino il rosso del diario. Lo stesso colore
 * stava scritto a mano in 10 file: cambiarne uno voleva dire cambiarli tutti,
 * e nessuno l'avrebbe mai fatto. Adesso il colore sta QUI e basta.
 *
 * COME SI USA: si carica per PRIMA (la piattaforma la mette in cima al suo
 * <head>), e gli altri fogli non scrivono piu' `#2a2e37` ma `var(--vrp-panel)`.
 * Un servizio che non l'ha ancora fatto continua a funzionare: i suoi colori
 * restano quelli che ha scritto, e si convertira' quando tocca a lui.
 *
 * COME SI CAMBIA LIVREA: si cambiano i valori qui dentro. Uno solo, o tutti.
 *
 * ⚠️ IL SERVIZIO NON SI RICONOSCE PIU' DAL COLORE. Prima il grigio diceva
 * «sei nel wizard» e il chiaro «sei nel diario di Elena». Da oggi lo dicono
 * il CONTENUTO e il FAVICON (l'emoji della targa del servizio, vedi
 * vrp_favicon()). E' una scelta di vitti, non un effetto collaterale.
 *
 * LA SCALA. Quattro piani, dal fondo verso di noi, ognuno un gradino piu'
 * chiaro: cosi' l'occhio legge il rilievo senza bisogno di ombre.
 *   0. il fondale   --vrp-bg      (sotto il wallpaper, quando c'e')
 *   1. la cornice   --vrp-panel
 *   2. il riquadro  --vrp-panel2
 *   3. la riga      --vrp-panel3  (quello che si tocca)
 */

:root {
  color-scheme: dark;

  /* ---- i quattro piani ------------------------------------------------ */
  --vrp-bg:      #241416;
  --vrp-panel:   #33191c;
  --vrp-panel2:  #432126;
  --vrp-panel3:  #4e262b;

  /* i traslucidi: servono dove sotto c'e' il wallpaper e deve trasparire */
  --vrp-panel-a: rgba(46, 22, 25, .82);
  --vrp-panel-b: rgba(58, 28, 32, .70);
  --vrp-liv1:    rgba(58, 28, 32, .78);
  --vrp-liv2:    rgba(36, 20, 22, .55);
  --vrp-liv3:    rgba(78, 38, 43, .78);
  --vrp-velo:    rgba(20, 10, 12, .78);   /* sopra una foto, per leggere */
  --vrp-velo-leggero: rgba(20, 10, 12, .45); /* pannelli piccoli (login): la foto si vede sotto - vitti 18/09/2026 */

  /* ---- l'inchiostro --------------------------------------------------- */
  --vrp-txt:      #f2e7e6;    /* bianco CALDO: su un fondo vinaccia il bianco
                                 freddo sembra una macchia azzurra */
  --vrp-txt-forte: #fffaf9;
  --vrp-mut:      #c6a3a4;
  --vrp-mut-2:    #a98485;

  /* ---- le righe ------------------------------------------------------- */
  --vrp-line:        rgba(255, 224, 224, .12);
  --vrp-line-strong: rgba(255, 224, 224, .20);

  /* ---- i colori che PARLANO ------------------------------------------- */
  /* L'azzurro se n'e' andato: su un fondo vinaccia litiga. Al suo posto un
     ambra caldo, che sul rosso scuro sta come l'ottone sul mogano. */
  --vrp-accent:     #e0a458;
  --vrp-accent-txt: #2a1418;   /* il testo SOPRA l'ambra */
  --vrp-gold:       #eccb8c;

  /* verde e rosso restano verde e rosso - sono parole, non decorazione - ma
     schiariti: su una pagina gia' rossa un errore rosso scuro non si vede. */
  --vrp-ok:      #5fbf72;
  --vrp-ok-bg:   rgba(80, 150, 110, .20);
  --vrp-ok-line: rgba(110, 180, 140, .45);
  --vrp-err:     #ff7a68;
  --vrp-err-bg:  rgba(160, 71, 71, .22);
  --vrp-err-line: rgba(200, 120, 110, .45);
  --vrp-warn:    #ffcc66;
  --vrp-warn-bg: rgba(150, 120, 70, .20);
  --vrp-warn-line: rgba(180, 150, 100, .45);

  --vrp-link:  #f0b880;        /* un ambra piu' chiaro: si vede che e' un link */
  --vrp-code:  #ffc9a8;        /* i nomi di file e i pezzi di codice */

  /* ===================================================================
     LE MISURE: DOVE STANNO LE COSE SOPRA LA FOTO
     ===================================================================

     Queste non sono colori, e non sono qui per simmetria. vitti, 12/09/2026:
     *"ricordandoti che abbiamo in piano di integrare Claude per aiutarci a
     disporre foto e barre sulla finestra del browser"* - cioe'
     [[project_claude_css_sfondi]], l'idea dell'08/09: dare a un modello la
     FOTO dello sfondo e lo SCATTO della pagina, e farsi dire dove spostare la
     barra e le cartoline perche' non coprano la parte che conta (a Vulcano:
     le loro facce).

     🔑 PERCHE' SERVONO DELLE MANOPOLE, e non basta «che scriva il CSS».
     Un modello che scrive CSS libero puo' rompere la pagina in mille modi, e
     ogni giro costa in token quanto e' lungo quello che scrive. Un modello
     che puo' solo GIRARE QUESTE MANOPOLE produce dieci righe, non puo'
     rompere niente che non sia la posizione di un riquadro, e il risultato si
     legge, si confronta e si butta in un secondo.
     Il catalogo leggibile da un programma - nomi, tipi, minimi e massimi -
     sta in `livrea.catalogo.json`, accanto a questo file apposta: se si
     aggiunge una manopola qui, si aggiunge li'.

     Sono scritte perche' una VARIANTE possa cambiarle da sola: un file per
     sfondo in `css/livree/<sfondo>.css`, caricato per ultimo, che ridichiara
     solo quello che serve. E' lo stesso meccanismo con cui il diario e'
     diventato rosso in venti righe.
     =================================================================== */

  /* la colonna delle cartoline: larghezza, e da che parte si appoggia.
     Il lato si dice coi due margini: `auto` spinge, `0` lascia stare.
       destra  (oggi) --vrp-cards-ml: auto  --vrp-cards-mr: 0
       sinistra       --vrp-cards-ml: 0     --vrp-cards-mr: auto
       centro         tutt'e due `auto` */
  --vrp-cards-w:   300px;
  --vrp-cards-ml:  auto;
  --vrp-cards-mr:  0;
  --vrp-cards-top: 4px;
  --vrp-cards-gap: 10px;
  --vrp-card-pad:  11px 14px;

  /* la barra in alto */
  --vrp-bar-gap: 4px;
  --vrp-bar-pad: 7px 13px;
  --vrp-bar-sotto: 22px;      /* quanto respiro fra la barra e quel che segue */

  /* la colonna del contenuto nelle pagine di lavoro */
  --vrp-wrap-max: 760px;

  /* IL VELO sopra la foto: due gradini, in alto e in basso. E' la manopola
     piu' importante per una foto nuova - troppo velo e la foto sparisce,
     troppo poco e il testo non si legge. Il contrasto pero' NON si tira a
     indovinare: si CALCOLA (WCAG). Il modello serve per il gusto e per
     l'ingombro, non per dire se due colori si distinguono. */
  --vrp-velo-alto:  rgba(36, 20, 22, .55);
  --vrp-velo-basso: rgba(20, 10, 12, .78);

  /* gli angoli e la sfocatura dei pannelli appoggiati sulla foto */
  --vrp-raggio: 12px;
  --vrp-sfoca:  3px;
}