/*
  Design tokens MOMO Tires per il totem kiosk (1080 x 1920) — v0.2
  Fonte: momotires.it (stili calcolati, 2026-11-06) — vedi design-system-momo.md
  OSSERVATO = misurato sul sito; DEDOTTO = ipotesi; PROPOSTA = derivato per il totem.
  Requisiti d'uso:
   - <meta name="viewport" content="width=1080, user-scalable=no">  (la scala presuppone 1080 px CSS)
   - font e icone nel precache del Service Worker; file in /public (nomi senza impronta)
   - precaricare il font:  <link rel="preload" href="/fonts/montserrat-var-latin.woff2" as="font" type="font/woff2" crossorigin>
*/

/* Montserrat variable (OFL), sottoinsieme latin (copre l'italiano). Ogni peso 400-800 è reale.
   Percorso relativo a questo file (docs/fonts/...); in produzione: /fonts/... */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/montserrat-var-latin.woff2") format("woff2");
}

:root {
  /* ---------- Colore: marchio ---------- */
  --color-yellow: #ffd100;          /* OSSERVATO: pulsanti */
  --color-yellow-logo: #fcd400;     /* OSSERVATO: logo */
  --color-yellow-soft: #ffcd57;     /* OSSERVATO: voce di menu attiva */
  --color-yellow-hover: #ffd210;    /* DEDOTTO: hover non provato */
  --color-red: #e2241d;             /* OSSERVATO su 1 caso (link footer); accento DEDOTTO */
  --color-red-hot: #ff0505;
  --color-red-hot-2: #ff0f0f;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-ink: #2d2a26;             /* testo corrente */
  --color-ink-strong: #1e293b;      /* testo pulsanti, etichette */
  --color-title-on-light: #000000;  /* titoli su fondo chiaro */
  --color-surface-grey: #eeeeee;
  --color-border-grey: #c4c5c6;     /* OSSERVATO: bordo inferiore dei campi (contrasto 1,73: NON per il totem) */
  --color-border-field: #67768e;    /* PROPOSTA: bordo campo >= 3:1 su bianco (da verificare) */
  --color-line-on-dark: rgba(255, 255, 255, 0.14);   /* PROPOSTA: elevazione su nero */

  /* ---------- Gradienti (OSSERVATO) ---------- */
  --grad-guarantee: linear-gradient(35deg, #000000 0%, #ff0505 66%, #ff0f0f 98%);
  --grad-submenu: linear-gradient(rgba(20, 20, 20, 0.96) 0%, rgba(0, 0, 0, 0.96) 100%);

  /* ---------- Colori di stagione (campionati dai PNG delle card) ---------- */
  --season-summer-top: #ffcc00;   --season-summer-mid: #980106;   --season-summer-bottom: #ff0000;
  --season-summer: linear-gradient(180deg, #ffcc00 0%, #980106 50%, #ff0000 100%);
  --season-4season-top: #194500;  --season-4season-mid: #2f7c01;  --season-4season-bottom: #46bb01;
  --season-4season: linear-gradient(180deg, #194500 0%, #2f7c01 50%, #46bb01 100%);
  --season-winter-top: #003e90;   --season-winter-mid: #0077c3;   --season-winter-bottom: #00b5f8;
  --season-winter: linear-gradient(180deg, #003e90 0%, #0077c3 50%, #00b5f8 100%);

  /* ---------- Semantici ---------- */
  --bg-page: var(--color-black);        /* PROPOSTA: il sito è nero solo su header e hero della home */
  --bg-surface: var(--color-white);
  --text-on-dark: var(--color-white);
  --text-on-light: var(--color-ink);
  --action-bg: var(--color-yellow);
  --action-text: var(--color-ink-strong);
  --nav-active: var(--color-yellow-soft);

  /* ---------- Scala UI: 1 per un 32" Full HD; da tarare sul totem scelto ---------- */
  --ui-scale: 1;

  /* ---------- Tipografia ---------- */
  --font-family: "Montserrat", sans-serif;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;      /* reale col font variabile (sul sito è reso come 800) */
  --weight-heavy: 800;

  /* Scala totem: sito x1,6 (display: proposta senza equivalente) */
  --fs-display: calc(96px * var(--ui-scale));
  --fs-h2: calc(68px * var(--ui-scale));
  --fs-h3: calc(34px * var(--ui-scale));        /* sito 21,33 x 1,6 */
  --fs-card-title: var(--fs-h3);                /* titolo delle card: stessa scala di H3 */
  --fs-h2-band: calc(56px * var(--ui-scale));   /* H2 nella fascia Garanzia */
  --fs-body: calc(26px * var(--ui-scale));
  --fs-small: calc(22px * var(--ui-scale));     /* minimo assoluto */
  --fs-button: calc(28px * var(--ui-scale));
  --fs-button-xl: calc(40px * var(--ui-scale)); /* pulsante dell'attrazione */
  --fs-label: calc(22px * var(--ui-scale));

  --lh-display: 1.15;
  --lh-heading: 1.3;       /* come il sito */
  --lh-body: 1.6;
  --lh-snug: 1.4;          /* testi brevi a più righe */
  --lh-ui: 1.45;           /* testi secondari nelle liste */
  --lh-relaxed: 1.5;       /* paragrafi nelle fasce */

  /* ---------- Spazio, 8 px (PROPOSTA) ---------- */
  --space-1: 8px;  --space-2: 16px;  --space-3: 24px;  --space-4: 32px;
  --space-6: 48px; --space-8: 64px;  --space-12: 96px;
  --safe-margin: 48px;

  /* ---------- Forme (OSSERVATO) ---------- */
  --radius-pill: 30px;            /* sito */
  --radius-pill-kiosk: 999px;     /* totem: pillola completa */
  --radius-rect-button: 3px;
  --radius-menu: 12px;
  --radius-field: 0;

  /* ---------- Elevazione (OSSERVATO; invisibile sul nero) ---------- */
  --shadow-button: 0 18px 40px -10px rgba(0, 0, 0, 0.15);   /* 1 pulsante su 3 */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.44);
  --shadow-header: 0 10px 25px rgba(0, 0, 0, 0.45);         /* solo pagine non home */
  --shadow-menu:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.15),
    0 10px 22px rgba(0, 0, 0, 0.25),
    0 0 22px rgba(255, 209, 0, 0.1);

  /* ---------- Tocco (PROPOSTA) ---------- */
  --touch-min: 48px;         /* minimo */
  --touch-comfort: 72px;     /* consigliato */
  --button-height: calc(96px * var(--ui-scale));
  --button-height-xl: calc(128px * var(--ui-scale));
  --press-scale: 0.98;
  --press-duration: 100ms;
  --transition: 200ms ease-out;

  /* ---------- Layout (PROPOSTA) ---------- */
  --screen-w: 1080px;
  --screen-h: 1920px;
  --header-h: 176px;
  --nav-bar-h: 160px;
  --actions-top: 820px;      /* azioni principali tra 820 e 1760 */
  --actions-bottom: 1760px;
  --qr-min: 280px;           /* lettura a 50 cm */
  --qr-large: 460px;         /* QR grande (pagina Garanzia, finestra) */

  /* ---------- Misure di pagina e componenti (PROPOSTA) ---------- */
  --border-w: 2px;
  --border-w-strong: 4px;
  --crumbs-h: 88px;
  --row-h: 216px;            /* riga di lista: immagine quadrata 216 */
  --thumb-size: 120px;       /* miniature della galleria */
  --stage-h: 560px;          /* immagine principale del dettaglio */
  --measure-lead: 880px;     /* larghezza massima dei testi introduttivi */
  --icon-size: 52px;
  --icon-stroke: 2.4;
  --bar-h: 12px;
  --attract-title-top: 300px;
  --attract-cta-bottom: 120px;
  --attract-cta-max: 760px;

  /* ---------- Opacità e sovrapposizioni (PROPOSTA) ---------- */
  --opacity-muted: 0.7;
  --opacity-dim: 0.92;
  --opacity-disabled: 0.35;
  --overlay: rgba(0, 0, 0, 0.82);
  --shadow-text: 0 2px 8px rgba(0, 0, 0, 0.45);
  --attract-bg: radial-gradient(120% 80% at 50% 30%, #1d1d1d 0%, #000000 70%);
  --attract-veil: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 28%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.92) 100%);
}

/* Base kiosk */
html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-on-dark);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;       /* niente pinch né doppio tocco */
  overscroll-behavior: none;
}
img { -webkit-user-drag: none; }  /* proprietà non standard: in Chrome/Android usare anche draggable="false" sulle immagini */

h1 { font-size: var(--fs-display); font-weight: var(--weight-heavy); line-height: var(--lh-display); margin: 0; }
h2 { font-size: var(--fs-h2); font-weight: var(--weight-heavy); line-height: var(--lh-heading); margin: 0; }
h3 { font-size: var(--fs-h3); font-weight: var(--weight-heavy); line-height: var(--lh-heading); margin: 0; }

/* Pulsante: solo la pillola (A) sul totem, senza bordo né ombra sul nero */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 var(--space-6);
  background: var(--action-bg);
  color: var(--action-text);
  border: 0;
  border-radius: var(--radius-pill-kiosk);
  font: var(--weight-semibold) var(--fs-button)/1 var(--font-family);
  transition: transform var(--press-duration), filter var(--press-duration);
}
.btn:active { transform: scale(var(--press-scale)); filter: brightness(0.92); }
.btn--xl { min-height: var(--button-height-xl); font-size: var(--fs-button-xl); }
/* Su fondo chiaro l'ombra torna visibile */
.on-light .btn { box-shadow: var(--shadow-button); }

/* Fascia promozionale (Garanzia): testo bianco sulla parte scura/rossa del gradiente */
.band-guarantee {
  background: var(--grad-guarantee);
  color: var(--color-white);
  padding: var(--space-6) var(--safe-margin);
}

/* Card di stagione: l'immagine PNG porta il proprio gradiente; il gradiente CSS è il ripiego */
.card-season { border-radius: 0; box-shadow: var(--shadow-card); }
.card-season--summer  { background: var(--season-summer); }
.card-season--4season { background: var(--season-4season); }
.card-season--winter  { background: var(--season-winter); }

/* Elevazione su nero: bordo chiaro invece dell'ombra */
.on-dark .raised { box-shadow: none; border: 1px solid var(--color-line-on-dark); }