/* Le decisioni di design di BusBus, in un posto solo.
   ---------------------------------------------------------------------------
   Regola unica da cui dipende tutto il resto: qui non si aggiungono valori, si
   sceglie fra quelli che ci sono. Se serve una spaziatura che non c'e', o si usa
   quella piu' vicina o si cambia la scala per tutti — mai un numero al volo.
   E' quello che distingue un'interfaccia progettata da una aggiustata: prima di
   questo file il CSS usava 70 spaziature diverse, 29 misure di testo e 12 pesi.

   Caricato come foglio a se' e non copiato in ogni file, cosi' esiste una sola
   copia da cambiare. */

:root {
  /* ---- COLORE DELL'INTERFACCIA ------------------------------------------
     Pulsanti, collegamenti, stati attivi. E' la parte sostituibile: cambiando
     --primary e --primary-ink cambia tutta la personalita' del sito senza
     toccare una regola.

     Oggi e' inchiostro. Non nero pieno: il nero assoluto su bianco stanca la
     vista e sembra un errore di stampa, mentre un blu-grigio molto scuro si
     lega ai colori delle linee, che sono in gran parte rossi e blu. */
  --primary: #111820;
  --primary-ink: #ffffff;
  --primary-hover: #263241;
  --primary-soft: rgba(17, 24, 32, .06);
  --primary-ring: rgba(17, 24, 32, .18);

  /* ---- COLORE DEI DATI ---------------------------------------------------
     Non toccare questi quando si cambia --primary: qui il colore *significa*
     qualcosa. Il verde dice "posizione fresca", non "elemento decorativo", e
     i colori delle linee arrivano dal GTFS di ACTV, non da noi.
     Misurato: le 108 linee occupano il 72% della ruota fra rosa-rosso e
     blu-viola, ed e' il motivo per cui l'interfaccia sta in scala di grigi —
     qualunque tinta le facesse concorrenza verrebbe letta come un dato. */
  --dato-fresco: #12876a;
  --dato-recente: #b07d10;
  --dato-vecchio: #b4553a;
  --dato-assente: #9ea8b4;

  /* Il filo interno dei badge di linea. Serve perche' cinque linee di
     navigazione su venticinque sono piu' chiare del fondo — la 1 e' bianca —
     e senza un bordo sparirebbero. Cambia verso col tema. */
  --filo-badge: rgba(17, 24, 32, .14);

  /* Testo appoggiato sopra il colore primario, cioe' dentro il blocco scuro:
     ha bisogno di due gradi di attenuazione come il testo normale. */
  --su-primary-2: rgba(255, 255, 255, .78);
  --su-primary-3: rgba(255, 255, 255, .55);

  /* ---- SUPERFICI E TESTO ------------------------------------------------
     Neutri con una punta di blu, non grigi puri: un grigio neutro accanto a
     un inchiostro bluastro sembra sporco. */
  --sfondo: #ffffff;
  --sfondo-2: #f7f8fa;
  --sfondo-3: #eef1f4;
  --testo: #111820;
  --testo-2: #566171;
  --testo-3: #7b8593;
  --filo: #e6eaee;
  --filo-forte: #d2d8df;

  /* ---- SPAZIATURE --------------------------------------------------------
     Otto valori. Le distanze grandi delle sezioni usano clamp perche' devono
     restringersi sul telefono, ma restano ancorate a questa scala. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-sezione: clamp(56px, 8vw, 104px);

  /* ---- TESTO -------------------------------------------------------------
     Cinque misure piu' due da titolo. La gerarchia la fa il peso, non la
     grandezza: e' quello che permette di averne cosi' poche. */
  /* L'interfaccia della mappa ha bisogno di un gradino sotto --t-1: sono
     etichette dense, lette di sguincio con il pollice sopra, non testo da
     leggere. Undici e' il pavimento: sotto non si scende. */
  --t-0: 11px;
  --t-1: 12px;
  --t-2: 14px;
  --t-3: 16px;
  --t-4: 20px;
  --t-5: clamp(26px, 3.4vw, 38px);
  --t-6: clamp(38px, 6vw, 62px);

  --peso-normale: 400;
  --peso-medio: 600;
  --peso-forte: 750;

  /* ---- ANGOLI E OMBRE ----------------------------------------------------
     Tre raggi e due ombre. Prima erano sedici e trentaquattro, e il risultato
     era che due superfici accanto non si assomigliavano mai del tutto. */
  --raggio-1: 6px;
  --raggio-2: 10px;
  --raggio-3: 16px;
  --raggio-tondo: 999px;

  --ombra-1: 0 1px 2px rgba(17, 24, 32, .05);
  --ombra-2: 0 8px 24px rgba(17, 24, 32, .09);

  /* ---- CARATTERE ---------------------------------------------------------
     Sans di sistema per il testo; monospaziato dove ci sono numeri da
     incolonnare, che in un'app di orari e' spesso. */
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-numeri: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* ---- LARGHEZZE ---------------------------------------------------------- */
  --colonna: 1160px;
  --lettura: 62ch;
}

/* ---------------------------------------------------------------------------
   TEMA SCURO
   ---------------------------------------------------------------------------
   Solo i token cambiano, mai le regole: e' il motivo per cui questo file
   esiste. Prima del riordino un tema scuro sulle pagine di testo avrebbe
   voluto dire riscriverle; adesso sono queste venti righe.

   Serve perche' la mappa il tema scuro ce l'ha da sempre, e chi tocca il
   pulsante rosso dentro la mappa per aprire "come leggere la mappa" prendeva
   una schermata bianca in faccia. La pagina si apre da dentro l'app, non da
   una ricerca.

   L'inchiostro non diventa grigio: si rovescia. Su fondo scuro il colore
   primario e' chiaro e il testo dei pulsanti e' scuro, cosi' un pulsante resta
   la cosa piu' contrastata della pagina invece di sparire nel fondo. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Grigi neutri, non blu-notte: gli stessi di sistema di Apple che usa la
       mappa. Chi apre "come leggere la mappa" dal buio della mappa non deve
       trovarsi davanti un blu diverso. Il colore resta ai dati qui sotto. */
    --primary: #f2f2f5;
    --primary-ink: #141416;
    --primary-hover: #ffffff;
    --primary-soft: rgba(242, 242, 245, .08);
    --primary-ring: rgba(242, 242, 245, .22);

    /* Piu' luminosi: gli stessi verdi e ambre su fondo scuro risulterebbero
       spenti, e queste tre tinte devono restare leggibili perche' dicono
       quanto fidarsi di una posizione. */
    --dato-fresco: #34c48f;
    --dato-recente: #e0b13d;
    --dato-vecchio: #e0805a;
    --dato-assente: #6b7683;

    --filo-badge: rgba(255, 255, 255, .22);
    --su-primary-2: rgba(20, 20, 22, .74);
    --su-primary-3: rgba(20, 20, 22, .52);

    --sfondo: #0f0f10;
    --sfondo-2: #1a1a1c;
    --sfondo-3: #242426;
    --testo: #f2f2f5;
    --testo-2: #a0a0a6;
    --testo-3: #8c8c92;
    --filo: #262628;
    --filo-forte: #3a3a3c;

    --ombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ombra-2: 0 8px 24px rgba(0, 0, 0, .45);
  }
}

/* La scelta esplicita batte quella di sistema, ed e' la stessa che si fa nella
   mappa: le pagine caricano /boot-theme.js, leggono la stessa preferenza
   salvata e la applicano. Chi mette la mappa in chiaro trova in chiaro anche
   le pagine, invece di due mondi che non si parlano. */
:root[data-theme="dark"] {
  --primary: #f2f2f5;
  --primary-ink: #141416;
  --primary-hover: #ffffff;
  --primary-soft: rgba(242, 242, 245, .08);
  --primary-ring: rgba(242, 242, 245, .22);
  --dato-fresco: #34c48f;
  --dato-recente: #e0b13d;
  --dato-vecchio: #e0805a;
  --dato-assente: #6b7683;
  --filo-badge: rgba(255, 255, 255, .22);
  --su-primary-2: rgba(20, 20, 22, .74);
  --su-primary-3: rgba(20, 20, 22, .52);
  --sfondo: #0f0f10;
  --sfondo-2: #1a1a1c;
  --sfondo-3: #242426;
  --testo: #f2f2f5;
  --testo-2: #a0a0a6;
  --testo-3: #8c8c92;
  --filo: #262628;
  --filo-forte: #3a3a3c;
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombra-2: 0 8px 24px rgba(0, 0, 0, .45);
}

:root[data-theme="light"] {
  --primary: #111820;
  --primary-ink: #ffffff;
  --primary-hover: #263241;
  --primary-soft: rgba(17, 24, 32, .06);
  --primary-ring: rgba(17, 24, 32, .18);
  --dato-fresco: #12876a;
  --dato-recente: #b07d10;
  --dato-vecchio: #b4553a;
  --dato-assente: #9ea8b4;
  --filo-badge: rgba(17, 24, 32, .14);
  --su-primary-2: rgba(255, 255, 255, .78);
  --su-primary-3: rgba(255, 255, 255, .55);
  --sfondo: #ffffff;
  --sfondo-2: #f7f8fa;
  --sfondo-3: #eef1f4;
  --testo: #111820;
  --testo-2: #566171;
  --testo-3: #7b8593;
  --filo: #e6eaee;
  --filo-forte: #d2d8df;
  --ombra-1: 0 1px 2px rgba(17, 24, 32, .05);
  --ombra-2: 0 8px 24px rgba(17, 24, 32, .09);
}