@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&display=swap');

body {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  color: var(--text-main);
  line-height: var(--lh-relaxed);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}

h1 {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-none);
}

h2 {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
}

h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
}

h4, h5, h6 {
  font-weight: var(--fw-bold);
}

p {
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  color: var(--text-main);
}

a {
  color: var(--color-primary-500);
}

a:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  h1 { font-size: var(--fs-6xl); }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--fs-7xl); }
  h2 { font-size: var(--fs-4xl); }
}