📐 Responsive Font Scaling with clamp() – Tailwind Style

/* Base font size formula using clamp:
   clamp(min, scaling formula, max)
   Example: clamp(16px, 1vw + 1rem, 20px)
*/

html {
  font-size: clamp(16px, 1vw + 0.5rem, 20px);
}

/* Body and global elements */
body,
p,
span,
a,
div,
li,
label,
input,
button,
textarea {
  font-size: 1rem; /* 1rem is now fluid because of html clamp */
  line-height: 1.6;
}

/* Headings with scalable formulas */
h1 {
  font-size: clamp(2.5rem, 6vw + 1rem, 4.5rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  line-height: 1.25;
}

h3 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
  line-height: 1.3;
}

h4 {
  font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
  line-height: 1.35;
}

h5 {
  font-size: clamp(1.25rem, 2.5vw + 1rem, 2rem);
  line-height: 1.4;
}

h6 {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
  line-height: 1.5;
}