@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter V";
  src: url("../assets/fonts/InterV.woff2") format("woff2-variations"),
       url("../assets/fonts/InterV.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font: var(--type-body);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, .h1 {
  font: var(--type-h1);
  letter-spacing: -0.02em;
  font-size: clamp(44px, 6vw, 77px);
  line-height: 1.05;
}
h2, .h2 {
  font: var(--type-h2);
  letter-spacing: -0.02em;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.08;
}
h3, .h3 {
  font: var(--type-h3);
  letter-spacing: -0.03em;
  font-size: clamp(26px, 3vw, 37px);
  line-height: 1.25;
}
h4, .h4 {
  font: var(--type-h4);
  letter-spacing: -0.03em;
}
h5, .h5 { font: var(--type-h5); }
h6, .h6 {
  font: var(--type-h6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-brand   { color: var(--color-brand); }
.text-center  { text-align: center; }

.lead { font: var(--type-h5); color: var(--color-text-muted); }