@font-face {
  font-family: "Inter web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-Regular.woff2?v=3.15") format("woff2"),
    url("/fonts/Inter-Regular.woff?v=3.15") format("woff");
}

@font-face {
  font-family: "Inter web";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter-SemiBold.woff2?v=3.15") format("woff2"),
    url("/fonts/Inter-SemiBold.woff?v=3.15") format("woff");
}

@font-face {
  font-family: "Inter web";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/fonts/Inter-ExtraLight.woff2?v=3.15") format("woff2"),
    url("/fonts/Inter-ExtraLight.woff?v=3.15") format("woff");
}

@font-face {
  font-family: "Inter web italic";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-Italic.woff2?v=3.15") format("woff2"),
    url("/fonts/Inter-Italic.woff?v=3.15") format("woff");
}

@font-face {
  font-family: "Inter web italic";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter-SemiBoldItalic.woff2?v=3.15") format("woff2"),
    url("/fonts/Inter-SemiBoldItalic.woff?v=3.15") format("woff");
}

@font-face {
  font-family: "Inter var";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url("/fonts/Inter-roman.var.woff2?v=3.15") format("woff2");
}

.sans {
  font-family: var(--font-family-sans);
}

.bold {
  font-weight: var(--font-weight-3);
}

.italic {
  font-style: italic;
}

p {
  margin: 0;
}

p + * {
  margin-top: var(--spacing-2);
}

.text-sm,
small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.text-base,
p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.text-md,
h3 {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-3);
}

.text-lg,
h2 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  font-weight: var(--font-weight-3);
}

.text-xl,
h1 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  font-weight: var(--font-weight-2);
}

.text-hero-xl {
  font-size: var(--font-size-hero-1);
  line-height: var(--line-height-hero-1);
  font-weight: var(--font-weight-1);
}

.text-hero-base {
  font-size: var(--font-size-hero-2);
  line-height: var(--line-height-hero-2);
}

h1 {
  margin-bottom: var(--spacing-2);
}

h2,
h3,
h4,
h5 {
  margin-bottom: var(--spacing-1);
}

* + h1,
* + h2,
* + h3,
* + h4,
* + h5 {
  margin-top: var(--spacing-3);
}

.regular {
  font-weight: var(--font-weight-2);
}

.bold,
strong {
  font-weight: var(--font-weight-3);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-light {
  color: var(--color-gray-100);
}

.text-muted {
  color: var(--color-gray-600);
}

/* Legacy, to be removed */

.xsmall {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.small {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.medium {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-3);
}

.large {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  font-weight: var(--font-weight-3);
}

.xlarge {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  font-weight: var(--font-weight-2);
}