/* ==================================================
   DESIGN TOKENS
   Unico punto da modificare per colori, font, spazi.
   ================================================== */

:root {
  /* V3.7 — unita' "vw" indiretta, ORA UNIVERSALE: OGNI misura del sito
     (immagini sticker, raggio/gutter delle schede iOS, gap tra scene, e
     anche la tipografia responsive) che userebbe `Nvw` la esprime come
     `calc(N * var(--vw))` invece del letterale `Nvw` — inclusa dentro
     clamp()/min()/max(), dove e' sintassi valida. Dalla V3.7 --vw vale
     SEMPRE 1cqw (non piu' 1vw su mobile e 1cqw solo da 768px come in
     V3.6): siccome .mobile-shell (css/layout.css) e' ora essa stessa
     SEMPRE un container query container (container-type:inline-size),
     a QUALUNQUE larghezza — telefono portrait, telefono landscape,
     tablet, desktop — 1cqw risolve sempre contro la larghezza REALE
     della shell (min(100% del device, 430px)), mai contro il viewport
     esterno. Risultato: calc(N * var(--vw)) significa sempre "N% della
     larghezza della shell", identico su un telefono da 390px portrait,
     sullo stesso telefono ruotato in landscape (shell comunque = 390px,
     non 844px), e su un monitor da 1920px (shell comunque = 430px). Vedi
     V3_7_NOTE.md. ATTENZIONE: questa dichiarazione NON deve mai
     diventare essa stessa `calc(N * var(--vw))` (referenza circolare,
     valore invalido) — resta l'unico punto del progetto con un vero
     letterale di unita' (ora `1cqw`, non piu' `1vw`). */
  --vw: 1cqw;

  /* colore — palette neutra e calda */
  --background: #f3eee6; /* V1.2: bianco sporco neutro, campo tra schede e fascia header */
  --background-secondary: #efe7db;
  --text: #29241f;
  --text-muted: #7a7166;
  --accent: #a3572f;
  --accent-soft: #c98f5e;
  --border: #ded3c3;

  /* V3.7 — "portrait stage": altezza di riferimento per le card NON
     sticky/scroll-driven (iOS 3, 4, 5, 6, 7, 8, 9, 10, 11 e le loro
     zone interne). Un `Nvh`/`Ndvh` puro confonde la larghezza reale del
     device con la sua altezza: lo STESSO telefono in portrait (es.
     390x844) e landscape (844x390) e' largo il doppio ma alto la meta',
     quindi una card "72vh" diventa improvvisamente bassissima in
     landscape e schiaccia testo/immagini. Il rapporto di riferimento
     (dal layout mobile approvato, ~390x844) e' 844/390 ≈ 2.164: questa
     variabile restituisce "quanto dovrebbe essere alta una card per
     restare coerente con una composizione portrait, data la larghezza
     REALE della shell", non la vera altezza del device.
     calc(216.4 * var(--vw)) = 216.4% della larghezza della shell (--vw
     e' sempre 1cqw, vedi sopra): a 390px di shell -> ~844px, a 430px ->
     ~931px, a 375px -> ~812px, a 360px -> ~779px, a 320px -> ~692px.
     max(100svh, ...) tiene comunque il minimo di un vero schermo pieno
     quando il device e' GIA' proporzionato come un telefono portrait
     (una card "100%" non deve mai risultare piu' bassa dello schermo
     reale in quel caso) — ma lascia che la card cresca oltre lo
     schermo (quindi si scrolla un po' di piu') quando la larghezza
     reale della shell lo richiede per restare coerente: su un telefono
     molto basso (es. 320x568) e' corretto ed esplicitamente voluto che
     la card diventi piu' alta del viewport e scorra leggermente di
     piu' — meglio una card un po' piu' lunga che testi/immagini
     sovrapposti. NON usata dalle sezioni sticky/scroll-driven (iOS 2 —
     .hero-pin/[data-hero-pin], iOS 2.1 — [data-ios2a-pin]/.ios2a-sticky
     in css/ios-spine-card.css): quelle hanno bisogno della vera altezza
     del viewport per il loro meccanismo di pin, e restano su
     dvh/svh — solo il LORO CONTENUTO viene reso resiliente alle
     altezze ridotte. --ps-stage-pct e' solo una comodita' per scrivere
     calc(N * var(--ps-stage-pct)) al posto di calc(N/100 *
     var(--ps-portrait-stage)) su ogni card. */
  --ps-portrait-stage: max(100svh, calc(216.4 * var(--vw)));
  --ps-stage-pct: calc(var(--ps-portrait-stage) / 100);

  /* tipografia */
  --font-display: "Fraunces", "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* spaziatura */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;
  --space-3xl: 11rem;

  /* raggi */
  --radius-small: 6px;
  --radius-medium: 16px;
  --radius-large: 28px;

  /* larghezze contenuto */
  --content-width: 40rem;
  --wide-width: 75rem;

  /* motion tokens */
  --motion-fast: 320ms;
  --motion-normal: 720ms;
  --motion-slow: 1100ms;
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* safe area iPhone */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- sistema "schede iOS" ----------
     Token unici per ogni scheda a piena superficie del sito: raggio,
     margine laterale, larghezza massima, easing e quantita' di
     restringimento in uscita. Vedi css/ios-cards.css. */
  --card-radius: clamp(22px, calc(6 * var(--vw)), 44px);
  --card-gutter: clamp(10px, calc(3 * var(--vw)), 22px);
  --card-max-width: 30rem;
  --card-max-width-wide: 64rem;
  --card-ease: var(--ease-soft);
  /* V2.0 — l'assottigliamento in uscita e' in percentuale (non px) cosi'
     "100% -> 97% di larghezza" vale identico su ogni scheda iOS a
     prescindere dalla sua larghezza reale. 1.5% per lato = 3% totale. */
  --card-exit-inset: 1.5%;
  /* V1.8 — spazio netto, intenzionale, tra la fine della iOS 1 e l'inizio
     della iOS 2: le due schede NON si sovrappongono piu' (era
     --card-overlap con margine negativo fino alla V1.7). Vedi .hero-pin
     in css/hero.css. */
  --scene-gap: clamp(20px, calc(5 * var(--vw)), 40px);

  /* fascia verticale del logo fisso in alto (poco piu' di 1cm su smartphone) */
  --brand-bar-height: clamp(56px, calc(13 * var(--vw)), 68px);
}

:root {
  --hero-dark-bg: #0b4b4f;
  --hero-dark-bg-2: #08393d;
  --paper-cream: #f7f4ee;
  --clay-red: #a8461f; /* V1.7 — sfondo scheda iOS 1, tinta unita "terra rossa" */
  /* V2.0 — sfondo scheda iOS 3: --background-secondary (#efe7db) era troppo
     simile a --background (#f3eee6) della pagina, cosi' lo stondato in
     basso della card (nella fascia puntini/hint, l'unica zona dove si vede
     il materiale della card e non le foto) risultava invisibile per
     mimetismo di colore — stesso identico problema gia' risolto per la
     iOS 1 in V1.7 cambiandole sfondo. */
  --sand: #e3d6bd;
}