/* Token di design di Etna Style.
   I valori non sono scelti a occhio: ogni coppia realmente usata e' verificata
   da tests/unit/ColorTest.php. La sabbia della prima proposta era piu' chiara
   ed e' stata scartata: su avorio dava 1,84 di contrasto, sotto il 3,0 che
   serve a un bordo per essere percepibile. */
:root {
  --es-ivory: #FAF8F4;   /* fondo, capo chiaro del gradiente di pagina */
  --es-ink:   #1A1D21;   /* testo, 15.9 su avorio; fondo del footer */
  --es-navy:  #1F3A5F;   /* accento unico, 9.4 su avorio, 7.5 su fine gradiente */
  /* Lo sfondo della pagina scurisce scrollando, da avorio a --es-dusk
     (definito nel foglio di design): ogni colore di testo o bordo deve
     reggere sul capo SCURO del gradiente, non solo su avorio. I valori qui
     sotto sono stati ricalcolati per questo; le coppie stanno in
     tests/unit/ColorTest.php. */
  /* Nome strutturale di proposito: 3,0 basta per bordi e componenti, NON per
     testo normale, che richiede 4,5. Chiamarlo "sabbia" o "secondario"
     invitava a usarlo come colore di testo. */
  --es-border-strong: #7E6C46;   /* bordi e divisori, 4.8 su avorio, 3.3 su fine gradiente */
  --es-muted: #54595E;   /* testo secondario, 6.7 su avorio, 4.6 su fine gradiente */

  --es-font-title: "Playfair Display", Georgia, serif;
  --es-font-body:  "Inter", system-ui, -apple-system, sans-serif;

  --es-space-1: .25rem;
  --es-space-2: .5rem;
  --es-space-3: 1rem;
  --es-space-4: 1.5rem;
  --es-space-5: 2.5rem;
  --es-space-6: 4rem;

  --es-ratio-product: 3 / 4;   /* vincolo di progetto, non preferenza */
  --es-focus: 2px solid var(--es-navy);
}

/* Il focus deve restare sempre visibile: e' la base della navigazione da
   tastiera richiesta dal §8 della specifica. */
*:focus-visible {
  outline: var(--es-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}