/* ============================================================================
   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 */
  /* Alzato da #8f8b83. Il caso stretto e' l'etichetta sulla cella, che stava
     a 4.60 contro il minimo di 4.5: dentro per sei centesimi, cioe' fuori al
     primo ritocco del fondo. Adesso fa 5.35, e 5.33 sul chiaro. Un secondario
     non e' un testo che conta meno, e' un testo che si legge dopo. */
  --fumo:         #9a978f;   /* 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);
  /* L'OTTONE E' L'UNICO SEGNALE CHE PORTAVA LO STESSO VALORE NEI DUE TEMI, e
     nessuno se n'era accorto perche' il commento di test_contrasto.mjs diceva
     che nell'app e' «SOLO una superficie piena». Non e' vero: e' testo in
     quattro punti, e sulla carta chiara stava fra 2.13 e 2.75 contro 4.5.
     Sul chiaro scende a #7a5b30. Un colore solo non poteva fare le due cose —
     lo stesso conflitto gia' documentato qui sopra per la ruggine. */
  --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);
  /* Schiarito da #d65844 sullo scuro e scurito da #ad4131 sul chiaro: era il
     piu' debole dei tre segnali, 4.81 sul fondo. Un avviso che si fa leggere a
     fatica e' quello che si legge dopo aver premuto. Ora 5.60 e 5.31. */
  --allarme:      #db6a59;   /* 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);
  /* 0.875rem e non 0.86rem, che faceva 13.76px: la deroga qui sotto si
     giustifica dicendo «14 e 16 px», e adesso e' vero. Erano 14 px scritti
     male, e una deroga che cita un numero che il codice non ha e' una deroga
     che nessuno puo' controllare. */
  /* 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.875rem/1.45 var(--sans);
  /* 12.8 px e non 11.2. Il principio 2 di design/LINGUAGGIO.md dice «si legge
     a braccio teso» e vieta il testo sotto i 15 px; il maiuscoletto mono con
     tracking 0.16em a 11.2 px era il pezzo di interfaccia che si leggeva
     peggio di tutta l'app, indipendentemente dal colore. A 15 px non si
     arriva — «RIPETIZIONI» sfonda la cella da un terzo di schermo — ma quella
     cella non usa questo token: `.stat__label` in app.css ha un corpo e un
     tracking suoi, scritti apposta per quel caso. Qui sotto ci stanno solo
     titoletti di scheda, il marchio, le etichette dei campi e il gettone del
     record: misurati a 320 px, nessuno sfonda. */
  --t-etichetta: 600 0.8rem/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%;

  /* IL LOGOTIPO E' UN SEGNO, NON UN'ETICHETTA.
     Fino a ieri «FERRO» accanto al marchio prendeva --t-etichetta, cioe' lo
     stesso carattere e lo stesso peso dei titoletti di sezione: la parola che
     dice chi sei, vestita da didascalia. Qui invece e' Archivo al peso
     massimo e stretto, come i numeri grandi — e non e' una scelta di gusto,
     e' quello che fa rima col disegno: in 900 stretto le cinque maiuscole
     hanno larghezze quasi identiche, quindi stanno come un blocco accanto
     alle quattro barre verticali di icons/marchio.svg invece di stargli solo
     accanto.
     78% E NON 62%. Il 62 e' l'estremo del file e va bene sopra i ventotto
     punti; a sedici, che e' il corpo di una testata, chiude le contrograzie e
     le lettere diventano una macchia. Il tracking positivo per la stessa
     ragione al contrario: stretto, «FERRO» si tocca.
     Gli stessi due numeri stanno in native/FerroWatch/WorkoutView.swift, dove
     il polso scrive il suo marchio: li tiene insieme
     tools/controlla_display.mjs. */
  /* IL MARCHIO E' IN MAIUSCOLO, ED E' UNA SCELTA DI FORZA.
     «ferro» minuscolo in grottesco condensato si legge come una parola;
     «FERRO» a peso 900 e larghezza 66% si legge come un MARCHIO — la faccia dei
     loghi da palestra, lettere altissime e strettissime che riempiono tutta la
     riga. E' lo stesso disegno che il polso usa gia' per il bersaglio
     (`Tipo.bersaglio`, wght 900 / wdth 62): qui e' un po' meno stretto perche'
     cinque lettere su una barra sottile non hanno l'altezza per reggere il 62.

     LA LARGHEZZA RESTA 78%, E NON E' UN COMPROMESSO. Ci avevo messo 66 per
     spingere ancora, e la guardia `controlla_display.mjs` l'ha fermato: al polso
     c'e' lo stesso logotipo, e li' e' scritto il perche' del 78 con una misura
     accanto — «a diciassette punti il 62% chiude le contrograzie e le cinque
     lettere diventano una macchia; il 62% e' per i numeri sopra i ventotto
     punti». Il marchio qui e' a 1.05rem, cioe' la stessa taglia: vale la stessa
     misura. Lo stretto estremo del logo di riferimento vive su lettere alte
     quanto mezza pagina, non su una barra da sedici pixel.

     La spaziatura resta larga per la stessa ragione: a questa taglia le lettere
     addossate si impastano. Il potenziamento e' il MAIUSCOLO, che c'era da
     prendere e non era stato preso. */
  --t-marchio: 900 1.05rem/1 var(--sans);
  --larghezza-marchio: 78%;
  --tracking-marchio: 0.07em;

  --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:       #5a564f;
    --ruggine:    #9e4e29;
    --ruggine-piena: #b1572e;
    --allarme:    #a43e2f;
    --ottone:     #7a5b30;
    --riposo:     #486c57;
  }
}
:root[data-theme="light"] {
  --ghisa:      #f2eadc;
  --ghisa-2:    #fcf8f0;
  --ghisa-3:    #e6dbca;
  --linea:      #d6cbb8;
  --linea-viva: #bdb19f;
  --magnesite:  #24201c;
  --fumo:       #5a564f;
  --ruggine:    #9e4e29;
  --ruggine-piena: #b1572e;
  --allarme:    #a43e2f;
  --ottone:     #7a5b30;
  --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;
}