/* Line-height & font size are inversely proportinal */
/* Stick to 2 color, size, weight */
/* Use `clamp()` for headings — they need the most scaling */

@font-face {
  font-family: "inter";
  src: url("/public/fonts/inter-var.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 600;
}

@font-face {
  font-family: "JetBrainsMono";
  src: url("/public/fonts/JetBrainsMono.ttf") format("woff2");
  font-display: swap;
  font-weight: 400 600;
}

h1 {
  font-size: var(--text-4xl);
  /* font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); */
  line-height: 1.1;
  font-weight: 600;
}

h2 {
  line-height: 1.2;
  font-size: var(--text-3xl);
  font-weight: 500;
}

h3 {
  font-size: var(--text-2xl);
  line-height: 1.3;
  font-weight: 500;
}

h4 {
  font-size: var(--text-xl);
  line-height: 1.4;
  font-weight: 500;
}

h5 {
  font-size: var(--text-lg);
  line-height: 1.5;
  font-weight: 500;
}

h6 {
  font-size: var(--text-base);
  line-height: 1.5;
  font-weight: 500;
}

p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--neutral-700);
}