/* ==========================================================================
   Dalfasport · tokens.css
   Tutti i colori, i font e le misure del sito. base.css e main.css usano solo
   var(--…): un valore nuovo nasce qui, non nel componente.
   Contrasti verificati (WCAG 2.x), tabella nel CLAUDE.md del sito.
   ========================================================================== */

/* Barlow / Barlow Condensed, SIL Open Font License (fonts/OFL.txt).
   Self-hosted: nessuna richiesta a Google Fonts. Il file 600 copre anche 700
   e l'800 copre 900, cosi' il browser non inventa grassetti finti. */
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colori: 2 neutri + 1 primario (dal logo) ---------------------- */
  --c-ink: #17181a;            /* antracite: fondi scuri, testo forte        */
  --c-ink-2: #232528;          /* superfici su fondo scuro                   */
  --c-ink-3: #2e3034;          /* hover su fondo scuro                       */
  --c-text: #2f3033;           /* il grigio del wordmark · 13.2:1 su bianco  */
  --c-muted: #5e6066;          /* 6.3:1 su bianco · 5.6:1 su sasso           */
  --c-line: #e3e0da;           /* filetti                                    */
  --c-line-strong: #8d8f94;    /* bordi dei campi · 3.2:1 su bianco          */
  --c-stone: #f3f1ed;          /* sasso: sezioni alterne                     */
  --c-stone-2: #e9e6e0;        /* hover su sasso, segnaposto immagini        */
  --c-paper: #ffffff;

  --c-brand: #f76a01;          /* arancio del logo: riempimenti, testo antracite sopra (5.9:1) */
  --c-brand-hover: #ff7f1f;
  --c-brand-ink: #b54b00;      /* testo arancio su chiaro · 5.3:1 bianco, 4.7:1 sasso */
  --c-brand-soft: #fdeee2;     /* fondo tenue per etichette                  */

  --c-on-dark: #f3f1ed;        /* testo su antracite · 15.8:1                */
  --c-on-dark-muted: #a9abb0;  /* 7.7:1 su antracite                         */
  --c-line-dark: rgba(243, 241, 237, 0.16);

  --c-success: #1d7044;
  --c-success-soft: #e6f2ea;
  --c-error: #b42318;
  --c-error-soft: #fbeae8;

  --c-scrim-strong: rgba(23, 24, 26, 0.88);
  --c-scrim: rgba(23, 24, 26, 0.5);
  --c-scrim-soft: rgba(23, 24, 26, 0);
  --c-scrim-light: rgba(23, 24, 26, 0.28);
  --c-scrim-band: rgba(23, 24, 26, 0.84);   /* banda servizi sopra la foto della hero */

  /* ---- Ruoli (le sezioni scure li ridefiniscono in base.css) --------- */
  --bg: var(--c-paper);
  --fg: var(--c-text);
  --fg-strong: var(--c-ink);
  --fg-muted: var(--c-muted);
  --line: var(--c-line);
  --accent-text: var(--c-brand-ink);
  --focus: var(--c-ink);

  /* ---- Tipografia ---------------------------------------------------- */
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;

  --fs-xs: 0.8125rem;                                  /* 13 */
  --fs-sm: 0.9375rem;                                  /* 15 */
  --fs-base: 1.0625rem;                                /* 17 */
  --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21 */
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);      /* 20 → 24 */
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);          /* 24 → 32 */
  --fs-h2: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem);     /* 34 → 56 */
  --fs-h1: clamp(2.75rem, 1.7rem + 4.4vw, 5.5rem);       /* 44 → 88 */
  --fs-hero: clamp(3.5rem, 1.9rem + 6.8vw, 8.25rem);     /* 56 → 132 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 700;
  --fw-black: 800;

  --lh-display: 0.9;
  --lh-heading: 1.02;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --ls-caps: 0.14em;           /* etichette: come il payoff del logo */
  --ls-ui: 0.05em;             /* bottoni e menu                     */
  --ls-display: 0.005em;

  --measure: 65ch;

  /* ---- Spazi --------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(3.5rem, 2.4rem + 4.6vw, 7rem);
  --gutter: clamp(1rem, 0.55rem + 1.9vw, 2rem);
  --container: 77.5rem;        /* 1240 */
  --container-text: 46rem;

  /* ---- Forma --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-pill: 999px;
  --border-w: 1px;
  --border-w-strong: 2px;
  --focus-w: 3px;

  --shadow-header: 0 1px 0 var(--c-line), 0 10px 30px rgba(23, 24, 26, 0.07);
  --shadow-pop: 0 18px 40px rgba(23, 24, 26, 0.18);
  --shadow-fab: 0 6px 22px rgba(23, 24, 26, 0.24);

  /* ---- Misure di interfaccia ----------------------------------------- */
  --tap: 2.75rem;              /* 44 px: bersagli tattili  */
  --control-h: 3rem;           /* 48 px: bottoni e campi   */
  --control-h-sm: 2.5rem;
  --icon: 1.25rem;
  --header-h: 4.0625rem;       /* 65 px; aggiornata dal JS con l'altezza reale */
  --topbar-h: 2.25rem;
  --logo-h: 2.5rem;
  --logo-h-sm: 2.125rem;
  --hero-min-h: min(88dvh, 54rem);
  --fab-size: 3.5rem;          /* 56 px: pulsanti flottanti carrello e prenotazione */
  --fab-gap: 0.75rem;
  --fab-offset: 1.25rem;
  --tile-h: 15rem;             /* altezza delle schede categoria (home, desktop) */

  /* ---- Movimento ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 260ms;
  --dur-3: 600ms;
  --reveal-shift: 1rem;

  /* ---- Livelli ------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 50;
  --z-fab: 55;
  --z-overlay: 60;
  --z-drawer: 70;
  --z-skip: 100;
}

/* Testata desktop piu' alta: valore di partenza prima che il JS misuri */
@media (min-width: 67.5em) {
  :root {
    --header-h: 4.8125rem;     /* 77 px */
  }
}