/* ===================================
   DESIGN TOKENS (tipografia)
   =================================== */
:root{
  /* Famiglie/font-weight */
  --fw-100: 100; --fw-200: 200; --fw-300: 300; --fw-400: 400; --fw-500: 500;
  --fw-600: 600; --fw-700: 700; --fw-800: 800; --fw-900: 900;

  /* Font size – desktop (max) */
  --fs-h1-max: 72px;
  --fs-h2-max: 48px;
  --fs-h3-max: 36px;
  --fs-h4-max: 24px;
  --fs-h5-max: 20px;
  --fs-h6-max: 16px;
  --fs-p-max: 18px;
  --fs-text1-max: 32px;
  --fs-text2-max: 24px;
  --fs-text3-max: 14px;
  --fs-text4-max: 16px;  /* desktop */

  /* Font size – mobile (min) */
  --fs-h1-min: 40px;
  --fs-h2-min: 32px;
  --fs-h3-min: 36px;  /* invariato rispetto al desktop */
  --fs-h4-min: 24px;  /* invariato rispetto al desktop */
  --fs-h5-min: 20px;  /* invariato rispetto al desktop */
  --fs-h6-min: 16px;  /* invariato rispetto al desktop */
  --fs-p-min: 15px;
  --fs-text1-min: 26px;
  --fs-text2-min: 18px;
  --fs-text3-min: 12px;
  --fs-text4-min: 15px;  /* mobile */

  /* Font size – fluidi (usano min/max sopra) */
  --fs-h1: clamp(var(--fs-h1-min), 6vw, var(--fs-h1-max));
  --fs-h2: clamp(var(--fs-h2-min), 4.2vw, var(--fs-h2-max));
  --fs-h3: clamp(var(--fs-h3-min), 3vw, var(--fs-h3-max));
  --fs-h4: clamp(var(--fs-h4-min), 2vw, var(--fs-h4-max));
  --fs-h5: clamp(var(--fs-h5-min), 1.6vw, var(--fs-h5-max));
  --fs-h6: clamp(var(--fs-h6-min), 1.2vw, var(--fs-h6-max));
  --fs-p: var(--fs-p-max);
  --fs-text1: clamp(var(--fs-text1-min), 3vw, var(--fs-text1-max));
  --fs-text2: clamp(var(--fs-text2-min), 2.2vw, var(--fs-text2-max));
  --fs-text3: clamp(var(--fs-text3-min), 1.2vw, var(--fs-text3-max));
  --fs-text4: clamp(var(--fs-text4-min), 1vw, var(--fs-text4-max));
}

/* ===================================
   TYPOGRAFIA BASE
   =================================== */
body {
  font-size: 16px;
  line-height: 120%;
}

/* ===================================
   IMPOSTAZIONI BASE
   =================================== */
h1,h2,h3,h4,h5,h6,p,a{
  margin:0px;
  padding:0px;
  white-space: normal;
  word-break: normal;
  max-width: 100%;
}

h1,h2,h3,h4,h5,h6{
  color: var(--color-third-100);
}

p,label{
  color: var(--color-secondary-300);
}

/* ===================================
   TITOLI (tag)
   =================================== */
h1 {
  font-size: var(--fs-h1);
  line-height: 100%;
  font-weight: var(--fw-700);
  font-family: var(--primary-font);
  letter-spacing: -0.015em;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 120%;
  letter-spacing: -0.015em;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 120%;
  letter-spacing: -0.015em;
}
h4 {
  font-size: var(--fs-h4);
  line-height: 120%;
  letter-spacing: -0.015em;
}
h5 {
  font-size: var(--fs-h5);
  line-height: 120%;
}
h6 {
  font-size: var(--fs-h6);
  line-height: 120%;
}

/* ===================================
   HEADING VARIANTS (classi alternative)
   Uso:
   <h2 class="h1-2">Titolo</h2>
   <div class="h3-2">Titolo</div>
   =================================== */

/* H1 variants */
.h1-1{
  font-size: var(--fs-h1);
  line-height: 100%;
  font-weight: var(--fw-700);
  font-family: var(--primary-font);
  letter-spacing: -0.015em;
}
.h1-2{
  font-size: clamp(36px, 5vw, 60px);
  line-height: 105%;
  font-weight: var(--fw-700);
  font-family: var(--primary-font);
  letter-spacing: -0.015em;
}

/* H2 variants */
.h2-1{
  font-size: var(--fs-h2);
  line-height: 120%;
  font-weight: var(--fw-700);
  letter-spacing: -0.015em;
}
.h2-2{
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 120%;
  font-weight: var(--fw-700);
  letter-spacing: -0.015em;
}

/* H3 variants */
.h3-1{
  font-size: var(--fs-h3);
  line-height: 120%;
  font-weight: var(--fw-700);
  letter-spacing: -0.015em;
}
.h3-2{
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 125%;
  font-weight: var(--fw-700);
  letter-spacing: -0.01em;
}

/* H4 variants */
.h4-1{
  font-size: var(--fs-h4);
  line-height: 120%;
  font-weight: var(--fw-700);
  letter-spacing: -0.01em;
}
.h4-2{
  font-size: clamp(18px, 2vw, 22px);
  line-height: 130%;
  font-weight: var(--fw-700);
  letter-spacing: -0.005em;
}

/* H5 variants */
.h5-1{
  font-size: var(--fs-h5);
  line-height: 120%;
  font-weight: var(--fw-700);
}
.h5-2{
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 130%;
  font-weight: var(--fw-700);
}

/* H6 variants */
.h6-1{
  font-size: var(--fs-h6);
  line-height: 120%;
  font-weight: var(--fw-700);
}
.h6-2{
  font-size: clamp(14px, 1.2vw, 15px);
  line-height: 135%;
  font-weight: var(--fw-700);
}

/* ===================================
   PARAGRAFI
   =================================== */
p {
  font-size: var(--fs-p);
  line-height: 135%;
  letter-spacing: 0.025em;
}

.text-1{
  font-size: var(--fs-text1);
  line-height: 100%;
}
.text-2{
  font-size: var(--fs-text2);
  line-height: 125%;
}
.text-3{
  font-size: var(--fs-text3);
  letter-spacing: 0.05em;
  line-height: 100%;
}
.text-16{
  font-size: var(--fs-text4);
  line-height: 135%;
}
.text-18 {
  font-size: var(--fs-p-max); /* 18px */
  line-height: 135%;
}

/* ===================================
   LINK
   =================================== */
a{
  font-size: var(--fs-p);
  color: var(--color-third-100);
  cursor:pointer;
  line-height: 135%;
  text-decoration: underline;
  text-decoration-color: var(--color-secondary-500);
}
a:hover{
  text-decoration: underline;
  text-decoration-color: var(--color-third-100);
}
.a-primary{
  color: var(--color-primary-500);
  cursor:pointer;
  text-decoration: none;
}
.a-primary:hover{
  text-decoration: underline;
  text-decoration-color: var(--color-primary-500);
}
.primary-link{
  color: var(--color-secondary-200);
}

/* ===================================
   IMPOSTAZIONI UTILI
   =================================== */
.font-weight-100{ font-weight: var(--fw-100); }
.font-weight-200{ font-weight: var(--fw-200); }
.font-weight-300{ font-weight: var(--fw-300); }
.font-weight-400{ font-weight: var(--fw-400); }
.font-weight-500{ font-weight: var(--fw-500); }
.font-weight-600{ font-weight: var(--fw-600); }
.font-weight-700{ font-weight: var(--fw-700); }
.font-weight-800{ font-weight: var(--fw-800); }
.font-weight-900{ font-weight: var(--fw-900); }

/* COLORI DEI TESTI */
.text-primary{ color: var(--primary-color); }
.text-secondary{ color: var(--secondary-color); }
.text-third{ color: var(--third-color); }
.text-white{ color: var(--color-third-100); }
.text-black { color: var(--color-secondary-950); }
.text-no-color{ color: unset; }

/* ALLINEAMENTO TESTO */
.text-left{ text-align:left; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.italic{ font-style: italic; }
.underline{ text-decoration:underline; }
.no-underline{ text-decoration:none; }
.no-underline:hover{ text-decoration:none; }
.uppercase{ text-transform:uppercase; }

/* ===================================
   Responsive (mobile)
   =================================== */
@media screen and (max-width: 768px) {
  /* TITOLI (tag) */
  h1 { font-size: var(--fs-h1-min); }
  h2 { font-size: var(--fs-h2-min); }
  h3 { font-size: var(--fs-h3-min); }
  h4 { font-size: var(--fs-h4-min); }
  h5 { font-size: var(--fs-h5-min); }
  h6 { font-size: var(--fs-h6-min); }

  /* HEADING VARIANTS (classi) */
  .h1-1{ font-size: var(--fs-h1-min); }
  .h1-2{ font-size: 34px; }

  .h2-1{ font-size: var(--fs-h2-min); }
  .h2-2{ font-size: 26px; }

  .h3-1{ font-size: var(--fs-h3-min); }
  .h3-2{ font-size: 22px; }

  .h4-1{ font-size: var(--fs-h4-min); }
  .h4-2{ font-size: 18px; }

  .h5-1{ font-size: var(--fs-h5-min); }
  .h5-2{ font-size: 16px; }

  .h6-1{ font-size: var(--fs-h6-min); }
  .h6-2{ font-size: 14px; }

  /* TESTI */
  p { font-size: var(--fs-p-min); }

  .text-1{ font-size: var(--fs-text1-min); }
  .text-2{ font-size: var(--fs-text2-min); }
  .text-3{ font-size: var(--fs-text3-min); }
  .text-16{ font-size: var(--fs-text4-min); } /* 15px su mobile */

  a { font-size: var(--fs-p-min); }
}