/**
 * FLUID TYPOGRAPHY SYSTEM
 *
 * Sistema di tipografia fluida utilizzando clamp() per una scalabilità
 * perfetta tra 320px (mobile) e 1440px (desktop large).
 *
 * Formula clamp(): clamp(MIN, PREFERRED, MAX)
 * - MIN: valore minimo a 320px
 * - PREFERRED: valore che scala fluidamente con il viewport (vw + base rem)
 * - MAX: valore massimo a 1440px
 *
 * Calcolo del valore centrale (PREFERRED):
 * PREFERRED = MIN_rem + (MAX_rem - MIN_rem) * ((100vw - 320px) / (1440 - 320))
 * Semplificato in: MIN_rem + DIFF_rem * ((100vw - 20rem) / 70)
 *
 * Esempio per h1:
 * MIN = 2rem (32px)
 * MAX = 4rem (64px)
 * DIFF = 2rem
 * PREFERRED = 2rem + 2 * ((100vw - 20rem) / 70) ≈ 2rem + 2.857vw
 */

:root {
  /* Base font-size: 16px (default browser) */
  --fluid-min-width: 320;  /* px */
  --fluid-max-width: 1440; /* px */
  --fluid-min-size: 20;    /* rem (320px / 16) */
  --fluid-max-size: 90;    /* rem (1440px / 16) */
  --fluid-range: 70;       /* (1440 - 320) / 16 */
}

/**
 * H1 - Titoli principali
 * Mobile (320px): 32px (2rem)
 * Desktop (1440px): 64px (4rem)
 * Crescita: 32px su 1120px di range = 2.857vw
 */
h1 {
  font-size: clamp(2rem, 2rem + 2.857vw, 4rem);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/**
 * H2 - Sottotitoli sezione
 * Mobile (320px): 24px (1.5rem)
 * Desktop (1440px): 48px (3rem)
 * Crescita: 24px su 1120px di range = 2.143vw
 */
h2 {
  font-size: clamp(1.5rem, 1.5rem + 2.143vw, 3rem);
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

/**
 * H3 - Titoli card/box
 * Mobile (320px): 20px (1.25rem)
 * Desktop (1440px): 32px (2rem)
 * Crescita: 12px su 1120px di range = 1.071vw
 */
h3 {
  font-size: clamp(1.25rem, 1.25rem + 1.071vw, 2rem);
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 1rem;
}

/**
 * P - Paragrafi body text
 * Mobile (320px): 16px (1rem)
 * Desktop (1440px): 18px (1.125rem)
 * Crescita: 2px su 1120px di range = 0.179vw
 */
p {
  font-size: clamp(1rem, 1rem + 0.179vw, 1.125rem);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/**
 * SMALL - Testo piccolo (note, caption, metadata)
 * Mobile (320px): 14px (0.875rem)
 * Desktop (1440px): 16px (1rem)
 * Crescita: 2px su 1120px di range = 0.179vw
 */
small, .small-text {
  font-size: clamp(0.875rem, 0.875rem + 0.179vw, 1rem);
  line-height: 1.5;
}

/**
 * CLASSI UTILITY PER OVERRIDE
 */
.text-xs {
  font-size: clamp(0.75rem, 0.75rem + 0.179vw, 0.875rem);
}

.text-sm {
  font-size: clamp(0.875rem, 0.875rem + 0.179vw, 1rem);
}

.text-base {
  font-size: clamp(1rem, 1rem + 0.179vw, 1.125rem);
}

.text-lg {
  font-size: clamp(1.125rem, 1.125rem + 0.536vw, 1.5rem);
}

.text-xl {
  font-size: clamp(1.25rem, 1.25rem + 1.071vw, 2rem);
}

.text-2xl {
  font-size: clamp(1.5rem, 1.5rem + 2.143vw, 3rem);
}

.text-3xl {
  font-size: clamp(2rem, 2rem + 2.857vw, 4rem);
}

/**
 * RESPONSIVE BREAKPOINTS (optional override)
 * Usa queste classi se vuoi forzare una dimensione fissa a certi breakpoint
 */
@media (max-width: 320px) {
  /* Blocca la dimensione minima sotto 320px */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  p { font-size: 1rem; }
  small { font-size: 0.875rem; }
}

@media (min-width: 1440px) {
  /* Blocca la dimensione massima sopra 1440px */
  h1 { font-size: 4rem; }
  h2 { font-size: 3rem; }
  h3 { font-size: 2rem; }
  p { font-size: 1.125rem; }
  small { font-size: 1rem; }
}

/**
 * COME USARE QUESTO FILE:
 *
 * 1. Includi questo CSS nelle tue pagine PRIMA dei CSS specifici:
 *    <link rel="stylesheet" href="/css/vw_welcome/fluid-typography.css">
 *
 * 2. I tag h1, h2, h3, p, small scaleranno automaticamente
 *
 * 3. Usa le classi utility per override specifici:
 *    <p class="text-lg">Testo più grande</p>
 *    <span class="text-xs">Testo piccolo</span>
 *
 * 4. Se hai bisogno di override specifici per una pagina,
 *    definiscili nel CSS della pagina DOPO questo file
 */