:root {
  /* Base font size for calculations */
  --base-font-size: 16px;

  /* Responsive font sizes using clamp() for fluid scaling */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);

  /* Headings with responsive scaling */
  --font-size-h1: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --font-size-h2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --font-size-h3: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --font-size-h4: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --font-size-h5: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --font-size-h6: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
}

body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

a {
  font-size: var(--font-size-base) !important;
}

a.base {
  font-size: var(--font-size-base) !important;
}

h1,
.h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-tight);
}

h2,
.h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
}

h3,
.h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-tight);
}

h4,
.h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-base);
}

h5,
.h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-base);
  margin-bottom: 0.75rem;
}

h6,
.h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-base);
}