:root {
  /* Colors */
  --bg:      #FFFFFF;
  --surface: #FFFFFF;
  --surface2:#F5F5F5;
  --black:   #000000;
  --white:   #FFFFFF;
  --primary: #DB005A;
  --primary-hover: #a8003f;

  /* Tints — black (contrast-safe) */
  --black-04: rgba(0,0,0,0.04);
  --black-06: rgba(0,0,0,0.06);
  --black-08: rgba(0,0,0,0.08);
  --black-10: rgba(0,0,0,0.10);
  --black-20: rgba(0,0,0,0.20);
  --black-40: rgba(0,0,0,0.40);
  --black-50: rgba(0,0,0,0.50);
  --black-60: rgba(0,0,0,0.60);
  --black-75: rgba(0,0,0,0.75);

  /* Tints — white */
  --white-06: rgba(255,255,255,0.06);
  --white-10: rgba(255,255,255,0.10);
  --white-20: rgba(255,255,255,0.20);
  --white-55: rgba(255,255,255,0.55);
  --white-90: rgba(255,255,255,0.92);

  /* Typography */
  /* 'TitleFallback' (base.css) ha le metriche allineate al primo
     font: se il webfont dei titoli arriva tardi, il testo non cambia
     larghezza quando subentra. */
  --font-primary:   'Special Gothic Expanded One', 'TitleFallback', 'VanguardCF', 'Impact', sans-serif;
  --font-secondary: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-xs:   0.6875rem;      /* label, didascalie */
  --text-sm:   0.8125rem;      /* testo secondario */
  --text-base: 1rem;           /* corpo testo */
  --text-md:   clamp(1.125rem, 1.5vw, 1.25rem);     /* intro testi */
  --text-lg:   clamp(1.25rem, 2vw, 1.5rem);         /* titoli card */
  --text-xl:   clamp(1.5rem, 2.5vw, 2rem);          /* sottotitoli sezione */
  --text-2xl:  clamp(2rem, 4vw, 3rem);              /* titoli sezione */
  --text-3xl:  clamp(2.5rem, 5vw, 4rem);            /* titoli principali */
  --text-4xl:  clamp(2.75rem, 6vw, 4.5rem);
  --text-5xl:  clamp(3rem, 7vw, 5.5rem);
  --text-6xl:  clamp(3.5rem, 8vw, 6.5rem);
  --text-7xl:  clamp(4rem, 10vw, 8rem);
  --text-8xl:  clamp(5rem, 12vw, 10rem);
  --text-9xl:  clamp(6rem, 16vw, 13rem);
  --text-hero: clamp(3rem, 8vw, 7rem);              /* hero title */

  /* Corpi dei titoli — un solo sistema per tutto il sito (homepage e
     pagine servizi), tre misure:
       --t-hero  titolo della hero
       --t-svc   "Servizi" (una parola sola, può stare più grande)
       --t-sub   titoli lunghi / frasi: "Alcuni amici...", intestazioni
                 di sezione delle pagine servizi
       --t-h1    H1 delle pagine servizi (frase su righe fisse, colonna stretta)
       --t-xl    titoli brevi di sezione: Case studies, Tips, FAQ,
                 Contatti... (il riferimento è Case studies) */
  --t-hero: clamp(3rem, 7vw, 9rem);
  --t-svc:  clamp(1.75rem, 6.2vw, 7.4rem);
  --t-sub:  clamp(1.75rem, 5.2vw, 5.1rem);
  --t-xl:   min(150px, 10vw);
  --t-amici: clamp(1rem, 5.2vw, 5.1rem);       /* "Alcuni amici soddisfatti / che ci hanno dato fiducia": sempre su due righe, quindi scende fino a 16px su telefono */
  --t-cta:  clamp(1.9rem, 4.6vw, 5.5rem);          /* titolo dei blocchi CTA/form di chiusura pagina (Contattaci, Scrivici, Il prossimo successo…): identico in tutte le pagine */
  --t-h1:   clamp(2.2rem, 6.2vw, 5.6rem);          /* H1 delle pagine servizi: più grande dei titoli di sezione (--t-sub), frasi brevi su righe fisse nella colonna sinistra */

  /* Section spacing */
  --section-py: clamp(4rem, 8vw, 7rem);
  --section-px: clamp(1.5rem, 6vw, 7rem);

  /* Nav: altezza unica (prima 82px in components.css e fallback 88px nelle regole) */
  --nav-h: 82px;

  /* Inchiostro del body: chiaro = nero 60% (About home), scuro = bianco 72% */
  --text-body: 1rem;      /* 16px: body, descrizioni */
  --text-ui: 0.875rem;    /* 14px: CTA, eyebrow, privacy */
  --ink-body: rgba(0,0,0,0.70);
  --ink-body-dark: rgba(255,255,255,0.80);

  /* Gap scale */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2.5rem;
  --gap-xl: 4rem;

  /* Stack scale */
  --stack-xs: 0.5rem;
  --stack-sm: 0.75rem;
  --stack-md: 1.25rem;
  --stack-lg: 2rem;
  --stack-xl: 3rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* Layout */
  --max-w: 1440px;
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --col-gap: clamp(0.75rem, 1.5vw, 1.5rem);

  /* Border */
  --border:       1px solid var(--black-10);
  --border-hover: 1px solid var(--black-40);

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 20px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04);

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  550ms;
  --dur-enter: 800ms;
}

/* ═══════════════════ DARK MODE TOKENS ══════════════════ */
[data-theme="dark"] {
  --bg:      #111111;
  --black:   #f0f0f0;
  --white:   #111111;
  --black-04: rgba(255,255,255,0.04);
  --black-06: rgba(255,255,255,0.06);
  --black-08: rgba(255,255,255,0.08);
  --black-10: rgba(255,255,255,0.10);
  --black-20: rgba(255,255,255,0.20);
  --black-40: rgba(255,255,255,0.40);
  --black-50: rgba(255,255,255,0.50);
  --black-60: rgba(255,255,255,0.60);
  --black-75: rgba(255,255,255,0.75);
  --white-06: rgba(0,0,0,0.06);
  --white-10: rgba(0,0,0,0.10);
  --white-20: rgba(0,0,0,0.20);
  --white-55: rgba(0,0,0,0.55);
  --white-90: rgba(17,17,17,0.92);
  --border:       1px solid rgba(255,255,255,0.10);
  --border-hover: 1px solid rgba(255,255,255,0.30);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.20);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.20);
}

/* Telefono: i titoli brevi scendono per entrare nello schermo senza
   spezzare le parole */
@media (max-width: 600px) { :root { --t-xl: min(150px, 9.6vw); } }