/*
  I colori del sito sono quelli del prodotto. Questo file lo scrive `sito/costruisci.mjs` dalla tavolozza del
  prodotto (il file `tavolozza.ts`): non si tocca a mano.

  Il blu (`--selezione`, dove sei) e il rosso (`--numero`, quello che aspetta) sono gli unici due colori: come nell'app.
  `--dove-sei` è il blu scritto leggibile per le parole e le icone, su ogni fondo dove sta (4,8 a 1).
  `.inverso` è una schermata col tema contrario (di giorno scura); `.t-chiaro` e `.t-scuro` fissano il tema.
*/
:root {
  color-scheme: light dark;
  --sfondo: #f6f6f3;
  --superficie: #ebebe8;
  --superficie-alta: #ffffff;
  --testo: #0b0b0b;
  --testo-piano: #545453;
  --bordo: #d0d0ce;
  --velo: #e0e0dd;
  --velo-forte: #d5d5d3;
  --scelta: #cbcbc8;
  --accento: #0b0b0b;
  --accento-testo: #f6f6f3;
  --selezione: #2f5bea;
  --selezione-testo: #ffffff;
  --dove-sei: #2b51cf;
  --numero: #d32a2a;
  --numero-testo: #ffffff;
  --buono: #2e7d4f;
  --ombra: #0000001f;
}
@media (prefers-color-scheme: dark) {
  :root {
  --sfondo: #0b0b0b;
  --superficie: #141414;
  --superficie-alta: #191919;
  --testo: #f6f6f3;
  --testo-piano: #979795;
  --bordo: #252525;
  --velo: #212121;
  --velo-forte: #292929;
  --scelta: #2d2d2d;
  --accento: #f6f6f3;
  --accento-testo: #0b0b0b;
  --selezione: #2f5bea;
  --selezione-testo: #ffffff;
  --dove-sei: #6988ed;
  --numero: #d32a2a;
  --numero-testo: #ffffff;
  --buono: #5bb07e;
  --ombra: #000000e6;
  }
}
.t-chiaro {
  --sfondo: #f6f6f3;
  --superficie: #ebebe8;
  --superficie-alta: #ffffff;
  --testo: #0b0b0b;
  --testo-piano: #545453;
  --bordo: #d0d0ce;
  --velo: #e0e0dd;
  --velo-forte: #d5d5d3;
  --scelta: #cbcbc8;
  --accento: #0b0b0b;
  --accento-testo: #f6f6f3;
  --selezione: #2f5bea;
  --selezione-testo: #ffffff;
  --dove-sei: #2b51cf;
  --numero: #d32a2a;
  --numero-testo: #ffffff;
  --buono: #2e7d4f;
  --ombra: #0000001f;
}
.t-scuro {
  --sfondo: #0b0b0b;
  --superficie: #141414;
  --superficie-alta: #191919;
  --testo: #f6f6f3;
  --testo-piano: #979795;
  --bordo: #252525;
  --velo: #212121;
  --velo-forte: #292929;
  --scelta: #2d2d2d;
  --accento: #f6f6f3;
  --accento-testo: #0b0b0b;
  --selezione: #2f5bea;
  --selezione-testo: #ffffff;
  --dove-sei: #6988ed;
  --numero: #d32a2a;
  --numero-testo: #ffffff;
  --buono: #5bb07e;
  --ombra: #000000e6;
}
@media (prefers-color-scheme: light) {
  .inverso {
  --sfondo: #0b0b0b;
  --superficie: #141414;
  --superficie-alta: #191919;
  --testo: #f6f6f3;
  --testo-piano: #979795;
  --bordo: #252525;
  --velo: #212121;
  --velo-forte: #292929;
  --scelta: #2d2d2d;
  --accento: #f6f6f3;
  --accento-testo: #0b0b0b;
  --selezione: #2f5bea;
  --selezione-testo: #ffffff;
  --dove-sei: #6988ed;
  --numero: #d32a2a;
  --numero-testo: #ffffff;
  --buono: #5bb07e;
  --ombra: #000000e6;
  }
}
@media (prefers-color-scheme: dark) {
  .inverso {
  --sfondo: #141414;
  --superficie: #191919;
  --superficie-alta: #212121;
  --testo: #f6f6f3;
  --testo-piano: #979795;
  --bordo: #252525;
  --velo: #212121;
  --velo-forte: #292929;
  --scelta: #2d2d2d;
  --accento: #f6f6f3;
  --accento-testo: #0b0b0b;
  --selezione: #2f5bea;
  --selezione-testo: #ffffff;
  --dove-sei: #6988ed;
  --numero: #d32a2a;
  --numero-testo: #ffffff;
  --buono: #5bb07e;
  --ombra: #000000e6;
  }
}