/* ==========================================================================
   La versione scura del sito (24 settembre 2026)
   Vale solo quando <html> ha data-aspetto="scuro": lo mette lo script in testa
   a ogni pagina, seguendo il telefono o il computer (o ?aspetto=scuro
   nell'indirizzo, per provarla). Senza JavaScript il sito resta chiaro.
   Questo foglio va per ultimo, dopo css/riquadri.css, e cambia solo colori:
   l'impaginazione è quella di sempre. In stampa vale sempre la versione chiara.
   L'idea: la pagina passa una notte invece di una giornata (il cielo lo
   disegna js/veduta/paesaggio.js) e le regole della versione chiara si
   rovesciano senza cambiare natura. Il testo è un bianco caldo, il
   grigio-lilla si schiarisce, i contorni sono chiari, i riquadri sono carbone
   trasparente. Vaniglia e malva chiaro restano superfici, mai testo: la forma
   fuori registro dietro i riquadri resta vaniglia, il riquadro del corso resta
   giallo, come una finestra accesa, e sopra la vaniglia si scrive in carbone.
   Il marchio va in negativo: «tutti» bianco, «prompti» vaniglia, il sole
   com'è (decisione di Isabella del 24 settembre, al posto del riquadro bianco).
   Contrasti (WCAG), misurati sul caso peggiore: il riquadro sopra il punto più
   chiaro della notte, cioè la luna (i colori del cielo contati dopo la velatura
   del passaggio finale). Testo #F2F0EC 8,5:1 (su una nuvola 12:1); grigio-lilla
   #BDB4C2 5:1 (su una nuvola 6,8:1); carbone sul riquadro del corso 11,8:1.
   Apertura e piè di pagina stanno sul cielo senza riquadro: lì il testo è
   #F2F0EC e le nuvole della notte sono scure abbastanza da restare sopra 5,6:1.
   ========================================================================== */

@media screen {

  /* ---------- 1. Palette ---------------------------------------------------- */
  html[data-aspetto="scuro"] {
    color-scheme: dark;
    --fondo: #1C1D21;
    --testo: #F2F0EC;                          /* bianco caldo */
    --testo-2: #BDB4C2;                        /* il grigio-lilla, schiarito */
    --link: #BDB4C2;
    --superficie: rgba(244, 238, 169, 0.18);   /* la vaniglia come evidenza: un velo */
    --linea: rgba(242, 240, 236, 0.22);
    /* I riquadri: carbone trasparente. Acceso quando la luna lo raggiunge, un
       filo più chiaro; in penombra più scuro e più freddo. */
    --riquadro: rgba(34, 34, 40, 0.85);
    --riquadro-ombra: rgba(19, 20, 29, 0.88);
    --vaniglia-velo: rgba(244, 238, 169, 0.9);
    --vaniglia-ombra: rgba(214, 208, 160, 0.9);
    --dietro-vaniglia: rgba(244, 238, 169, 0.78);
    --dietro-lilla: rgba(203, 193, 205, 0.8);
    --sole-linea: rgba(242, 240, 236, 0.22);
    /* Il cielo di riserva (senza WebGL, o prima del primo disegno): una notte ferma. */
    background: #1B1E31 linear-gradient(180deg, #232640 0%, #1A1D30 45%, #1D2033 75%, #2E2A40 100%) fixed;
  }
  html[data-aspetto="scuro"] ::selection { background: #F4EEA9; color: #1C1D21; }

  /* ---------- 2. Testata e piè di pagina ------------------------------------ */
  html[data-aspetto="scuro"] .testata.scorsa { background: rgba(28, 29, 33, 0.86); }
  html[data-aspetto="scuro"] .pie { --testo-pie: #F2F0EC; }

  /* Il marchio in negativo (decisione di Isabella, 24 settembre 2026): sul
     cielo della notte «tutti» è bianco e «prompti» vaniglia; il sole resta
     com'è, vaniglia col suo contorno carbone. Vale per la testata e per il
     marchio impilato del piè di pagina: i gruppi marchio-tutti e
     marchio-prompti del disegno hanno il colore come attributo, e il foglio
     di stile lo scavalca. Il riquadro bianco sotto il marchio, che il
     manuale chiedeva sul fondo scuro, non serve più. */
  html[data-aspetto="scuro"] .marchio-tutti { fill: #FFFFFF; }
  html[data-aspetto="scuro"] .marchio-prompti { fill: #F4EEA9; }

  /* ---------- 3. Il riquadro del corso: giallo, con le parole in carbone ------
     Dentro si torna alla palette chiara (le variabili valgono per tutto quello
     che c'è dentro, bottone compreso); il contorno e quello della forma dietro
     restano chiari, come gli altri riquadri della notte. */
  html[data-aspetto="scuro"] .blocco {
    --testo: #1C1D21;
    --testo-2: #1C1D21;
    --link: #1C1D21;
    --superficie: rgba(28, 29, 33, 0.08);
    color: #1C1D21;
    border-color: #F2F0EC;
  }
  html[data-aspetto="scuro"] .blocco::before { border-color: #F2F0EC; }
  html[data-aspetto="scuro"] .blocco ::selection { background: #FFFFFF; color: #1C1D21; }

  /* ---------- 4. I bottoni ---------------------------------------------------
     La scritta sta sul colore (vaniglia o lilla), quindi è carbone anche di
     notte; il contorno è chiaro. */
  html[data-aspetto="scuro"] .bottone,
  html[data-aspetto="scuro"] .bottone-2,
  html[data-aspetto="scuro"] .bottone:hover,
  html[data-aspetto="scuro"] .bottone:focus-visible,
  html[data-aspetto="scuro"] .bottone-2:hover,
  html[data-aspetto="scuro"] .bottone-2:focus-visible { color: #1C1D21; }

  /* ---------- 5. Il modulo degli strumenti ---------------------------------- */
  html[data-aspetto="scuro"] .richiesta input[type="email"] { background: #25262B; }
  html[data-aspetto="scuro"] .richiesta input[type="email"]::placeholder { color: #9E96A3; }

  /* ---------- 6. Le parole che si accendono scorrendo ----------------------
     Sul carbone la vaniglia piena toglierebbe contrasto al testo chiaro: qui
     l'evidenziatore è un velo. Nel riquadro giallo resta il lilla (css/riquadri.css). */
  html[data-aspetto="scuro"] { --evidenzia: rgba(244, 238, 169, 0.32); }
}