/* =========================================
   Fluid Type System — Component & Utility Classes
   Dipende dalle variabili definite in :root
   (—h1-min/max, —body-min/max, ecc.)
   ========================================= */

/* ---------- UTILITIES DI SCALA (dimensioni generiche) ---------- */
/* Mappatura rapida: usa dove ti serve senza cambiare i tag */
.text-fluid-xs  { font-size: clamp(0.875rem, calc(0.84rem + 0.25vw), 0.975rem); }
.text-fluid-sm  { font-size: clamp(0.95rem,  calc(0.9rem  + 0.35vw), 1.05rem);  }
.text-fluid-base{ font-size: clamp(var(--body-min),
                                   calc(var(--body-min) + (var(--body-max) - var(--body-min)) * var(--fluid-basis)),
                                   var(--body-max)); }
.text-fluid-lg  { font-size: clamp(1.125rem, calc(1.05rem + 0.6vw), 1.375rem); }
.text-fluid-xl  { font-size: clamp(1.25rem,  calc(1.1rem  + 1vw),  1.75rem); }
.text-fluid-2xl { font-size: clamp(1.5rem,   calc(1.25rem + 1.75vw), 2.25rem); }
.text-fluid-3xl { font-size: clamp(1.75rem,  calc(1.4rem  + 2.5vw),  3rem); }
.text-fluid-4xl { font-size: clamp(2rem,     calc(1.5rem  + 3vw),    3.5rem); }

/* Line-height e letter-spacing utilitarie */
.lh-tight   { line-height: 1.1; }
.lh-snug    { line-height: 1.25; }
.lh-normal  { line-height: 1.45; }
.lh-relaxed { line-height: 1.6; }
.ls-tight   { letter-spacing: -0.02em; }
.ls-normal  { letter-spacing: 0; }
.ls-wide    { letter-spacing: 0.02em; }

/* Larghezza misura di lettura */
.measure-narrow { max-width: 45ch; }
.measure        { max-width: 65ch; }
.measure-wide   { max-width: 80ch; }

/* Bilanciamento righe (supporto moderno) */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* Troncamento multilinea */
.truncate-1, .truncate-2, .truncate-3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.truncate-1 { -webkit-line-clamp: 1; }
.truncate-2 { -webkit-line-clamp: 2; }
.truncate-3 { -webkit-line-clamp: 3; }

/* ---------- COMPONENTI: TITOLI & HERO ---------- */
/* Display per hero d'impatto (sopra H1) */
.display {
  font-weight: 900;
  line-height: clamp(1.05, calc(1 + 0.1vw), 1.15);
  letter-spacing: clamp(-0.02em, calc(-0.01em - 0.2vw), -0.03em);
  font-size: clamp(2.25rem, calc(1.5rem + 4vw), 5rem);
}

/* Hero title & subtitle */
.hero-title {
  font-weight: 900;
  line-height: clamp(1.05, calc(1 + 0.1vw), 1.15);
  letter-spacing: clamp(-0.015em, calc(-0.01em - 0.15vw), -0.025em);
  font-size: clamp(2rem, calc(1.35rem + 3vw), 4rem);
}
.hero-subtitle {
  font-weight: 500;
  font-size: clamp(1.125rem, calc(1rem + 0.9vw), 1.75rem);
  line-height: 1.35;
  opacity: 0.9;
}

/* Kicker / Eyebrow sopra i titoli */
.kicker, .eyebrow, .overline {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: clamp(0.75rem, calc(0.7rem + 0.25vw), 0.875rem);
  opacity: 0.8;
}

/* Lead paragraph (intro) */
.lead {
  font-size: clamp(1.125rem, calc(1rem + 0.9vw), 1.5rem);
  line-height: clamp(1.45, calc(1.35 + 0.2vw), 1.6);
}

/* ---------- HEADER & NAV ---------- */
.header-brand {
  font-weight: 800;
  font-size: clamp(1.125rem, calc(1rem + 0.6vw), 1.5rem);
  letter-spacing: -0.01em;
}
.nav {
  display: flex; gap: clamp(0.5rem, calc(0.25rem + 1vw), 1.5rem);
}
.nav-link {
  font-size: clamp(0.95rem, calc(0.9rem + 0.35vw), 1.05rem);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.nav-link:is(:hover,:focus-visible){ text-decoration: underline; }

/* ---------- FOOTER ---------- */
.footer-heading {
  font-weight: 800;
  font-size: clamp(1rem, calc(0.95rem + 0.5vw), 1.25rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.footer-link {
  font-size: clamp(0.9rem, calc(0.85rem + 0.25vw), 1rem);
  opacity: 0.9;
}
.footer-copy {
  font-size: clamp(0.8rem, calc(0.75rem + 0.25vw), 0.95rem);
  opacity: 0.7;
}

/* ---------- TESTI DI SUPPORTO ---------- */
.meta {
  font-size: clamp(0.8rem, calc(0.75rem + 0.25vw), 0.95rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.7;
}
.caption {
  font-size: clamp(0.8rem, calc(0.75rem + 0.25vw), 0.95rem);
  line-height: 1.4;
  opacity: 0.85;
}
.badge, .tag {
  font-size: clamp(0.75rem, calc(0.7rem + 0.25vw), 0.875rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.button-text {
  font-size: clamp(0.95rem, calc(0.9rem + 0.35vw), 1.05rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Code & Blockquote */
.code, code, pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.9rem, calc(0.85rem + 0.25vw), 1rem);
}
.blockquote, blockquote {
  font-size: clamp(1.05rem, calc(0.95rem + 0.6vw), 1.35rem);
  line-height: 1.5;
  font-style: italic;
}

/* ---------- COMPONENTI DATI / STATISTICHE ---------- */
.stat-value {
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, calc(1.25rem + 2.2vw), 3rem);
  line-height: 1.05;
}
.stat-label {
  font-size: clamp(0.8rem, calc(0.75rem + 0.25vw), 0.95rem);
  opacity: 0.75;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- OVERRIDE RAPIDI PER H1–H6 ESISTENTI (Basi dal tuo sistema) ---------- */
.h1      { font-size: clamp(var(--h1-min), calc(var(--h1-min) + (var(--h1-max) - var(--h1-min)) * var(--fluid-basis)), var(--h1-max)); }
.h2      { font-size: clamp(var(--h2-min), calc(var(--h2-min) + (var(--h2-max) - var(--h2-min)) * var(--fluid-basis)), var(--h2-max)); }
.h3      { font-size: clamp(var(--h3-min), calc(var(--h3-min) + (var(--h3-max) - var(--h3-min)) * var(--fluid-basis)), var(--h3-max)); }
.h4      { font-size: clamp(var(--h4-min), calc(var(--h4-min) + (var(--h4-max) - var(--h4-min)) * var(--fluid-basis)), var(--h4-max)); }
.h5      { font-size: clamp(var(--h5-min), calc(var(--h5-min) + (var(--h5-max) - var(--h5-min)) * var(--fluid-basis)), var(--h5-max)); }
.h6      { font-size: clamp(var(--h6-min), calc(var(--h6-max) - (var(--h6-max) - var(--h6-min)) * (1 - var(--fluid-basis))), var(--h6-max)); }
.p       { font-size: clamp(var(--body-min), calc(var(--body-min) + (var(--body-max) - var(--body-min)) * var(--fluid-basis)), var(--body-max)); }

/* ---------- VARIANTI DI ACCENTO ---------- */
.accent         { color: var(--accent-color); font-weight: var(--accent-weight); }
.accent-subtle  { color: color-mix(in hsl, var(--accent-color), white 30%); }
.accent-strong  { color: color-mix(in hsl, var(--accent-color), black 20%); }
.accent-underline { text-decoration: underline; text-underline-offset: 0.15em; }

/* ---------- CONTESTI: HEADER / HERO / FOOTER ---------- */
.header-title  { composes: h2; } /* se il tuo build non supporta 'composes', duplica la regola .h2 */
.footer-title  { composes: h5; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-cta      { composes: button-text; }

/* ---------- CONTENITORI STRETTI (container queries) ---------- */
@container (max-width: 50rem) {
  .display     { font-size: clamp(2rem, calc(1.4rem + 3vw), 4rem); }
  .hero-title  { font-size: clamp(1.75rem, calc(1.25rem + 2.5vw), 3.25rem); }
  .lead        { font-size: clamp(1.0625rem, calc(0.95rem + 0.8vw), 1.375rem); }
}

/* ---------- FALLBACK SENZA clamp ---------- */
@supports not (font-size: clamp(1rem, 1vw, 2rem)) {
  .display     { font-size: 2.5rem; }
  .hero-title  { font-size: 2rem; }
  .hero-subtitle { font-size: 1.125rem; }
  .kicker,.eyebrow,.overline { font-size: 0.75rem; }
  .lead        { font-size: 1.125rem; }
  .header-brand{ font-size: 1.25rem; }
  .nav-link    { font-size: 1rem; }
  .footer-heading { font-size: 1rem; }
  .footer-copy { font-size: 0.85rem; }
  .meta,.caption,.badge,.tag,.button-text,.code { font-size: 0.9rem; }
  .stat-value  { font-size: 2rem; }
  .stat-label  { font-size: 0.85rem; }
}