$font-sizes: (
  h1: 3.3125rem,
  h2: 2rem,
  h3: 1.5rem,
  h4: 1.125rem,
  h5: 1.125rem,
  h6: 1rem,
  paragraph: 1rem,
  small: 0.875rem,
) !default;

$line-heights: (
  h1: 1.03em,
  h2: 1.09em,
  h3: 1.04em,
  h4: 1.11em,
  h5: 1.11em,
  // used for labels
  h6: 1.5em,
  paragraph: 1.14em,
  small: 1.25em,
) !default;

@use "../utils/breakpoints";
@use "../utils/typography" as * with (
  $-font-sizes: $font-sizes,
  $-line-heights: $line-heights
);

:root {
  font-family: "Inter", sans-serif;
  font-size: 100%; // defaults to 16px
  color: var(--site-text-color);

  /* Text-size styles */
  /* base size: paragraph (16px) */
  --heading--h1: #{font-size(h1)};
  --heading--h2: #{font-size(h2)};
  --heading--h3: #{font-size(h3)};
  --heading--h4: #{font-size(h4)};
  --heading--h5: #{font-size(h5)};
  --heading--h6: #{font-size(h6)};
  --paragraph: #{font-size(paragraph)};
  --paragraph--strong: #{font-size(paragraph)};
  --paragraph--em: #{font-size(paragraph)};
  --paragraph--small: #{font-size(small)};
  --text-width: 70ch;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: "Inter var", sans-serif;
  }
}

h1,
.heading-one {
  font-size: var(--heading--h1);
  font-weight: 400;
  line-height: line-height(h1);
  margin-bottom: 0.25em;
  letter-spacing: -0.015em;
  color: var(--site-text-color);
}

h2,
.heading-two {
  font-size: var(--heading--h2);
  font-weight: 400;
  line-height: line-height(h2);
  margin-bottom: 0.25em;
  letter-spacing: -0.015em;
  color: var(--site-text-color);
}

h3,
.heading-three {
  font-size: var(--heading--h3);
  font-weight: 400;
  line-height: line-height(h3);
  margin: 0 0 0.25em;
  letter-spacing: -0.015em;
  color: var(--site-text-color);
}

h4,
.heading-four {
  font-size: var(--heading--h4);
  font-weight: 400;
  line-height: line-height(h4);
  margin: 0 0 0.25em;
  letter-spacing: -0.015em;
  color: var(--site-text-color);
}

h5,
.heading-five {
  font-size: var(--heading--h5);
  font-weight: 400;
  line-height: line-height(h5);
  margin: 0 0 0.25em;
  letter-spacing: -0.015em;
  color: var(--site-text-color);
}

h6,
.heading-six {
  font-size: var(--heading--h6);
  font-weight: 400; // Bold
  line-height: line-height(h6);
  margin: 0 0 0.25em;
  letter-spacing: -0.015em;
  color: var(--site-text-color);
}

label {
  font-size: var(--heading-h6);
  font-weight: 500; // Bold
  line-height: line-height(h6);
  margin-bottom: 0.125rem;
  letter-spacing: 0.01em;
  color: var(--site-text-color);
}

p,
.body-one {
  font-size: var(--paragraph);
  line-height: line-height(paragraph);
  letter-spacing: 0.01em;
  color: var(--site-text-color);
}

small,
em {
  font-size: var(--paragraph--em);
  line-height: line-height(paragraph);
  letter-spacing: 0.01em;
  font-weight: 300;
  color: var(--site-text-color);
}

strong {
  font-size: var(--paragraph--strong);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--site-text-color);
}

h1,
h2,
h3,
h4,
p,
small,
legend,
label,
input,
textarea {
  max-width: var(--text-width);
}