/* Token condivisi dai mockup A e B. Proposta: dopo la scelta diventano DESIGN.md.
   Revisione 04/10/2026 «Apple»: valori misurati su apple.com (tipografia, grigi, raggi). Il font è
   quello di sistema: su Mac e iPhone è SF Pro, che Apple non concede in licenza per il web; così lo
   si usa senza ospitarlo. Niente più Google Fonts: zero peso di font scaricati. */

:root {
  color-scheme: light;

  /* colore — Restrained: bianco vero, inchiostro, un solo rosso */
  --white: oklch(1 0 0);
  --mist: #f5f5f7;                      /* superfici e card (Apple) */
  --ink: #1d1d1f;                       /* testo (Apple), 16.8:1 su bianco */
  --ink-2: #6e6e73;                     /* testo secondario, 5.1:1 */
  --ink-3: #86868b;                     /* solo testo ≥ 24px o grafica, 3.5:1 */
  --hair: #d2d2d7;                      /* filetti */
  --red: oklch(0.53 0.2 25);            /* il filo di Formule: linea, quote, azioni */
  --red-press: oklch(0.45 0.18 25);
  /* i colori di brand dei prodotti, letti dai loro siti il 04/10/2026 */
  --formule-sky: #4c9ee6;                   /* formule.io, pulsante principale */
  --formule-night: #0e1c29;                 /* formule.io, pulsante demo (sfuma a #323d68) */
  --formule-night-2: #323d68;
  --carpetta-teal: oklch(0.46 0.082 196);   /* carpetta.app, marchio e pulsanti */
  --carpetta-cream: oklch(0.984 0.006 95);  /* carpetta.app, fondo */
  --cittadino-blue: #1582d1;                /* cittadino.io, hero (sfuma a #1065a2) */
  --cittadino-blue-2: #1065a2;
  --cittadino-yellow: #fbc02d;              /* cittadino.io, «in 30 secondi» e pulsante */
  --cittadino-sand: oklch(0.8 0.06 75);   /* sabbia: richiesta dello studio al posto del blu */
  --cittadino-sand-2: oklch(0.72 0.065 65);
  --tint-formule: oklch(0.93 0.04 245);     /* chip chiari dentro le schermate */
  --tint-carpetta: oklch(0.93 0.035 196);
  --tint-cittadino: oklch(0.94 0.08 90);
  --scan: 170 214 255;                  /* la digitalizzazione sul ritratto (rgb, per il canvas): bianco-azzurro freddo */

  /* tipografia */
  /* una famiglia, due tagli: il sistema sceglie Display sopra i 20px e Text sotto (optical sizing) */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* la scala di apple.com: 80 · 56 · 40 · 28 · 21 · 17 · 14 · 12 */
  --fs-hero: clamp(3rem, 1.6rem + 5.2vw, 5rem);
  --fs-h2: clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem);
  --fs-intro: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  --fs-num: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-lede: clamp(1.3125rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  /* tracking per taglia, come Apple: stretto sui titoli, lieve sul testo */
  --tr-hero: -0.015em; --tr-h2: -0.005em; --tr-h3: 0.007em; --tr-body: -0.022em;

  /* spazio — scala a passi costanti */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; --s-10: 10rem;

  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --max: 84rem;

  /* profondità — il bianco non ha ombre piatte: solo tinte, stratificate */
  --lift-1: 0 1px 1px oklch(0.21 0.015 205 / 0.04), 0 2px 6px oklch(0.21 0.015 205 / 0.04);
  --lift-2: 0 1px 2px oklch(0.21 0.015 205 / 0.05), 0 8px 24px oklch(0.21 0.015 205 / 0.06), 0 24px 60px oklch(0.21 0.015 205 / 0.05);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* quint out */
  --line: 1.5px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.47;
  letter-spacing: var(--tr-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 50;
  background: var(--ink); color: var(--white); padding: var(--s-2) var(--s-4);
  font-family: var(--display); font-size: var(--fs-small); text-decoration: none;
}
.skip:focus { top: var(--s-4); }

/* foto: trattamento unico — bianco e nero, lieve contrasto, mai nude */
.photo { background: var(--mist); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(1.02); }

/* plastico condiviso */
.maquette polygon { stroke: oklch(0.21 0.015 205 / 0.32); stroke-width: 0.6; stroke-linejoin: round; }
.maquette .facet { stroke: none; }
.maquette .edge { stroke: oklch(0.21 0.015 205 / 0.32); stroke-width: 0.6; }
.maquette .cord { stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; fill: none; }

/* la quota: ├── valore ──┤ */
.dim { position: relative; height: 1rem; }
.dim::before { /* linea */
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: var(--line) solid var(--red); transform-origin: left center;
}
.dim > i { /* trattini alle estremità */
  position: absolute; top: 0; bottom: 0; width: 0; border-left: var(--line) solid var(--red);
}
.dim > i:first-child { left: 0; }
.dim > i:last-child { right: 0; }
.dim--v { height: auto; width: 1rem; }
.dim--v::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: var(--line) solid var(--red); transform-origin: center top; }
.dim--v > i { left: 0; right: 0; width: auto; height: 0; border-left: 0; border-top: var(--line) solid var(--red); }
.dim--v > i:first-child { top: 0; bottom: auto; }
.dim--v > i:last-child { bottom: 0; top: auto; right: 0; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }