body,
.body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  text-transform: none;
}

h1,
.type-h1 {
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-transform: none;
}

h2,
.type-h2 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-transform: none;
}

h3,
.type-h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-transform: none;
}

.body-large {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
  text-transform: none;
}

.body-small {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.body-tiny {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-transform: none;
}

.caption {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.body--strong,
.body-large--strong,
.body-small--strong,
.body-tiny--strong,
.caption--strong {
  font-weight: 700;
}

.body--primary,
.body-large--primary,
.body-small--primary,
.body-tiny--primary,
.caption--primary {
  color: var(--text-primary);
}

.body--muted,
.body-large--muted,
.body-small--muted,
.body-tiny--muted,
.caption--muted {
  color: var(--text-muted);
}

.body--subtle,
.body-large--subtle,
.body-small--subtle,
.body-tiny--subtle,
.caption--subtle {
  color: var(--text-subtle);
}

button,
input,
select,
textarea {
  font: inherit;
}

a,
a[class],
button,
button[class],
.button,
[role='button'],
[type='button'],
[type='reset'],
[type='submit'] {
  font-family: var(--font-display);
}

@media (min-width: 768px) {
  h1,
  .type-h1 {
    font-size: 2.75rem;
  }

  h2,
  .type-h2 {
    font-size: 2.625rem;
  }

  h3,
  .type-h3 {
    font-size: 1.625rem;
  }

  .body-large {
    font-size: 1.1875rem;
  }

  .body-small {
    font-size: 1rem;
  }

  .body-tiny {
    font-size: 0.875rem;
  }
}

@media (min-width: 1280px) {
  h1,
  .type-h1 {
    font-size: 4rem;
  }

  h2,
  .type-h2 {
    font-size: 2.875rem;
  }

  h3,
  .type-h3 {
    font-size: 1.75rem;
  }

  .body-large {
    font-size: 1.25rem;
  }

  body,
  .body {
    font-size: 1.125rem;
  }
}