/* ═══════════════════════════════════════════════════════════
   SETTORE STILI · 1. TOKEN — colori, font, misure.
   Cambiando questi valori cambia tutta la pagina.

   «Notte sulla mappa»: la pagina è sempre scura, anche di giorno,
   come l'intro e come il satellite di notte. Un blu-notte quasi nero
   invece del nero pieno, luci soffuse dietro, superfici come vetro
   appoggiato in un vassoio (il doppio bordo, --bezel). Un accento
   solo, un azzurro spento; il bianco fa da bottone principale.
   ═══════════════════════════════════════════════════════════ */

/* ── i caratteri, dentro il progetto: funzionano anche offline ──
   Unbounded per i titoli (largo, geometrico), Geist per il testo.
   Tutti e due con licenza libera SIL OFL: vedi fonts/OFL-*.txt */
@font-face{
  font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/unbounded-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/unbounded-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* campi, tendine, calendari e barre di scorrimento: scuri */
  color-scheme:dark;

  /* superfici e testo.
     --card e --card2 sono pieni, non trasparenti: le intestazioni che
     restano ferme scorrendo (il registro spese) devono coprire. */
  --bg:#070a12;            /* fondo pagina: blu-notte, non nero */
  --card:#0f1424;          /* card */
  --card2:#171e33;         /* riquadri dentro le card */
  --glass:rgba(255,255,255,.045);   /* riquadri leggeri, lasciano vedere il fondo */
  --ink:#eef2f8;           /* testo principale */
  --ink2:#97a1b6;          /* testo secondario */
  --hair:rgba(255,255,255,.08);     /* linee sottili */
  --nav:rgba(13,18,32,.66);         /* la barra che galleggia */

  /* ombre tinte di blu-notte, mai nere a caso: la luce viene dall'alto */
  --shadow:0 12px 32px -14px rgba(1,4,14,.9);
  --shadow-lg:0 34px 80px -24px rgba(1,4,14,.95);
  /* il doppio bordo: un filo, un vassoio largo 6px, un secondo filo,
     e un riflesso in alto dentro. Segue da solo gli angoli arrotondati. */
  --bezel:0 0 0 1px rgba(255,255,255,.07),0 0 0 6px rgba(255,255,255,.022),
          0 0 0 7px rgba(255,255,255,.055),inset 0 1px 0 rgba(255,255,255,.07);
  /* il bordo semplice, per le cose piccole e numerose */
  --ring:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.05);

  /* l'accento: uno solo. Il resto sono colori che dicono qualcosa
     (fatto, attenzione, errore), un po' spenti per non urlare. */
  --blue:#82acff;
  --on-accent:#081022;     /* il testo sopra un bottone chiaro */
  --green:#4fcf8d;
  --orange:#ffb547;
  --red:#ff6f6b;
  --purple:#c08bff;
  --teal:#5fcde3;

  /* la luce soffusa dietro la pagina: un viaggio la tinge del suo colore */
  --glow1:#2c5cff;
  --glow2:#11a3a8;

  /* ── colori dei mezzi ──
     Questi NON sono colori dell'interfaccia: portano un'informazione,
     dicono con che mezzo si è fatta una tratta. Perciò non sono
     alias degli accenti qui sopra, ma una tavolozza a sé, scelta e
     verificata perché resti leggibile anche da chi non distingue certi
     colori. Sono i valori verificati sul fondo scuro.
     Il colore da solo non basta comunque: sulla mappa ogni mezzo ha
     anche un suo tratteggio, e negli elenchi la sua icona e il suo nome. */
  --air:#0199f0;
  --road:#c88004;
  --rail:#f74867;
  --foot:#05ab86;
  --horse:#d556ce;

  /* tipografia e misure */
  --font:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --font-titoli:"Unbounded","Geist",-apple-system,system-ui,sans-serif;
  --radius:26px;
  --radius-sm:14px;
  --wrap:1060px;           /* larghezza massima dei contenuti */
  /* il movimento: parte deciso e si posa piano, come una cosa con un peso */
  --ease:cubic-bezier(.32,.72,0,1);
}