/* OOH — Argilla.
 *
 * Unico posto dove vivono i valori del design V8. Se un colore, un'ombra o un
 * raggio serve altrove, si aggiunge qui e si usa la variabile.
 *
 * ⚠️ UNA MATERIA SOLA. La città è stampata in rilievo dentro la stessa
 * superficie dell'interfaccia, e le strade sono i solchi fra gli isolati. Sopra
 * la mappa non galleggia niente: niente pillole, niente riquadri, niente carte.
 *
 * ⚠️ L'UNICA SEPARAZIONE È UN FILETTO DA 1 PIXEL. Le righe non sono contenitori.
 * La selezione è il PESO del carattere, più un filetto sotto le due voci
 * principali. È la regola che ha sostituito il design precedente, dove ogni
 * elemento aveva la sua ombra e sopra la mappa diventava tutto lattiginoso.
 *
 * La luce viene sempre da in alto a sinistra, e non cambia mai.
 */
:root {
  color-scheme: light;

  --argilla:  #EDE5D3;   /* la superficie: scocca, fondo di tutto */
  --isolato:  #F2EBDD;   /* i blocchi della città, in rilievo */
  --solco:    #E5DCC8;   /* strade, pozzetti foto, pannelli incassati */
  --strada:   #E3D9C4;   /* le arterie incise */

  --ink:      #14120C;   /* testo, icone accese, segnaposti luogo */
  --corpo:    #3A3527;   /* paragrafi */
  --ink-2:    #6B6149;   /* etichette e testo secondario — 4,9:1 */
  --ink-3:    #857B64;   /* icone spente — 3,3:1, mai testo piccolo */

  --arancio:      #E85F27;  /* segnaposti e azione */
  --arancio-vivo: #F2740D;  /* solo lo schermo intero del tramonto */
  --su-arancio:   #1B1206;  /* testo e filetti sull'arancione — 6,4:1 */

  /* le tre ricette del rilievo, e non ce ne sono altre */
  --rilievo:  1px 2px 4px rgba(150,128,95,.32), inset 0 1px 0 rgba(255,252,245,.85);
  --incavo:   inset 2px 3px 8px rgba(150,128,95,.45);
  --tasto:    -2px -2px 5px rgba(255,253,247,.9), 2px 3px 7px rgba(150,128,95,.4);
  --bottone:  1px 3px 8px rgba(150,90,50,.45), inset 0 1px 1px rgba(255,255,255,.45);
  --filetto:  1px solid rgba(120,100,70,.16);

  --lato: 26px;          /* il testo */
  --incassato: 22px;     /* mappa e foto: due pixel più dentro */
  --tocco: 44px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--argilla);
  color: var(--ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.4; font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
a { color: var(--ink); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--arancio); outline-offset: 3px; }

/* Premuto: il rilievo diventa incavo. 120 ms, e nient'altro. */
.premibile { transition: box-shadow .12s ease; }
.premibile:active { box-shadow: var(--incavo); }

.etichetta {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
}