/* ==========================================================================
   TOKENS — VisualGroup (visualgroupsa.ch)
   Design token del sito: tipografia, colori, layout, componenti.
   Vista leggibile e mappa completa: Reference/Design Token/design-token.md.
   Scostamenti rispetto al sito 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, hero e logo; 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-text-dim: #A5A5A5;
  --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-display: clamp(31px, 17.74px + 3.54vw, 63px);
  --lh-display: 0.952;                    /* CURA E VISIONE, Servizi per la tua vista */
  --fs-h1: clamp(31px, 17.74px + 3.54vw, 63px);
  --lh-h1: 0.952;                         /* claim, titoli pagina */
  --fs-h3: 26px;      --lh-h3: 35px;      /* titoli servizio, città */
  --fs-cta: clamp(23px, 13.2px + 2.64vw, 47px);
  --lh-cta: 1.064;                        /* "Prenota una visita", "Prendi appuntamento" */
  --fs-body: 18px;    --lh-body: 24px;    /* testo corrente (nei blocchi a colonne e nei contatti 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;                        /* eyebrow maiuscole */
  --fs-num: 15px;                         /* numerazione 01-04, peso Medium */
  --fs-select: 26px;  --lh-select: 35px;  /* "Seleziona una sede" (Thin, dim) */
  --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-display: -0.02em;
  --ls-h1: -0.02em;
  --ls-h3: -0.02em;
  --ls-cta: -0.02em;
  --ls-label: -0.02em;
  --ls-body: -0.01em;

  /* Logo header (testo Inter, identico su tutte le pagine): altezza
     complessiva 36.8 / 41.4 / 48.3 / 62.1px per breakpoint (più
     grande dei loghi header degli altri siti: +15% richiesta cliente
     lug 2026 sulle misure originali 32/36/42/54) */
  --fs-logo: 30.37px;  --lh-logo: 36.8px;
  --fs-logo-sub: 9.35px; --lh-logo-sub: 8.18px;

  /* Hero: aspect-ratio per breakpoint; scritta VISUAL GROUP centrata
     (scala per breakpoint, elemento identitario dentro la foto);
     lockup ottiche in basso, 34/48px di altezza, 5px dal fondo su
     mobile (24px da tablet in su) */
  --hero-ratio: 375 / 250;
  --fs-hero-logo: 26px; --lh-hero-logo: 21px; --ls-hero-logo: -0.03em;
  --hero-lockup-h: 38px;   /* 34 × 78/70: il canvas del lockup è cresciuto in alto per alzare Vicari */
  --hero-lockup-bottom: 5px;

  /* 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 */
  --section-pad: 35px;         /* padding verticale sezioni testo */
  --header-h: 70px;
  --media-w: 267px;            /* larghezza riquadro video home */
  --contatti-w: 345px;         /* larghezza blocco indirizzi/Instagram */
  --divider-h: 40px;

  /* 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;

    --fs-logo: 34.17px;  --lh-logo: 41.4px;
    --fs-logo-sub: 10.51px; --lh-logo-sub: 9.2px;

    --hero-ratio: 800 / 493;
    --fs-hero-logo: 47px; --lh-hero-logo: 38px;
    --hero-lockup-h: 53px;   /* 48 × 78/70 */
    --hero-lockup-bottom: 24px;

    --section-pad: 35px;
    --media-w: 375px;
    --contatti-w: 750px;
  }
}

/* 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));

    --fs-logo: 39.87px;  --lh-logo: 48.3px;
    --fs-logo-sub: 12.27px; --lh-logo-sub: 10.73px;

    --hero-ratio: 1280 / 700;
    --fs-hero-logo: 75px; --lh-hero-logo: 60px;

    --section-pad: 50px;
    --media-w: 523px;
    --contatti-w: 882px;
  }
}

/* Wide */
@media (min-width: 1440px) {
  :root {
    --fs-logo: 51.26px;  --lh-logo: 62.1px;
    --fs-logo-sub: 15.77px; --lh-logo-sub: 13.8px;

    --fs-hero-logo: 103.12px; --lh-hero-logo: 82.5px;

    --media-w: 796px;
    --contatti-w: 796px;
  }
}

/* Monitor */
@media (min-width: 1920px) {
  :root {
    --fs-hero-logo: 128.91px; --lh-hero-logo: 103.12px;

    --section-pad: 75px;
    --media-w: 1208px;
    --contatti-w: 1208px;
  }
}