/* Basisinstellingen */
html {
  font-size: 14px; /* Standaard 1rem = 14px */
  scroll-behavior: smooth;
}

/* Dynamische basis lettergrootte die meeschalend werkt */
body {
  line-height: 1.6;
  font-size: clamp(0.8125rem, 1.9vw, 1.0625rem);
}

/* Koppen met dynamische groottes */
h1 {
  font-size: clamp(1.875rem, 4.75vw, 2.875rem);
  font-weight: 700;
}
h2 {
  font-size: clamp(1.625rem, 3.75vw, 2.375rem);
  font-weight: 700;
}
h3 {
  font-size: clamp(1.375rem, 3.25vw, 1.875rem);
  font-weight: 600;
}
h4 {
  font-size: clamp(1.1875rem, 2.75vw, 1.625rem);
  font-weight: 600;
}
h5 {
  font-size: clamp(1.0625rem, 2.25vw, 1.4375rem);
  font-weight: 500;
}
h6 {
  font-size: clamp(0.9375rem, 1.9vw, 1.1875rem);
  font-weight: 500;
}

/* Paragrafen */
p {
  font-size: clamp(0.9375rem, 1.9vw, 1.0025rem);
}
.p-small {
  font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
}
.p-x-small {
  font-size: clamp(0.6875rem, 1.1vw, 0.8125rem);
}
.p-xx-small {
  font-size: clamp(0.5625rem, 0.95vw, 0.6875rem);
}

/* Lijsten */
li {
  font-size: clamp(0.9375rem, 1.9vw, 1.0625rem);
}

/* Links */
a {
  font-size: inherit;
}

/* Knoppen */
button {
  font-size: clamp(0.9375rem, 1.9vw, 1.0625rem);
}

/* Responsive typografie */

/* Voor zeer kleine schermen (< 400px) */
@media (max-width: 400px) {
  html {
    font-size: 12.5px;
  }
}

/* Voor tablets en middelgrote schermen (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  html {
    font-size: 13.5px;
  }
}

/* Voor grote schermen (> 1200px) */
@media (min-width: 1200px) {
  html {
    font-size: 16.5px;
  }
}