/* ============================================================================
   GHISA — la design language di ferro.
   Questo file e' la sorgente unica: lo usa l'app in web/css/app.css e da qui
   vengono generate le schede del design system. Se un colore non e' qui, non
   esiste. Il documento che spiega il perche' e' in design/LINGUAGGIO.md.
   ========================================================================= */

/* --- i caratteri ------------------------------------------------------------
   Archivo per quello che si legge, JetBrains Mono per le etichette.

   Archivo e' un grottesco che discende dai caratteri da segnaletica americani
   di fine Ottocento: lo stesso mondo di metallo verniciato e lettere
   stampigliate delle fotografie da cui viene ghisa. Varia su peso (100-900) E
   larghezza (62-125%), quindi un file solo copre il testo, i titoli e le cifre
   condensate del display — e la larghezza arriva al 62%, molto piu' stretta di
   quanto serva oggi: c'e' margine per stringere ancora senza cambiare font.

   Tutti e due sono SIL OFL 1.1 **senza Reserved Font Name**, quindi si possono
   ridurre e modificare tenendo il loro nome. Chi apre questo file deve poter
   cercare «Archivo» e trovare chi l'ha disegnato: rinominare quando la licenza
   non lo chiede nasconderebbe la provenienza per niente. Dettagli e attribuzione
   in web/font/LICENZA.md.

   `swap` e non `block`: fra vedere il testo subito nel carattere di sistema e
   fissare due secondi uno schermo vuoto, in palestra non c'e' partita. */
@font-face {
  font-family: 'Archivo';
  src: url('../font/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../font/jetbrains-mono.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark light;

  /* --- materia -------------------------------------------------------------
     I nomi sono cose, non numeri. "ghisa" e "magnesite" si discutono in
     palestra; "grey-900" no, e dopo un mese nessuno sa piu' se era il fondo o
     il bordo. */
  --ghisa:        #101110;   /* fondo: la ghisa non verniciata, misurata sulla fotografia */
  --ghisa-2:      #181a19;   /* superficie sollevata: schede */
  --ghisa-3:      #222423;   /* seconda elevazione: campi, celle */
  --linea:        #303332;   /* bordo */
  --linea-viva:   #414543;   /* bordo di qualcosa che risponde al dito */
  --magnesite:    #f0ebe1;   /* testo: il gesso in luce, misurato. Mai #fff */
  --fumo:         #8f8b83;   /* testo secondario */

  /* --- segnali -------------------------------------------------------------
     Tre colori, tre significati, nessuna eccezione. Se serve un quarto colore
     vuol dire che sta nascendo un quarto significato: prima si nomina quello. */
  --ruggine:      #cc6839;   /* adesso: la serie aperta, il tasto che fa la cosa */
  /* La ruggine come SEGNO e come SUPERFICIE hanno bisogni opposti: un tratto su
     fondo scuro dev'essere chiaro per staccare, una superficie piena che porta
     testo bianco dev'essere scura perche' il testo si legga. Un colore solo non
     puo' fare le due cose: sopra #d9532b il bianco sta a 4.02, sotto il minimo.
     Quindi due token, e ognuno fa il suo mestiere. */
  --ruggine-piena: #b05931;  /* fondo dei tasti e dei gettoni attivi */
  --ruggine-velo: color-mix(in srgb, var(--ruggine) 14%, transparent);
  --ottone:       #bd8f4c;   /* merito: record personali */
  --ottone-velo:  color-mix(in srgb, var(--ottone) 16%, transparent);
  --riposo:       #618b73;   /* attesa: recupero fra le serie */
  --riposo-velo:  color-mix(in srgb, var(--riposo) 16%, transparent);
  --allarme:      #d65844;   /* distruttivo o rotto */

  /* --- caratteri -----------------------------------------------------------
     Due famiglie. Il mono non e' un vezzo da terminale: le etichette in mono
     maiuscoletto non si confondono mai con i dati, e le cifre restano in
     colonna quando il peso passa da 9 a 10. */
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Sette gradini, e fra due vicini c'e' sempre almeno un quarto di
     differenza — tranne fra piccolo e corpo, che sono 14 e 16 px e restano
     vicini apposta: e' la coppia standard di ogni interfaccia leggibile.
     Prima ce n'erano diciannove, di misure, che non e' una scala ma
     diciannove decisioni prese una alla volta. */
  --t-display: 700 2.6rem/0.95 var(--sans);   /* il numero che guardi da lontano */
  --t-numero:  650 2rem/1.05 var(--sans);     /* peso, ripetizioni, minuti */
  --t-titolo:  650 1.6rem/1.15 var(--sans);
  --t-sezione: 650 1.25rem/1.3 var(--sans);
  --t-corpo:   400 1rem/1.5 var(--sans);
  /* impeccable-disable-next-line flat-type-hierarchy -- 14 e 16 px sono la coppia piccolo/corpo standard: allontanarli vorrebbe dire scendere a 12.8, contro il principio 2 «si legge a braccio teso» */
  --t-piccolo: 400 0.86rem/1.45 var(--sans);
  --t-etichetta: 600 0.7rem/1.2 var(--mono);  /* va con --tracking-etichetta */

  /* la larghezza variabile serve qui: un peso a tre cifre piu' l'unita' deve
     stare in una cella da un terzo di schermo, e condensare e' meglio che
     rimpicciolire — il numero resta alto, quindi leggibile da lontano */
  --condensata: 80%;

  --tracking-display: -0.035em;
  --tracking-titolo:  -0.02em;
  --tracking-etichetta: 0.16em;

  /* --- spazio --------------------------------------------------------------
     Scala di 4. Sei valori: se ne serve un settimo, quasi sempre il problema
     e' il layout, non la scala. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --r-piccolo: 10px;
  --r-scheda:  14px;
  --r-foglio:  22px;
  --r-tondo:   999px;

  /* Il dito non e' un cursore: 44px e' il minimo che si prende senza guardare,
     e in palestra non guardi. */
  --tocco: 44px;

  /* --- movimento -----------------------------------------------------------
     Una sola curva per tutta l'app: parte decisa e si posa. Tre durate. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-svelto: 140ms;
  --t-medio:  240ms;
  --t-lento:  420ms;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* --- alias di compatibilita' --------------------------------------------
     I nomi vecchi restano vivi e puntano ai nuovi, cosi' il tema si applica a
     tutta l'app senza riscriverla riga per riga e senza una giornata di
     regressioni grafiche. Il codice nuovo usa i nomi di sopra. */
  --bg: var(--ghisa);
  --bg-elev: var(--ghisa-2);
  --bg-elev-2: var(--ghisa-3);
  --line: var(--linea);
  --text: var(--magnesite);
  --muted: var(--fumo);
  --accent: var(--ruggine);
  --accent-soft: var(--ruggine-velo);
  --good: var(--riposo);
  --danger: var(--allarme);
  --radius: var(--r-scheda);
  --pad: var(--s4);
  --font: var(--sans);
}

/* --- chiaro ----------------------------------------------------------------
   Non e' il tema scuro schiarito: e' un altro materiale. Carta di magnesite
   calda, inchiostro che tira al verde-nero come la ghisa vista di giorno.
   La ruggine scende di luminosita' perche' su carta chiara brucia. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ghisa:      #f2eadc;
    --ghisa-2:    #fcf8f0;
    --ghisa-3:    #e6dbca;
    --linea:      #d6cbb8;
    --linea-viva: #bdb19f;
    --magnesite:  #24201c;
    --fumo:       #645f58;
    --ruggine:    #9e4e29;
    --ruggine-piena: #b1572e;
    --allarme:    #ad4131;
    --ottone:     #bd8f4c;
    --riposo:     #486c57;
  }
}
:root[data-theme="light"] {
  --ghisa:      #f2eadc;
  --ghisa-2:    #fcf8f0;
  --ghisa-3:    #e6dbca;
  --linea:      #d6cbb8;
  --linea-viva: #bdb19f;
  --magnesite:  #24201c;
  --fumo:       #645f58;
  --ruggine:    #9e4e29;
  --ruggine-piena: #b1572e;
  --allarme:    #ad4131;
  --ottone:     #bd8f4c;
  --riposo:     #486c57;
}

/* --- primitive condivise --------------------------------------------------
   Poche classi, ma sono quelle che danno l'accento al linguaggio: l'etichetta
   in mono e il numero in cifre tabellari. */

.etichetta {
  font: var(--t-etichetta);
  letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase;
  color: var(--fumo);
}

.numero {
  font: var(--t-numero);
  font-stretch: var(--condensata);
  letter-spacing: var(--tracking-titolo);
  font-variant-numeric: tabular-nums;
}

.display {
  font: var(--t-display);
  font-stretch: var(--condensata);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

/* L'unita' non compete con il numero: e' piu' piccola, in mono, e non urla. */
.unita {
  font: 500 0.8rem/1 var(--mono);
  color: var(--fumo);
  letter-spacing: 0.04em;
}