/* Token di colore del sito, in due temi completi.
 *
 * Il tema di default è quello SCURO: è il buio prima della scoperta, il fondo
 * su cui ogni casella della tavola si accende. Non è un rispecchiamento del
 * tema di sistema ma una scelta di progetto (Ruling 107): il chiaro esiste per
 * intero ed è a un clic, e la scelta resta salvata.
 *
 * Nessun valore è scelto a occhio: i colori d'epoca nascono da sei tonalità
 * distribuite lungo il racconto — dal bronzo dell'antichità al rosso dell'era
 * nucleare — e la loro luminosità è calcolata perché ogni coppia testo/sfondo
 * superi 4,5:1, sulla pastiglia come sul fondo della pagina, dove nel nuovo
 * tema il colore d'epoca diventa titolo, occhiello e collegamento.
 * tests/test_sito_identita.py lo verifica: se un colore cambia e scende sotto
 * la soglia, la suite fallisce.
 *
 * I commenti "tema:" delimitano i blocchi e sono la convenzione che permette
 * al test di attribuire ogni token al tema giusto senza interpretare la
 * cascata CSS. Non vanno rimossi.
 */

/* tema: scuro */
:root {
  color-scheme: dark;

  --colore-fondo: #0d0f14;
  --colore-superficie: #161921;
  --colore-superficie-2: #1d212b;
  --colore-testo: #ebe6da;
  --colore-testo-tenue: #a19b90;
  --colore-accento: #9cbdd2;
  --colore-bordo: #262a35;
  /* La casella non ancora scoperta: un rilievo appena percettibile nel buio. */
  --colore-spenta: #171a22;
  --colore-spenta-bordo: #23273180;

  --epoca-antichita-sfondo: #37261b;
  --epoca-antichita-testo: #d89464;
  --epoca-alchimia-sfondo: #37301b;
  --epoca-alchimia-testo: #d8bb64;
  --epoca-pneumatica-sfondo: #1b3729;
  --epoca-pneumatica-testo: #64d89e;
  --epoca-elettrolisi-sfondo: #1b2b37;
  --epoca-elettrolisi-testo: #64a8d8;
  --epoca-spettroscopia-sfondo: #291b37;
  --epoca-spettroscopia-testo: #a874dc;
  --epoca-nucleare-sfondo: #371b1f;
  --epoca-nucleare-testo: #d9687b;
}

/* tema: chiaro */
:root[data-tema="chiaro"] {
  color-scheme: light;

  --colore-fondo: #f8f6f0;
  --colore-superficie: #efebe2;
  --colore-superficie-2: #e6e1d5;
  --colore-testo: #1c1b18;
  --colore-testo-tenue: #5d594f;
  --colore-accento: #2c5f7c;
  --colore-bordo: #d8d2c5;
  --colore-spenta: #e9e5db;
  --colore-spenta-bordo: #d8d2c580;

  --epoca-antichita-sfondo: #f7ece3;
  --epoca-antichita-testo: #9a4f1c;
  --epoca-alchimia-sfondo: #f7f2e3;
  --epoca-alchimia-testo: #7a6218;
  --epoca-pneumatica-sfondo: #e3f7ed;
  --epoca-pneumatica-testo: #177043;
  --epoca-elettrolisi-sfondo: #e3eff7;
  --epoca-elettrolisi-testo: #1f6699;
  --epoca-spettroscopia-sfondo: #ede3f7;
  --epoca-spettroscopia-testo: #6c25b2;
  --epoca-nucleare-sfondo: #f7e3e7;
  --epoca-nucleare-testo: #b3253d;
}

/* Applicazione del colore d'epoca. Un solo blocco per entrambi i temi: i token
 * cambiano, le regole no. Dove un'epoca è il contesto (la sua pagina, la
 * scheda di un suo elemento, un passo della home) il colore d'epoca diventa
 * anche l'accento: è così che la pagina cambia colore lungo il racconto. */
.epoca--antichita {
  --epoca-sfondo: var(--epoca-antichita-sfondo);
  --epoca-testo: var(--epoca-antichita-testo);
}
.epoca--alchimia {
  --epoca-sfondo: var(--epoca-alchimia-sfondo);
  --epoca-testo: var(--epoca-alchimia-testo);
}
.epoca--pneumatica {
  --epoca-sfondo: var(--epoca-pneumatica-sfondo);
  --epoca-testo: var(--epoca-pneumatica-testo);
}
.epoca--elettrolisi {
  --epoca-sfondo: var(--epoca-elettrolisi-sfondo);
  --epoca-testo: var(--epoca-elettrolisi-testo);
}
.epoca--spettroscopia {
  --epoca-sfondo: var(--epoca-spettroscopia-sfondo);
  --epoca-testo: var(--epoca-spettroscopia-testo);
}
.epoca--nucleare {
  --epoca-sfondo: var(--epoca-nucleare-sfondo);
  --epoca-testo: var(--epoca-nucleare-testo);
}

.contesto-epoca {
  --colore-accento: var(--epoca-testo);
}