/* Estetica Venere — il sistema (fase 3 del prompt v2.4), MISURATO sulla comp approvata (bozze/comp/mix-approvata-1440.png,
   il mix di Kim in tema chiaro, 25/09/2026). Dimensioni e colori dell'inchiostro da strumenti/misura-comp.js
   (controlli/misure-comp.json); i pesi dove la misura era debole (somiglianza sotto 0,5, fondi di marmo e carta da parati)
   sono corretti a occhio sulla comp e scritti in STATO.md. Colori dei fondi campionati sulla comp e sulle foto vere.
   Negli altri CSS dimensioni del testo, raggi, ombre e famiglie compaiono solo come var(--…). */

/* due file: Cabinet Grotesk variabile (100–900) e Boska corsivo variabile; ridotti al latino (Fontshare, ITF Free Font License) */
@font-face { font-family: "Cabinet Grotesk"; src: url("media/font/cabinet-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Boska"; src: url("media/font/boska-corsivo.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* caratteri di riserva con misure vicine, perché la pagina non salti mentre arrivano i veri */
@font-face { font-family: "Cabinet Riserva"; src: local("Arial"); size-adjust: 96%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Boska Riserva"; src: local("Georgia Italic"), local("Georgia"); size-adjust: 92%; ascent-override: 96%; descent-override: 30%; line-gap-override: 0%; }

:root {
  /* famiglie: scelte da Kim sul provino il 25/09/2026 («1 Cabinet + Boska») */
  --f-testo: "Cabinet Grotesk", "Cabinet Riserva", Arial, sans-serif;
  --f-corsivo: "Boska", "Boska Riserva", Georgia, serif;   /* solo corsivo vero: l'ultima riga del titolo e le citazioni */

  /* pesi (variabili): apertura 500 misurato (somiglianza 0,88); titoli di sezione pesanti come nella comp */
  --p-apertura: 500;
  --p-sezioni: 750;
  --p-testo: 450;
  --p-etichette: 500;
  --p-bottoni: 700;
  --p-corsivo: 500;

  /* scala fluida, 7 gradini: dalla misura a 390 (comp a 390, in tema scuro: stessa impaginazione) a quella della comp a 1440.
     Tra parentesi i testi della comp coperti e la loro misura a 1440 */
  --t-nota:    clamp(0.9375rem, 0.752rem + 0.762vw, 1.4375rem);  /* 15 → 23: la riga sotto il titolo (Kim 25/09: «più piccolo») */
  --t-piccolo: clamp(1rem, 0.7679rem + 0.9524vw, 1.625rem);     /* 16 → 26: menu, prova, «Guarda il video» (25 · 26,1 · 26,1) */
  --t-corpo:   clamp(1.0625rem, 0.8071rem + 1.0476vw, 1.75rem); /* 17 → 28: sottotitolo, righe dei servizi, testi (28,2 · 27,9 · 26,7) */
  --t-rilievo: clamp(1.1875rem, 0.7464rem + 1.8095vw, 2.375rem);/* 19 → 38: bottoni, voto, «Aperto ora», citazioni, firme (34,8 · 36,8 · 42 · 40,2 · 39,6) */
  --t-medio:   clamp(1.1875rem, 0.8625rem + 1.3333vw, 2.0625rem); /* 19 → 33: le recensioni e «Aperto ora» della chiusura, come nella comp (Kim 25/09: «le recensioni è diversa») */
  --t-titoletto: clamp(1.75rem, 1.2857rem + 1.9048vw, 3rem);   /* 28 → 48 */
  --t-titolo-medio: clamp(2.125rem, 1.475rem + 2.6667vw, 3.875rem); /* 34 → 62: «Il giorno del sì» (Kim 25/09: «più grande») e «Chiamaci per prenotare.», su una riga come nella comp */
  --t-nome:    clamp(1.625rem, 0.975rem + 2.6667vw, 3.375rem);  /* 26 → 54: nomi dei servizi (53,5) */
  --t-titolo:  clamp(2.375rem, 1.4929rem + 3.619vw, 4.75rem);   /* 38 → 76: titolo di apertura, «Il giorno del sì», «Chiamaci» (76,7 · 70,1 · 71,3) */
  --t-grande:  clamp(2.625rem, 1.4179rem + 4.9524vw, 5.875rem); /* 42 → 94: «di te.» in corsivo, «Il centro di Piera» (92,2 · 92,6) */
  --t-enorme:  clamp(2.875rem, 1.25rem + 6.6667vw, 7.25rem);    /* 46 → 116: «Quello che facciamo», «Le ragazze» (117,4 · 110,3) */
  --t-apertura: var(--t-titolo);           /* il titolo di Kim è più lungo di quello della comp: sul computer si stringe per stare su tre righe */
  --t-apertura-corsivo: var(--t-grande);

  /* interlinee e spaziatura delle lettere, misurate sulla comp */
  --l-titoli: 1.05;            /* passo delle righe del titolo di apertura: 81 px su 76,7 */
  --l-testo: 1.35;             /* la comp stringe a 1,2; un filo di più per leggere sul marmo */
  --k-titoli: -0.015em;        /* titoli della comp: da −0,008 a −0,03 em */
  --k-testo: -0.005em;

  /* 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; margini della comp: 55–65 px a 1440 */
  --colonne: 4;
  --margine: clamp(1.25rem, 0.5rem + 3.1vw, 3.75rem);
  --fessura: clamp(1rem, 0.6rem + 1.2vw, 2rem);
  --misura: 38rem;             /* testo lungo: circa 45 caratteri per riga col corpo della comp (28 px a 1440), sotto gli 80 */
  --testata: 4.5rem;

  /* raggi: due, con un compito ciascuno */
  --r-pillola: 62.5rem;        /* menu, bottoni, bottoni tondi di vetro */
  --r-morbido: 1.5rem;         /* foto appoggiate (diploma, squadra), pannelli di vetro */
  --r-lastra: 4.5rem;          /* l'angolo tondo della lastra di marmo sopra le stecche (comp) */

  /* ombre: due, misurate sulla comp */
  --o-foglio: 0 0.125rem 0.25rem oklch(30% 0.03 45 / 0.10), 0 1.25rem 2.5rem -0.75rem oklch(30% 0.03 45 / 0.28);  /* diploma, stecche e petali: ombra lunga e morbida, come nella comp */
  --o-etichetta: inset 0 0 0 3px oklch(38% 0.02 50 / 0.28), inset 0 0.35rem 0.7rem oklch(99% 0.004 67.7 / 0.14), 0 0.4rem 0.9rem oklch(25% 0.03 45 / 0.35);  /* la piastrina del ventaglio: smusso e ombra (comp) */
  --o-neon-bottone: inset 0 0 0 2px oklch(84% 0.09 355 / 0.9), inset 0 0 0.9rem oklch(92% 0.05 355 / 0.45), 0 0 0.3rem oklch(71% 0.17 358 / 0.95), 0 0 1.4rem oklch(68% 0.19 358 / 0.75), 0 0 3.2rem oklch(68% 0.19 358 / 0.4);  /* il bottone «Chiama» acceso come un neon (comp; Kim 25/09) */
  --o-neon: 0 0 0.25rem oklch(71.3% 0.159 10.9 / 0.9), 0 0 1.5rem oklch(71.3% 0.159 10.9 / 0.55);                    /* il bagliore del neon: solo bottone della chiamata, «aperto ora», numero */

  /* colore per ruoli (Kim, 25/09/2026: «tema chiaro lusso con dettagli rosa e sfondi e tema bianco begie», «riprendendo le tinte del locale») */
  --c-marmo: oklch(91.7% 0.014 67.7);          /* #EAE2DA il marmo della reception, fondo della prima schermata e dei trattamenti (comp) */
  --c-marmo-chiaro: oklch(94.9% 0.009 67.7);   /* #F2EDE8 vetro chiaro, fondi dietro il testo sulla carta */
  --c-carta: oklch(90.1% 0.012 67.7);          /* #E4DDD6 base sotto la carta da parati a esagoni (comp #D8D0C8 con le linee) */
  --c-linea: oklch(76.4% 0.016 70.8);          /* #B9B1A8 linee degli esagoni, bordi del vetro */
  --c-testo: oklch(23.6% 0.030 47.4);          /* #2A1A12 bruno caldo, mai nero: 13,1:1 sul marmo (comp #23130A) */
  --c-testo-2: oklch(42.3% 0.027 53.8);        /* #5A4A40 testo secondario: 6,6:1 sul marmo */
  --c-rosa: oklch(51.8% 0.119 5.8);            /* #9F475E il corsivo del titolo e i link: 4,6:1 sul marmo (comp #9F475E) */
  --c-rosa-scuro: oklch(45.7% 0.107 10.4);     /* #883A49 «Il centro di Piera»: 5,7:1 sulla carta (comp #883A49) */
  --c-azione: oklch(60.9% 0.186 1.1);          /* #D6457C bottone della chiamata: bianco 4,2:1, testo ≥ 19 px in grassetto (comp #E85282, 3,6:1) */
  --c-azione-scura: oklch(53.3% 0.173 5);      /* #B8325F bottone al passaggio e premuto */
  --c-neon: oklch(71.3% 0.159 10.9);           /* #F4738A il tubo del neon (insegna vera, maps-004) */
  --c-bianco: oklch(99% 0.004 67.7);           /* testo sul rosa, abiti */
  --c-blush: oklch(78.4% 0.086 23.6);          /* #EBA39E punte rosa chiaro */
  --c-punta-rosa: oklch(64.9% 0.151 11.4);     /* #DA6277 punte rosa */
  --c-oliva: oklch(42.6% 0.08 113.1);          /* #4F5318 velluto della poltroncina verde: solo una punta */
  --c-ruggine: oklch(50.1% 0.128 43.8);        /* #9D461B velluto arancio: solo una punta */
  --c-lampone: oklch(39.8% 0.12 11.6);         /* #7A2336 velluto rosso: solo una punta (comp #782C38) */
  --c-fuoco: oklch(51.8% 0.119 5.8);           /* anello del fuoco: il rosa del sito, 4,6:1 sul marmo */

  /* movimento */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tempo: 220ms;
  --grana: 0.05;

  color-scheme: light;
}

@media (min-width: 48rem) { :root { --colonne: 12; --testata: 5.5rem; } }
@media (min-width: 64rem) { :root { --t-apertura: min(var(--t-titolo), 4.6vw); --t-apertura-corsivo: min(var(--t-grande), 5.6vw); } }

/* la grana unica (strumenti/materiali/grana.css): uguale su foto e fondi, sotto 1 KB, mai animata */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
  opacity: var(--grana); mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

::selection { background: var(--c-blush); color: var(--c-testo); }
html { scrollbar-color: var(--c-punta-rosa) var(--c-marmo); }