/* ══════════════════════════════════════════════
 TOKENS.CSS — Vaccinarsi
 Revisione: 2025/2026 Standards
 ══════════════════════════════════════════════ */

/* ── Font Faces ───────────────────────────── */

@font-face {
font-family: 'Muller';
src: url('../fonts/Muller-Light.woff2') format('woff2'),
     url('../fonts/Muller-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Muller';
src: url('../fonts/Muller-Regular.woff2') format('woff2'),
     url('../fonts/Muller-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Muller';
src: url('../fonts/Muller-Bold.woff2') format('woff2'),
     url('../fonts/Muller-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}

/* ══════════════════════════════════════════════
 BASE — default desktop
 ══════════════════════════════════════════════ */

:root {

/* Colori */
--color-blue:        #0049C1;
--color-celeste:     #00D3FF;
--color-azzurro:     #B7E4FA;
--color-acqua:       #E5F4F9;
--color-white:       #FFFFFF;
--color-red:         #F52727;
--color-green:       #5ECB30;
--color-text:        #1A1A1A;
--color-text-light:  #666666;
--color-footer-bg:   #2D3E50;

/* Font */
--font-primary:  'Muller', sans-serif;
--font-light:    300;
--font-regular:  400;
--font-bold:     700;

/* Testi */
--text-xxs:  10px;
--text-xs:   12px;
--text-sm:   14px;
--text-base: 16px;
--text-lg:   18px;
--text-xl:   20px;
--text-2xl:  24px;
--text-3xl:  32px;
--text-4xl:  40px;
--text-5xl:  48px;
--text-6xl:  64px;

/* Line height */
--leading-tight:  1.2;
--leading-normal: 1.5;
--leading-loose:  1.8;

/* Letter spacing */
--tracking-tight:  -0.02em;
--tracking-normal:  0em;
--tracking-wide:    0.05em;

/* Spaziature */
--space-1:   4px;
--space-2:   8px;
--space-3:   12px;
--space-4:   16px;
--space-5:   20px;
--space-6:   24px;
--space-8:   32px;
--space-10:  40px;
--space-12:  48px;
--space-16:  64px;
--space-20:  80px;
--space-24:  96px;
--space-32:  128px;
--space-48:  192px;
--space-64:  256px;

/* Grid */
--grid-columns:   12;
--grid-gap:       24px;
--grid-margin:    80px;
--grid-max-width: 1440px;

/* Navbar */
--navbar-height: 102px;

/* Radius */
--radius-sm:   4px;
--radius-md:   8px;
--radius-lg:   16px;
--radius-xl:   24px;
--radius-full: 9999px;

/* Shadow */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 16px rgba(0,0,0,0.10);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

/* Transizioni */
--transition-fast: 0.15s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
}

/* ── Reset ────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
font-size: 16px;
scroll-behavior: smooth;
}

@supports not (scroll-behavior: smooth) {
html { scroll-behavior: auto; }
}

body {
font-family: var(--font-primary);
font-weight: var(--font-regular);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; height: auto; }
a { text-decoration: none; color: inherit; transition: var(--transition-base); }

.container {
width: 100%;
max-width: var(--grid-max-width);
margin-inline: auto;
padding-inline: var(--grid-margin);
}

sup { font-size: 10px; vertical-align: super; line-height: 0; }

/* ── Utility colori ───────────────────────── */
.celeste    { color: var(--color-celeste)    !important; }
.azzurro    { color: var(--color-azzurro)    !important; }
.acqua      { color: var(--color-acqua)      !important; }
.blue       { color: var(--color-blue)       !important; }
.white      { color: var(--color-white)      !important; }
.red        { color: var(--color-red)        !important; }
.green      { color: var(--color-green)      !important; }
.text-light { color: var(--color-text-light) !important; }

/* ── Accessibilità ────────────────────────── */

/* Skip navigation */
.skip-nav {
position: absolute;
top: -100%;
left: var(--space-4);
z-index: 999999;
padding: var(--space-3) var(--space-6);
background-color: var(--color-blue);
color: var(--color-white);
font-family: var(--font-primary);
font-size: var(--text-sm);
font-weight: var(--font-bold);
border-radius: var(--radius-md);
text-decoration: none;
transition: top 0.2s ease;
}
.skip-nav:focus {
top: var(--space-4);
}

/* Visually hidden (screen reader only) */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* Focus visible */
:focus-visible {
outline: 3px solid var(--color-celeste);
outline-offset: 3px;
border-radius: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}

/* ── Mobile UX ────────────────────────────── */

html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

* {
-webkit-tap-highlight-color: transparent;
}

button, a, [role="button"] {
touch-action: manipulation;
cursor: pointer;
}

/* Tap target 44×44 — solo su CTA e controlli principali */
.btn--cta,
.btn--hero,
.btn--quiz,
.btn--download,
.navbar__hamburger,
.section-slider__arrow,
.section-video__play {
min-height: 44px;
min-width: 44px;
}

/* ── Safe area insets — iPhone notch ──────── */

.navbar {
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}

.footer__bottom {
padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}

/* ── Prefers reduced motion ───────────────── */

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.section-slider__card img,
.section-card__foto img {
  transition: none !important;
}

.slider-cursor {
  display: none !important;
}
}

/* ── Prefers contrast ─────────────────────── */

@media (prefers-contrast: high) {
:root {
  --color-text-light: #333333;
}
}

/* ── Print stylesheet ─────────────────────── */

@media print {
.navbar,
.slider-cursor,
.mobile-overlay,
.page-blur-overlay,
.section-slider,
.section-video,
.section-quiz,
.section-download,
.subnav {
  display: none !important;
}

body {
  padding-top: 0 !important;
  color: #000 !important;
  background: #fff !important;
  font-size: 12pt;
}

a[href]::after {
  content: " (" attr(href) ")";
  font-size: 9pt;
}

a[href^="#"]::after,
a[href^="javascript"]::after {
  content: "";
}

.hero-foto,
.section-banner {
  background-image: none !important;
  color: #000 !important;
  min-height: auto !important;
}

.hero-foto::before,
.section-banner::before {
  display: none !important;
}
}

/* ══════════════════════════════════════════════
 ≥ 1920px
 ══════════════════════════════════════════════ */
@media (min-width: 1920px) {
:root {
  --text-xxs:  12px;
  --text-xs:   14px;
  --text-sm:   16px;
  --text-base: 18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  96px;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;

  --space-1:   6px;
  --space-2:   10px;
  --space-3:   16px;
  --space-4:   20px;
  --space-5:   26px;
  --space-6:   30px;
  --space-8:   40px;
  --space-10:  50px;
  --space-12:  60px;
  --space-16:  80px;
  --space-20:  100px;
  --space-24:  120px;
  --space-32:  160px;
  --space-48:  240px;
  --space-64:  320px;

  --grid-columns:   12;
  --grid-gap:       30px;
  --grid-margin:    120px;
  --grid-max-width: 1600px;

  --navbar-height: 120px;

  --radius-sm:   5px;
  --radius-md:   10px;
  --radius-lg:   20px;
  --radius-xl:   30px;
  --radius-full: 9999px;
}
}

/* ══════════════════════════════════════════════
 ≤ 1024px
 ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
:root {
  --text-xxs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  32px;
  --text-5xl:  40px;
  --text-6xl:  48px;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   10px;
  --space-4:   14px;
  --space-5:   18px;
  --space-6:   20px;
  --space-8:   28px;
  --space-10:  36px;
  --space-12:  44px;
  --space-16:  48px;
  --space-20:  48px;
  --space-24:  72px;
  --space-32:  80px;
  --space-48:  150px;
  --space-64:  200px;

  --grid-columns:   12;
  --grid-gap:       20px;
  --grid-margin:    40px;
  --grid-max-width: 1440px;

  --navbar-height: 102px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
}
}

/* ══════════════════════════════════════════════
 ≤ 768px
 ══════════════════════════════════════════════ */
@media (max-width: 768px) {
:root {
  --text-xxs:  12px;
  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;
  --text-lg:   20px;
  --text-xl:   22px;
  --text-2xl:  26px;
  --text-3xl:  30px;
  --text-4xl:  34px;
  --text-5xl:  40px;
  --text-6xl:  48px;

  --leading-tight:  1.25;
  --leading-normal: 1.55;
  --leading-loose:  1.8;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;

  --space-1:   3px;
  --space-2:   6px;
  --space-3:   8px;
  --space-4:   12px;
  --space-5:   14px;
  --space-6:   18px;
  --space-8:   24px;
  --space-10:  32px;
  --space-12:  36px;
  --space-16:  36px;
  --space-20:  40px;
  --space-24:  56px;
  --space-32:  56px;
  --space-48:  100px;
  --space-64:  140px;

  --grid-columns:   12;
  --grid-gap:       16px;
  --grid-margin:    24px;
  --grid-max-width: 1440px;

  --navbar-height: 70px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;
}
}

/* ══════════════════════════════════════════════
 ≤ 480px
 ══════════════════════════════════════════════ */
@media (max-width: 480px) {
:root {
  --text-xxs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 15px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  23px;
  --text-3xl:  27px;
  --text-4xl:  31px;
  --text-5xl:  35px;
  --text-6xl:  43px;

  --leading-tight:  1.2;
  --leading-normal: 1.3;
  --leading-loose:  1.4;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.03em;

  --space-1:   2px;
  --space-2:   5px;
  --space-3:   7px;
  --space-4:   10px;
  --space-5:   12px;
  --space-6:   16px;
  --space-8:   20px;
  --space-10:  28px;
  --space-12:  32px;
  --space-16:  32px;
  --space-20:  36px;
  --space-24:  48px;
  --space-32:  48px;
  --space-48:  80px;
  --space-64:  120px;

  --grid-columns:   12;
  --grid-gap:       12px;
  --grid-margin:    16px;
  --grid-max-width: 1440px;

  --navbar-height: 70px;

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-full: 9999px;
}
}