/* sistema.css — Massimo Ceragioli Coiffure, Via Fillungo
   Misurato sulla comp approvata (bozze/comp/massimo-ceragioli-approvata-1440.png, 29/09/2026):
   caratteri da controlli/misure-comp.json, colori campionati sulla comp (controlli/colori-comp.json),
   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: Junicode (SIL Open Font License 1.1) e Switzer (ITF Free Font License), ridotti al latino, ospitati qui. */

@font-face { font-family: "Junicode"; src: url("media/font/junicode.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Junicode"; src: url("media/font/junicode-corsivo.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Junicode"; src: url("media/font/junicode-grassetto.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("media/font/switzer.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* colore, per ruolo (campionato sulla comp: controlli/colori-comp.json) */
  --colore-piano: oklch(92.0% 0.016 68);                     /* la parete e il piano lucido tra le sezioni */
  --colore-piano-chiaro: oklch(88.8% 0.019 68);       /* il piano sotto la prima schermata */
  --colore-parete: rgb(240 231 221);                   /* prima schermata sopra l'orizzonte (comp pulita, x 20, y 250-620) */
  --colore-pavimento: rgb(230 221 211);                /* prima schermata sotto l'orizzonte (comp pulita, y 700-1000) */
  --colore-inchiostro: oklch(14.2% 0.018 85);           /* testo corrente */
  --colore-oro: oklch(57.3% 0.084 78);                  /* titoli di sezione, nomi dei lavori, linea delle linguette */
  --colore-oro-scuro: oklch(48.8% 0.077 78);      /* titoli d'oro su carta chiara, quando serve più contrasto */
  --colore-cornice: oklch(54.2% 0.107 78);             /* le cornici d'oro delle stampe */
  --colore-blu: oklch(16.2% 0.033 244);                 /* bottone pieno, l'insegna di Via Fillungo */
  --colore-su-blu: oklch(98% 0.005 85);              /* testo sul bottone blu */
  --colore-carta: oklch(92.7% 0.015 64);                     /* riquadri del collage, schede delle recensioni */
  --colore-scheda: oklch(95.1% 0.008 74);                   /* la scheda a linguette */
  --colore-stelle: oklch(65.6% 0.115 80);
  --colore-filetto: oklch(58.1% 0.070 79);         /* il filetto sotto la testata e sotto i titoli */
  --colore-fuoco: var(--colore-blu);                 /* anello di :focus-visible */

  /* famiglie */
  --famiglia-titoli: "Junicode", "Iowan Old Style", Georgia, serif;
  --famiglia-testo: "Junicode", "Iowan Old Style", Georgia, serif;   /* nella comp il testo lungo è serif */
  --famiglia-etichette: "Switzer", "Segoe UI", system-ui, sans-serif; /* testata, recensioni, riquadri, piede */

  /* pesi (Junicode ha 400 e 700: i titoli d'oro della comp a vista sono 400 con molta spaziatura) */
  --peso-titoli: 400;
  --peso-bottone: 700;
  --peso-testo: 400;
  --peso-etichette: 300;
  --peso-riquadro: 500;

  /* gradini: dalla misura a 390 a quella della comp a 1440 (controlli/misure-comp.json) */
  --testo-voto-grande: clamp(3rem, 2.2943rem + 2.8952vw, 4.9rem);         /* 48 → 78.4 px, «4,7» delle recensioni */
  --testo-sezione: clamp(1.875rem, 1.3945rem + 1.9714vw, 3.1688rem);         /* 30 → 50.7 px, titoli di sezione, aloe, chiusura */
  --testo-sezione-lunga: clamp(1.5rem, 1.0148rem + 1.9905vw, 2.8062rem);    /* 24 → 44.9 px, «Un salone di famiglia in Via Fillungo» su una riga */
  --testo-tessera: clamp(1.5rem, 1.0473rem + 1.8571vw, 2.7188rem);         /* 24 → 43.5 px, Taglio, Colore, Trattamenti */
  --testo-scheda: clamp(1.75rem, 1.425rem + 1.3333vw, 2.625rem);         /* 28 → 42 px, il servizio nella scheda (maiuscoletto) */
  --testo-voto: clamp(2rem, 1.7679rem + 0.9524vw, 2.625rem);             /* 32 → 42 px, «4,7» della prima schermata */
  --testo-bottone-grande: clamp(1.25rem, 1.0086rem + 0.9905vw, 1.9rem);  /* 20 → 30.4 px, «Chiama» della chiusura */
  --testo-corpo-grande: clamp(1.0625rem, 0.8466rem + 0.8857vw, 1.6438rem); /* 17 → 26.3 px, aloe, frase della famiglia */
  --testo-riquadro: clamp(1.125rem, 0.9695rem + 0.6381vw, 1.5437rem);     /* 18 → 24.7 px, titoli dei riquadri del collage */
  --testo-bottone: clamp(1.125rem, 0.995rem + 0.5333vw, 1.475rem);      /* 18 → 23.6 px, bottoni della prima schermata e della scheda */
  --testo-nome: clamp(1rem, 0.8329rem + 0.6857vw, 1.45rem);             /* 16 → 23.2 px, nomi dei lavori sotto la striscia */
  --testo-corpo: clamp(1rem, 0.8561rem + 0.5905vw, 1.3875rem);          /* 16 → 22.2 px, frase della scheda, «92 recensioni», link */
  --testo-voce: clamp(1rem, 0.8886rem + 0.4571vw, 1.3rem);              /* 16 → 20.8 px, linguette, testo delle recensioni */
  --testo-piccolo: clamp(1rem, 0.9327rem + 0.2762vw, 1.1812rem);         /* 16 → 18.9 px, piede, firme, riquadri (la comp aveva 14 px: sotto il pavimento) */
  --testo-etichetta: clamp(0.8125rem, 0.7498rem + 0.2571vw, 0.9812rem);  /* 13 → 15.7 px, la testata in maiuscolo */

  --interlinea-titoli: 1.3;                                            /* passo delle righe dei titoli d'oro sulla comp: 66 px su 50,7 */
  --interlinea-testo: 1.55;                                            /* passo delle righe dell'aloe: 40 px su 26,3 */
  --spaziatura-sezione: 0.156em;
  --spaziatura-tessera: 0.06em;
  --spaziatura-scheda: 0.12em;
  --spaziatura-nome: 0.19em;
  --spaziatura-etichetta: 0.1em;
  --spaziatura-bottone-grande: 0.18em;

  /* 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 */
  --spazio-8: 8rem;     /* 128 */
  --spazio-sezioni: clamp(4rem, 0.8429rem + 12.9524vw, 12.5rem);          /* 64 → 200 px: lo spazio uguale tra le sezioni della comp (monta-mista.py) */
  --margine-pagina: clamp(1rem, 0.2107rem + 3.2381vw, 3.125rem);       /* 16 → 50 px */
  --larghezza-pagina: 90rem;                                           /* 1440 */
  --altezza-testata: clamp(3.5rem, 3.2214rem + 1.1429vw, 4.25rem);      /* 56 → 68 px, fino al filetto della comp */
  --altezza-bottone: 2.875rem;                                         /* 46 px, i bottoni della prima schermata */
  --altezza-tocco: 3rem;                                               /* 48 px */

  /* raggi, linee, ombre */
  --raggio-scheda: 12px;                                               /* la scheda a linguette */
  --raggio-nessuno: 0px;                                               /* stampe, riquadri, bottoni: spigoli vivi come nella comp */
  --linea: 1px;
  --linea-cornice: 4px;
  --ombra-stampa: 0 1.125rem 1.875rem -1.125rem oklch(30% 0.03 70 / 0.45); /* le stampe in piedi sul piano */
  --ombra-scheda: 0 0.75rem 2rem -0.75rem oklch(30% 0.03 70 / 0.35);

  /* 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-etichetta: 15.7;        /* la testata */
  --comp-bottone: 23.2;          /* bottoni della prima schermata (Junicode 400; inchiostro misurato sulla comp: «Scopri i servizi» 137 × 22 px) */
  --comp-voto: 42;               /* «4,7» della prima schermata */
  --comp-nota-voto: 22.4;        /* «92 recensioni su Google» della prima schermata */
  --comp-sezione: 50.7;          /* titoli di sezione d'oro, passo 66 */
  --comp-nome: 25;               /* nomi dei lavori sotto la striscia (inchiostro della comp: maiuscole alte 17 px), passo 30 */
  --comp-linguetta: 20.8;        /* linguette della scheda dei servizi, passo 44 */
  --comp-scheda: 42;             /* il servizio scelto, in maiuscoletto, passo 60 */
  --comp-frase: 22.2;            /* la frase del salone, corsivo, passo 35 */
  --comp-nota: 19.6;             /* «Per un appuntamento o un consiglio, chiamaci.», passo 30 */
  --comp-bottone-scheda: 21;     /* «Chiama» sul bottone blu della scheda */
  --comp-aloe: 25;               /* il testo dell'aloe, corsivo, passo 40 (inchiostro della comp: righe alte 26 px) */
  --comp-nota-aloe: 29;          /* «Aloe a km 0» */
  --comp-sezione-lunga: 44.9;    /* «Un salone di famiglia in Via Fillungo» su una riga */
  --comp-famiglia: 24.5;         /* le due righe della famiglia, passo 35 */
  --comp-famiglia-corsivo: 26.5; /* il corsivo della famiglia, passo 38 (nella comp è più largo del dritto) */
  --comp-tessera: 34;            /* Taglio, Colore, Trattamenti sulle tessere */
  --comp-riquadro: 24.7;         /* titoli dei riquadri del collage, passo 31 */
  --comp-riquadro-testo: 14.5;   /* righe dei riquadri (Switzer), passo 21: come nella comp, al computer */
  --comp-dove: 17;               /* indirizzo e link di «Dove siamo» */
  --comp-voto-grande: 84;        /* «4,7» delle recensioni (inchiostro della comp: 107 × 72 px) */
  --comp-nota-recensioni: 24.5;  /* «92 recensioni su Google» delle recensioni (Switzer) */
  --comp-recensione: 20.8;       /* il testo sulle targhe (Switzer), passo 32 */
  --comp-firma: 19;              /* il nome sotto la recensione */
  --comp-bottone-chiusura: 27.5;  /* «CHIAMA 0583 080710» della chiusura, spaziato */
  --comp-link: 22.5;             /* i link della chiusura (Switzer), passo 51 */
  --comp-piede: 17.9;            /* indirizzo e telefono del piè di pagina */

  /* movimento, dai provini scelti da Kim (29/09/2026) */
  --moto-risposta: 180ms;                                              /* bottoni, frecce, frase della scheda */
  --moto-stato: 240ms;                                                 /* la linea d'oro che scivola sotto la linguetta */
  --moto-entrata: 700ms;                                               /* tessere, collage, recensioni che entrano; la foto nuova del pannello */
  --moto-scena: 1800ms;                                                /* le porte della prima schermata che si chiudono a libro, frenando (Kim, 29/09) */
  --moto-passo: 4800ms;                                                /* ogni quanto cambia il gesto del pannello centrale */
  --moto-giro: 12000ms;                                                /* il giro lento delle tessere sull'asse (Kim: «meno gradi e piu lento e piu coordinato») */
  --curva-risposta: cubic-bezier(0.23, 1, 0.32, 1);                    /* produttivo: arriva subito */
  --curva-scena: cubic-bezier(0.16, 1, 0.3, 1);                        /* espressivo: le porte, le entrate */
  --curva-passo: cubic-bezier(0.77, 0, 0.175, 1);                      /* movimento sullo schermo */
  --curva-giro: cubic-bezier(0.37, 0, 0.63, 1);                        /* il giro avanti e indietro delle tessere */
}