/* ==========================================================================
   TOKENS — Ottica Lepori (www.ottica-lepori.ch)
   Design token del sito: tipografia, colori, layout, componenti.
   Vista leggibile e mappa completa: Reference/Design Token/design-token.md.
   Scostamenti rispetto al runtime Figma Sites originale: DIFFERENZE.md.

   Breakpoint (mobile-first, i :root sotto sono il Mobile):
   Mobile <800 · Tablet ≥800 · Desktop ≥1280 · Wide ≥1440 · Monitor ≥1920.
   I breakpoint valgono per layout e hero; la tipografia è unica
   (fluida via clamp() sui titoli, fissa sul resto).
   ========================================================================== */

:root {
  /* Font */
  --font-family: "Helvetica Neue VG", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-logo: "Inter", "Helvetica Neue VG", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fw-thin: 200;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* Colori */
  --color-bg: #000000;
  --color-text: #FFFFFF;
  --color-text-soft: #EBE8E8;
  --color-line: #566167;
  --color-cta-hover: #FF8000;

  /* Tipografia — i titoli e le voci fluide scalano 375→1280 e poi
     restano piatti; il resto è fisso a ogni breakpoint */
  --fs-h1: clamp(31px, 17.74px + 3.54vw, 63px);
  --lh-h1: 0.952;                         /* "Dove il tempo ha ancora il suo peso." */
  --fs-h2: clamp(31px, 17.74px + 3.54vw, 63px);
  --lh-h2: 0.952;                         /* claim "Comfort quotidiano. ..." */
  --fs-h3: 26px;      --lh-h3: 35px;      /* titoli servizio, kids */
  --fs-cta: clamp(23px, 13.2px + 2.64vw, 47px);
  --lh-cta: 1.064;                        /* "Prenota una visita" */
  --fs-body: 18px;    --lh-body: 24px;    /* testo corrente (nei blocchi a colonne l'interlinea è 1.6, v. components.css) */
  --fs-bullet: 18px;  --lh-bullet: 26px;  --ls-bullet: -0.01em;
  --fs-label: clamp(12px, 10.757px + 0.3315vw, 15px);
  --lh-label: 1.2;                        /* DOVE SIAMO, ORARI, I NOSTRI SERVIZI */
  --fs-num: 15px;                         /* numerazione 01-04, peso Medium */
  --fs-copy: clamp(15px, 12.35px + 0.706vw, 18px);
  --lh-copy: 24px;                        /* © 2026 VisualGroup Sagl ... */
  --fs-privacy: 11px;                     /* "Privacy | Cookies" (lh normal) */

  /* Letter-spacing: -2% su titoli e label, -1% su testo ed elenchi */
  --ls-h1: -0.02em;
  --ls-h2: -0.02em;
  --ls-h3: -0.02em;
  --ls-cta: -0.02em;
  --ls-label: -0.02em;
  --ls-body: -0.01em;

  /* Layout — margini minimi per breakpoint + contenuto massimo 1440px
     centrato (margini compresi → testo max 1340px: i testi non partono
     mai attaccati al bordo). Foto full-bleed e divisori restano da
     bordo a bordo. */
  --content-max-width: 1440px;
  --pad-x: 15px;              /* padding orizzontale contenuti */
  --header-h: 70px;
  --divider-h: 40px;

  /* Hero: aspect-ratio per breakpoint; lockup VG a 5px dal fondo su mobile, 24px da tablet in su */
  --hero-ratio: 375 / 250;
  --hero-wordmark-w: 112px;
  --hero-vg-bottom: 5px;

  /* Bottone pill "Prenota ora": padding e testo fluidi 375→1280 */
  --btn-radius: 100px;
  --btn-padding-y: clamp(4px, 2.342px + 0.442vw, 8px);
  --btn-padding-x: clamp(14px, 9.856px + 1.105vw, 24px);
  --btn-border: 1.25px solid #FFFFFF;

  /* Video footer (logo VG 3D), fisso a ogni breakpoint */
  --footer-video-w: 62px;
  --footer-video-h: 62px;
}

/* Tablet */
@media (min-width: 800px) {
  :root {
    --pad-x: 25px;
    --header-h: 115px;

    --hero-ratio: 800 / 493;
    --hero-wordmark-w: 224px;
    --hero-vg-bottom: 24px;
  }
}

/* Desktop */
@media (min-width: 1280px) {
  :root {
    /* Minimo 50px; oltre i 1440 di viewport il margine cresce per
       centrare il contenuto a 1440px massimi */
    --pad-x: max(50px, calc(50px + (100vw - var(--content-max-width)) / 2));

    --hero-ratio: 1280 / 700;
    --hero-wordmark-w: 336px;
  }
}

/* Wide */
@media (min-width: 1440px) {
  :root {
    --hero-wordmark-w: 392px;
  }
}

/* Monitor */
@media (min-width: 1920px) {
  :root {
    --hero-wordmark-w: 504px;
  }
}