/* sistema.css — Domina Hair Wellness
   Misurato sulla comp approvata (bozze/comp/domina-hair-wellness-approvata-1440.png, 28/09/2026):
   caratteri da controlli/misure-comp.json, colori campionati sulla comp (parete, bottoni, cartoncini, inchiostri).
   Negli altri CSS dimensioni, raggi, ombre e famiglie solo come var(--…).
   Caratteri: Bespoke Serif, General Sans, Britney (Fontshare, ITF Free Font License), ridotti al latino, ospitati qui. */

@font-face { font-family: "Bespoke Serif"; src: url("media/font/bespoke-serif.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bespoke Serif"; src: url("media/font/bespoke-serif-corsivo.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("media/font/general-sans.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Britney"; src: url("media/font/britney.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  /* colore, per ruolo (campionato sulla comp) */
  --colore-parete: oklch(25.2% 0.007 88);            /* intonaco grafite liscio, #24221f */
  --colore-testata: oklch(18.1% 0.006 107);          /* grafite profondo della testata, #12120f */
  --colore-piede: oklch(21.5% 0.004 100);            /* piede */
  --colore-pannello: oklch(23.1% 0.010 89);          /* pannelli sotto le foto dei servizi */
  --colore-titolo: oklch(97.5% 0.022 88);            /* titoli e testo lungo, avorio caldo */
  --colore-titolo-sezione: oklch(93.9% 0.045 79);    /* titoli di sezione, champagne */
  --colore-testo: oklch(91.5% 0.016 84);             /* testo corrente e piede */
  --colore-oro-chiaro: oklch(87.5% 0.050 78);        /* prezzi, durate, note a mano, frase del salone */
  --colore-oro: oklch(67.1% 0.049 71);               /* filetti e contorni */
  --colore-luce: oklch(72.8% 0.097 67);              /* cornici di luce delle nicchie */
  --colore-bottone: oklch(81.2% 0.078 76);           /* bottone pieno, #dfbb88 */
  --colore-cartoncino: oklch(90.1% 0.017 76);        /* cartoncini delle recensioni */
  --colore-inchiostro: oklch(20% 0.010 70);          /* testo su bottone pieno e cartoncini */
  --colore-stelle: oklch(78.9% 0.105 81);
  --colore-filetto-testata: oklch(45.4% 0.023 91);   /* la riga sotto la testata */
  --colore-contorno: oklch(75.6% 0.029 78);          /* contorno del bottone a filo */
  --colore-filetto: oklch(60.5% 0.048 69);           /* filetti della lista dei servizi */
  --colore-fuoco: oklch(87.5% 0.050 78);             /* anello di :focus-visible */

  /* famiglie */
  --famiglia-titoli: "Bespoke Serif", "Iowan Old Style", Georgia, serif;
  --famiglia-testo: "General Sans", "Segoe UI", system-ui, sans-serif;
  --famiglia-mano: "Britney", "Segoe Script", cursive;

  /* pesi (a occhio sulla comp dove la misura aveva somiglianza bassa) */
  --peso-titoli: 300;
  --peso-sezione: 400;                                                 /* titoli di sezione: più pieni del titolo, come nella comp */
  --peso-mano: 300;
  --peso-testo: 400;
  --peso-etichetta: 500;

  /* gradini: dalla misura a 390 a quella della comp a 1440 (controlli/misure-comp.json, «corretta» dove c'è) */
  --testo-titolo: clamp(2.75rem, 1.933rem + 3.352vw, 4.95rem);         /* 44 → 79.2 px, titolo della prima schermata */
  --testo-sezione: clamp(2.125rem, 1.716rem + 1.676vw, 3.225rem);      /* 34 → 51.6 px, titoli di sezione */
  --testo-riquadro: clamp(1.75rem, 1.365rem + 1.581vw, 2.788rem);      /* 28 → 44.6 px, titolo del riquadro Prenota */
  --testo-numero: clamp(1.75rem, 1.643rem + 0.4381vw, 2.038rem);       /* 28 → 32.6 px, «35 anni», «4,6 su Google» */
  --testo-frase: clamp(1.375rem, 1.076rem + 1.229vw, 2.181rem);        /* 22 → 34.9 px, frase del salone (Britney 300) */
  --testo-voce: clamp(1.25rem, 1.169rem + 0.3333vw, 1.469rem);         /* 20 → 23.5 px, nomi dei servizi, didascalie dei lavori */
  --testo-corpo-grande: clamp(1.062rem, 0.8629rem + 0.819vw, 1.6rem);  /* 17 → 25.6 px, Chi siamo, orari, indirizzo, titoli del piede */
  --testo-corpo: clamp(1rem, 0.87rem + 0.5333vw, 1.35rem);             /* 16 → 21.6 px, prima schermata, listino, nota, recensioni */
  --testo-piccolo: clamp(1rem, 0.9489rem + 0.2095vw, 1.137rem);        /* 16 → 18.2 px, menù, sottotitoli, durate, voci del piede, filtri, schede */
  --testo-minimo: 1rem;                                                /* 16 px fisso, didascalie delle icone: il pavimento del corpo */
  --testo-etichetta: clamp(1rem, 0.9164rem + 0.3429vw, 1.225rem);      /* 16 → 19.6 px, menù, bottoni, occhiello, lista, prezzi, copyright */
  --testo-bottone-grande: clamp(1.25rem, 0.8693rem + 1.562vw, 2.275rem); /* 20 → 36.4 px, telefono nel riquadro Prenota */
  --testo-bottone-medio: clamp(1.125rem, 0.865rem + 1.067vw, 1.825rem);/* 18 → 29.2 px, Treatwell e WhatsApp nel riquadro Prenota */
  --testo-mano: clamp(2rem, 1.796rem + 0.8381vw, 2.55rem);             /* 32 → 40.8 px, note a mano (Britney 300) */
  --testo-mano-grande: clamp(2.75rem, 2.381rem + 1.514vw, 3.744rem);   /* 44 → 59.9 px, «Dal 1990» (Britney 300) */

  --interlinea-titoli: 1.04;
  --interlinea-testo: 1.55;                                            /* passo delle righe di Chi siamo sulla comp: 40 px su 25,8 */
  --spaziatura-titoli: -0.004em;
  --spaziatura-maiuscole: 0.03em;
  --spaziatura-testo: 0;                                               /* le misure dalla larghezza sono a spaziatura zero */

  /* 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 */
  --margine-pagina: clamp(1rem, 0.0714rem + 3.81vw, 3.5rem);            /* 16 → 56 px, il margine della comp */
  --larghezza-pagina: 90rem;                                           /* 1440 */
  --altezza-testata: clamp(4rem, 3.118rem + 3.619vw, 6.375rem);        /* 64 → 102 px, la testata della comp */
  --altezza-bottone: 2.875rem;                                         /* 46 px, i bottoni della prima schermata */
  --altezza-tocco: 3rem;                                               /* 48 px, zone da toccare al telefono */

  /* raggi, linee, luci */
  --raggio-bottone: 4px;
  --raggio-cartoncino: 10px;
  --linea: 1px;
  --linea-cornice: 3px;
  --luce-cornice: 0 0 0.5rem 0.0625rem oklch(72.8% 0.097 67 / 0.9), 0 0 2.25rem 0.5rem oklch(72.8% 0.097 67 / 0.35);
  --luce-mensola: 0 1.25rem 2.5rem -0.5rem oklch(80% 0.09 75 / 0.55);
  --luce-cartoncino: 0 0 1.5rem 0.25rem oklch(85% 0.06 80 / 0.25);

  /* movimento */
  --durata-accensione: 900ms;
  --durata-insegna: 1400ms;                                            /* l'insegna che si accende: una scena, 1-1,5 s */
  --curva-accensione: cubic-bezier(0.22, 0.61, 0.36, 1);
}