/* BisB — il sistema (fase 3 del prompt), MISURATO sulla comp approvata il 23/09/2026 (fase 3 rifatta).
   Dimensioni, pesi, spaziature e colori vengono da strumenti/misura-comp.js (controlli/misure-comp.json);
   la ricetta delle foto da strumenti/misura-foto-comp.js (controlli/foto-comp.json).
   Dove la comp scende sotto il contrasto AA si prende il valore più vicino che lo rispetta.
   Negli altri CSS dimensioni del testo, raggi, ombre e famiglie compaiono solo come var(--…). */

/* quattro file: i pesi che la comp usa davvero (serif 500 e il suo corsivo, sans 500 e 700) */
@font-face { font-family: "Gambetta"; src: url("media/font/gambetta-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gambetta"; src: url("media/font/gambetta-medium-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("media/font/satoshi-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("media/font/satoshi-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* caratteri di riserva con le stesse misure, perché la pagina non salti mentre arrivano i veri */
@font-face { font-family: "Gambetta Riserva"; src: local("Georgia"); size-adjust: 97%; ascent-override: 93%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Satoshi Riserva"; src: local("Arial"); size-adjust: 101%; ascent-override: 100%; descent-override: 24%; line-gap-override: 0%; }

:root {
  /* famiglie: scelte da Kim sul provino (Fontshare, ITF Free Font License) */
  --f-titoli: "Gambetta", "Gambetta Riserva", Georgia, serif;
  --f-testo: "Satoshi", "Satoshi Riserva", Arial, sans-serif;

  /* pesi misurati sulla comp: serif 500 ovunque, sans 500 per il testo e 700 per etichette e bottoni */
  --p-titoli: 500;
  --p-testo: 500;
  --p-etichette: 700;

  /* scala fluida: a 1440 px i valori misurati sulla comp, a 390 px la scala di Utopia (1,2, corpo 16).
     Tra parentesi i testi della comp che il gradino copre e la loro misura a 1440 */
  --t-piccolo: clamp(0.8333rem, 0.7946rem + 0.1587vw, 0.875rem);   /* 13,3 → 14: occhielli, bottoni, voto, etichette della fascia (14,7 · 15,9 · 15,3) */
  --t-base:    clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem);          /* 16 → 17: sottotitolo, menu (17,1 · 17,1) */
  --t-medio:   clamp(1.125rem, 1.067rem + 0.2381vw, 1.2813rem);       /* 18 → 20,5: prezzi e durate delle tessere, voci CBC (20,6 · 20,4) */
  --t-alto:    clamp(1.25rem, 1.1571rem + 0.381vw, 1.5rem);           /* 20 → 24: nomi dei servizi (24) */
  --t-grande:  clamp(1.728rem, 1.5341rem + 0.7954vw, 2.25rem);        /* 27,6 → 36: numeri della fascia, titolo e prezzi CBC (35,8 · 38,2 · 32) */
  --t-titolo:  clamp(2.0736rem, 1.6831rem + 1.6021vw, 3.125rem);      /* 33,2 → 50: titoli di sezione (50,2) */
  --t-enorme:  clamp(2.4883rem, 1.7759rem + 2.9226vw, 4.4063rem);     /* 39,8 → 70,5: il titolo della prima schermata (70,5) */

  /* interlinee e spaziatura delle lettere, misurate */
  --l-titoli: 1.07;            /* titolo della comp: passo delle righe 1,07 */
  --l-testo: 1.35;             /* sottotitolo della comp: 1,30; un filo di più per i paragrafi lunghi */
  --k-maiuscole: 0.05em;       /* occhielli e menu della comp: 0,03–0,06 em */
  --k-titoli: -0.01em;         /* titoli della comp: da 0 a −0,03 em */

  /* spazi su un passo di 8 px */
  --s1: 0.5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;  --s7: 6rem;
  --s-sezione: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* griglia: 12 colonne sul computer, 4 sul telefono */
  --colonne: 4;
  --margine: clamp(1rem, 0.2rem + 3.6vw, 5.5rem);
  --fessura: clamp(1rem, 0.6rem + 1.2vw, 2rem);
  --misura: 36rem;             /* misura di riga del testo lungo, sotto gli 80 caratteri */
  --testata: 4.5rem;           /* altezza della testata: 4,5 rem sul telefono, 5,5 sul computer */

  /* raggi: due, con un compito ciascuno */
  --r-piccolo: 2px;            /* bottoni, tessere, pannelli */
  --r-tondo: 50%;              /* medaglioni, volti, bottone del video */

  /* ombre: due */
  --ombra-cornice: 0.125rem 0.3125rem 0.625rem 0 oklch(17% 0.03 60 / 0.62), 0 0.0625rem 0.125rem oklch(17% 0.03 60 / 0.4);  /* le cornici appese: ombra stretta e scura sotto, come nella comp (misurata: metà scurimento a 1 px, sparisce a 17 px) */
  --ombra-tessera: 0 1px 0 oklch(20% 0.03 60 / 0.08), 0 0.75rem 1.5rem -1rem oklch(20% 0.03 60 / 0.25);                   /* tessere e pannelli sulla carta */

  /* colore per ruoli, campionato sulla comp (tra parentesi il valore della comp quando è stato scurito per il contrasto) */
  --c-parete: oklch(76.9% 0.038 114.1);        /* #B3B79C la parete verde salvia */
  --c-parete-scura: oklch(68% 0.04 114);       /* la parete in ombra, per i bordi */
  --c-carta: oklch(95.1% 0.010 72.7);          /* #F3EEE8 fondo delle sezioni chiare, uguale alla comp */
  --c-chiaro: oklch(97.7% 0.010 81.8);         /* #FBF7F0 testo su scuro e su ottone */
  --c-inchiostro: oklch(24.8% 0.034 78.4);     /* #2A1F0D titoli: 7,8:1 sulla parete */
  --c-testo-parete: oklch(38.8% 0.033 91);     /* #4B4430 sottotitolo, menu, occhiello, voto sulla parete: 4,7:1 (comp #5B533A, 3,7:1) */
  --c-grigio: oklch(45.3% 0.017 74.2);         /* #5C554C testo secondario sulla carta, 6,4:1 (comp #59564C) */
  --c-mogano: oklch(21.2% 0.033 60.7);         /* #241508 la fascia dei numeri, uguale alla comp */
  --c-ottone: oklch(55.1% 0.101 55.2);         /* #A06336 bottoni di prenotazione: testo chiaro 4,5:1 (comp #A36537, 4,4:1) */
  --c-ottone-scuro: oklch(47% 0.1 54);         /* azione al passaggio */
  --c-ottone-testo: oklch(48.4% 0.076 60.2);   /* #7E5430 la parola in corsivo, solo in grande: 3,2:1 (comp #9B673D, 2,3:1) */
  --c-ottone-link: oklch(51.1% 0.087 61.3);    /* #8A5A2E link e corsivo sulla carta, 5,1:1 */
  --c-ottone-icona: oklch(58% 0.097 55.7);     /* #A66A3E icone sul mogano, 4,0:1 (comp) */
  --c-crema: oklch(67.2% 0.03 80);            /* #A69882 numeri sul mogano: opachi come nella comp (misurati sulla comp, 6,3:1) */
  --c-crema-scura: oklch(59.8% 0.026 75);     /* #8D8070 etichette sul mogano: la comp è #837566 (3,96:1), portato al minimo AA 4,6:1 */
  --c-velluto: oklch(47% 0.142 36);            /* #9A3417 le stelle, rosso ruggine come nella comp */
  --c-filo: oklch(24.8% 0.034 78.4 / 0.18);    /* filetti e bordi sottili */
  --c-filo-chiaro: oklch(24.8% 0.034 78.4 / 0.11); /* il bordo delle tessere e del pannello CBC: nella comp #E5E0DA sulla carta */
  --c-medaglione: oklch(29.2% 0.022 84.4);     /* #312B1F i medaglioni del listino, campionati sulla comp */
  --c-mogano-scuro: oklch(18.1% 0.026 61.2);   /* #1A0F06 il piè di pagina, sotto la chiusura mogano */

  /* larghezza del contenuto dopo la prima schermata: 1300 px come nella comp (70 px di margine a 1440) */
  --pagina: 81.25rem;

  /* movimento (wiki: movimento-e-animazioni) */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);   /* la curva di Qissa */
  --tempo: 220ms;                               /* micro-interazioni: 150-250 ms */
}

@media (min-width: 60em) {
  :root { --colonne: 12; --testata: 5.5rem; }
}