/* sistema.css — Lumen, atelier del colore (salone inventato, Milano Isola)
   Misurato sulla comp approvata (bozze/comp/lumen-approvata-1440.png, 05/10/2026): caratteri da controlli/misure-comp.json
   (strumenti/misura-comp.js), colori campionati sulla comp, movimento dai provini scelti da Kim (bozze/movimento/,
   bozze/scelta-di-kim.md § Movimento). Negli altri CSS dimensioni, raggi, ombre, famiglie, durate e curve solo come var(--…).
   Caratteri: Familjen Grotesk (SIL Open Font License 1.1) e Pencerio (ITF Free Font License), ridotti al latino, ospitati qui.
   Scritto da strumenti/scrivi-sistema.py. */

@font-face { font-family: "Familjen Grotesk"; src: url("media/font/familjen-grotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Pencerio"; src: url("media/font/pencerio.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* colore, per ruolo (campionato sulla comp; contrasti WCAG misurati il 05/10/2026) */
  --colore-calce: oklch(96.7% 0.005 95);             /* titoli e testo sull'ardesia (9,7:1), bottone chiaro */
  --colore-pesca: oklch(84.4% 0.064 61);             /* la riga a mano (6,5:1 sull'ardesia) */
  --colore-prezzo: oklch(81.8% 0.061 64);            /* prezzi del listino (6,0:1) */
  --colore-ardesia: oklch(36.4% 0.010 122);          /* il fondo delle schede */
  --colore-ardesia-profonda: oklch(29.9% 0.011 107); /* la scheda del listino, le zone più scure */
  --colore-inchiostro: oklch(23.5% 0.004 85);        /* bottone pieno; testo sulle pillole chiare (13,9:1) */
  --colore-pillola: oklch(93.7% 0.007 89);           /* menù, linguetta scelta, bottoni chiari */
  --colore-filetto: oklch(76.7% 0.052 70);           /* righe del listino */
  --colore-carta: oklch(95.8% 0.007 89);             /* le schede delle recensioni */
  --colore-testo-carta: oklch(25.1% 0.006 107);      /* testo sulle recensioni (14,1:1) */
  --colore-nota-carta: oklch(48.0% 0.012 82);        /* «2 mesi fa» (5,8:1) */
  --colore-avatar: oklch(76.2% 0.073 52);            /* il tondo con l'iniziale: l'iniziale in inchiostro (7,7:1), bianca come nella comp era 2,0:1 */
  --colore-avanzamento: oklch(82.6% 0.085 55);       /* la barra dei lavori */
  --colore-velo: oklch(20% 0.004 85 / 0.62);         /* etichetta sulla foto dei lavori, fondo dei tondi delle frecce */
  --colore-bordo: oklch(96.7% 0.005 95 / 0.45);      /* il filo chiaro intorno a schede e foto */
  --colore-salone: oklch(38.7% 0.022 78);            /* il salone sfocato ai lati delle schede (mediana dei bordi della comp, #4b4337): fondo oltre i 1440 px */
  --colore-fuoco: var(--colore-pesca);               /* anello di :focus-visible */

  /* famiglie */
  --famiglia-testo: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --famiglia-mano: "Pencerio", "Segoe Script", cursive;
  --mano-tratto: 0.025em;   /* Pencerio esiste solo Hairline: il contorno dello stesso colore dà lo spessore della comp */

  /* pesi (misurati; a vista dove la misura non era affidabile) */
  --peso-titoli: 400;
  --peso-bottone: 500;
  --peso-testo: 400;
  --peso-voce: 500;
  --peso-tassello: 600;

  /* gradini: dalla misura a 390 a quella della comp a 1440 (controlli/misure-comp.json) */
  --testo-titolo: clamp(2.75rem, 1.7750rem + 4.0000vw, 5.375rem);      /* 44 → 86 px, titoli grandi: «Il colore,» 83,8 · «Il nostro lavoro,» 86,3 · «Listino» 89,9 */
  --testo-sezione: clamp(2.125rem, 1.3357rem + 3.2381vw, 4.25rem);      /* 34 → 68 px, titoli di sezione: «Prima del colore,» 65,4 · «Giulia, Anna e Teo.» 69,5 · «Le clienti», «Dove siamo» 72,5 · «120 ciocche» 58,1 */
  --testo-mano: clamp(2.125rem, 1.5679rem + 2.2857vw, 3.625rem);     /* 34 → 58 px, la riga a mano in Pencerio: 63,2 nella prima schermata, 48,6 nelle sezioni */
  --testo-voce: clamp(1.312rem, 1.0107rem + 1.2381vw, 2.125rem);     /* 21 → 34 px, voci e prezzi del listino 33,8-35,3, contatore dei lavori 30,7 */
  --testo-corpo-grande: clamp(1.062rem, 0.8536rem + 0.8571vw, 1.625rem);     /* 17 → 26 px, testo corrente, note, linguette, didascalie, orari: 25,6-29,1 */
  --testo-corpo: clamp(1rem, 0.8839rem + 0.4762vw, 1.312rem);         /* 16 → 21 px, bottoni, menù, etichette delle tessere, recensioni, piede: 17,8-23,2 */
  --testo-piccolo: clamp(1rem, 0.9884rem + 0.0476vw, 1.031rem);         /* 16 → 16.5 px, pregi, cartellini, «trascina», data delle recensioni (comp 14,3: si tiene il pavimento di 16) */

  --interlinea-titoli: 0.95;      /* passo delle righe dei titoli sulla comp: 76 px su 83,8 */
  --interlinea-mano: 1.2;
  --interlinea-testo: 1.4;        /* «Ci sediamo davanti allo specchio…»: passo 34 px su 25,6 */
  --spaziatura-logo: 0.3em;
  --spaziatura-titoli: -0.01em;

  /* spazio, passo 8 px */
  --spazio-1: 0.5rem;   /* 8 */
  --spazio-2: 1rem;     /* 16 */
  --spazio-3: 1.5rem;   /* 24 */
  --spazio-4: 2rem;     /* 32 */
  --spazio-5: 3rem;     /* 48 */
  --spazio-6: 4rem;     /* 64 */
  --spazio-7: 6rem;     /* 96 */
  --margine-pagina: 1.125rem;     /* 18 px: la colonna delle schede va da 18 a 1422, anche sopra la prima schermata (Kim) */
  --larghezza-pagina: 90rem;      /* 1440 */
  --altezza-tocco: 3rem;          /* 48 px */

  /* raggi, linee, ombre */
  --raggio-scheda: 1.25rem;       /* schede d'ardesia, foto, recensioni (20 px sulla comp) */
  --raggio-pillola: 999px;        /* menù, bottoni, linguette, tondi delle frecce */
  --linea: 1.5px;
  --ombra-scheda: 0 1.875rem 3.125rem -1.875rem oklch(10% 0.01 85 / 0.7);       /* le schede che galleggiano sul salone sfocato */
  --ombra-cartellino: 0 0.375rem 0.875rem -0.375rem oklch(10% 0.01 85 / 0.6);  /* il cartellino grande delle ciocche */

  /* il palco: al computer ogni sezione è la sua fascia della comp, in px della comp (1440 di larghezza).
     --px è un px della comp nella larghezza della fascia (container query); le misure della comp sono numeri. */
  --px: calc(100cqw / 1440);
  --comp-logo: 22.7;    /* peso 400, spaziatura 0.3 em */
  --comp-menu: 19.1;    /* peso 500, spaziatura -0.043 em */
  --comp-titolo-apertura: 83.8;    /* peso 400, spaziatura 0.017 em */
  --comp-mano-apertura: 63.2;    /* peso 1, spaziatura 0 em */
  --comp-bottone-pieno: 17.8;    /* peso 500, spaziatura 0 em */
  --comp-bottone-chiaro: 19.5;    /* peso 500, spaziatura -0.046 em */
  --comp-pregio: 16.6;    /* peso 500, spaziatura 0 em */
  --comp-etichetta-tessera: 23.2;    /* peso 400, spaziatura -0.015 em */
  --comp-tassello: 21.4;    /* peso 600, spaziatura -0.01 em */
  --comp-titolo-sezione: 65.4;    /* peso 400, spaziatura -0.004 em */
  --comp-mano-sezione: 48.6;    /* peso 1, spaziatura 0 em */
  --comp-corpo: 25.6;    /* peso 400, spaziatura -0.022 em */
  --comp-bottone-sezione: 23;      /* peso 500, spaziatura -0.039 em */
  --comp-titolo-ciocche: 58.1;    /* peso 400, spaziatura 0.006 em */
  --comp-cartellino: 16.8;    /* peso 600, spaziatura 0 em */
  --comp-trascina: 15.7;    /* peso 400, spaziatura 0.152 em  (peso a vista: misura poco somigliante) */
  --comp-nota: 25.7;    /* peso 400, spaziatura 0.059 em  (peso a vista: misura poco somigliante) */
  --comp-titolo-lavori: 86.3;    /* peso 400, spaziatura -0.014 em */
  --comp-contatore: 30.7;    /* peso 400, spaziatura -0.018 em */
  --comp-etichetta-foto: 28.2;    /* peso 400, spaziatura -0.012 em */
  --comp-titolo-listino: 89.9;    /* peso 400, spaziatura -0.013 em */
  --comp-nota-listino: 29.1;    /* peso 500, spaziatura -0.026 em */
  --comp-linguetta: 26.5;    /* peso 500, spaziatura -0.029 em */
  --comp-voce: 33.8;    /* peso 500, spaziatura -0.034 em */
  --comp-durata: 23.3;    /* peso 500, spaziatura 0 em */
  --comp-prezzo: 35.3;    /* peso 400, spaziatura -0.03 em */
  --comp-titolo-persone: 69.5;    /* peso 500, spaziatura -0.016 em */
  --comp-didascalia: 26.7;    /* peso 400, spaziatura -0.037 em  (peso a vista: misura poco somigliante) */
  --comp-titolo-clienti: 72.5;    /* peso 400, spaziatura 0.004 em */
  --comp-nome-recensione: 21.2;    /* peso 500, spaziatura 0.012 em */
  --comp-tempo-recensione: 14.3;    /* peso 500, spaziatura 0.01 em */
  --comp-testo-recensione: 20.3;    /* peso 400, spaziatura 0.016 em */
  --comp-titolo-dove: 72.5;    /* peso 400, spaziatura -0.015 em */
  --comp-info: 26.8;    /* peso 400, spaziatura -0.036 em */
  --comp-menu-piede: 22.1;    /* peso 500, spaziatura 0.006 em */
  --comp-nota-piede: 19.8;    /* peso 400, spaziatura -0.021 em */

  /* movimento, dai provini scelti da Kim (05/10/2026: «per me va bene»; prima schermata senza luce, listino con «Taglio») */
  --moto-risposta: 180ms;         /* bottoni, frecce, tondi */
  --moto-stato: 240ms;            /* la linguetta che scivola, il riquadro sulla miniatura, la cifra del contatore, le didascalie */
  --moto-entrata: 700ms;          /* la foto del listino, i ritratti, l'aggancio della barra delle ciocche */
  --moto-scopri: 900ms;           /* la foto dei lavori che si scopre dal lato da cui arriva */
  --moto-scena: 1100ms;           /* la riga a mano che si scrive */
  --moto-cerchio: 1400ms;         /* il cerchio che si disegna intorno alla ciocca */
  --moto-passo: 40ms;             /* lo scarto tra una riga del listino e l'altra */
  --moto-passo-ritratti: 60ms;    /* lo scarto tra una cornice e l'altra delle persone */
  --moto-attesa: 150ms;           /* la riga a mano comincia a scriversi dopo il primo disegno della pagina */
  --moto-attesa-cerchio: 450ms;   /* il cerchio parte quando la riga a mano è a metà */
  --curva-risposta: cubic-bezier(0.23, 1, 0.32, 1);    /* produttivo: arriva subito */
  --curva-scena: cubic-bezier(0.16, 1, 0.3, 1);        /* espressivo: lungo e morbido */
  --curva-passo: cubic-bezier(0.77, 0, 0.175, 1);      /* spostamento sullo schermo */
}