/* ==========================================================================
   TOKENS — Ottica Vicari
   Valori da Reference/Design Token/design-token.md, misure verificate sugli
   screenshot in Reference/Screenshots/. Vedi ANALISI.md per le fonti.
   ========================================================================== */

:root {
  /* Font */
  --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Tipografia — desktop (>= 1024px), scalata via clamp() in base.css */
  --fs-h3: 63px;
  --lh-h3: 60px;
  --ls-h3: -0.02em;

  --fs-h4: 47px;
  --lh-h4: 50px;
  --ls-h4: -0.02em;

  --fs-h6: 26px;
  --lh-h6: 35px;
  --ls-h6: -0.02em;

  /* Fluido su tutta la scala 375px→1280px: 12px a mobile, 15px a desktop
     (valore desktop invariato, come da design-token.md). */
  --fs-label: clamp(12px, 10.757px + 0.3315vw, 15px);
  --ls-label: -0.02em;

  --fs-numero: 15px;

  --fs-body: 18px;
  --lh-body: 24px;
  --ls-body: -0.01em;

  --fs-bullet: 18px;
  --lh-bullet: 26px;
  --ls-bullet: -0.01em;

  --fs-footer: 15px;
  --fs-tiny: 11px;
  --fw-light: 200;

  /* Colori */
  --color-bg: #000000;
  --color-text: #EBE8E8;
  --color-text-secondary: #FFFFFF;
  --color-accent: #FFFFFF;
  --color-button-text: #FFFFFF;
  --color-divider: #566167;
  /* #000000 come da design-token.md: il video del logo VG nel footer ha
     uno sfondo nero puro incorporato nei fotogrammi, un valore diverso
     avrebbe creato un riquadro visibile attorno al video */
  --color-footer-bg: #000000;
  --color-footer-text: #FFFFFF;
  /* Colore hover della CTA "Prenota ora", da design-token.md */
  --color-cta-hover: #FF8000;

  /* Layout */
  --frame-desktop: 1280px;
  --frame-tablet: 800px;
  --frame-mobile: 375px;
  --content-max-width: 1440px;

  --margin-x: 50px;       /* desktop */
  --section-padding-y: 50px;
  --header-height: 115px;

  /* Componenti */
  --btn-radius: 100px;
  /* Fluidi su tutta la scala 375px→1280px: 4px a mobile, 8px a desktop
     (prima si appiattiva a 6px già a 800px). */
  --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;
  --img-radius: 0px;
}

/* Tablet */
@media (max-width: 900px) {
  :root {
    --margin-x: 25px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  :root {
    --margin-x: 15px;
  }
}