/*  Fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://rsms.me/inter/font-files/Inter-Regular.woff2?3.13') format('woff2'),
    url('https://rsms.me/inter/font-files/Inter-Regular.woff?3.13') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://rsms.me/inter/font-files/Inter-SemiBold.woff2?3.13') format('woff2'),
    url('https://rsms.me/inter/font-files/Inter-SemiBold.woff?3.13') format('woff');
}

/* Text utilities */

h1,
.h1 {
  line-height: var(--line-height-large);
  font-size: var(--text-size-x-large);
  font-weight: var(--text-weight-bold);
  margin: var(--size-xxx-small) 0;
  color: hsl(var(--color-invert-1));
}

h3,
.h3 {
  font-size: var(--text-size-large);
  line-height: var(--line-height-large);
  font-weight: var(--text-weight-bold);
  margin: var(--size-xx-small) 0;
  color: hsl(var(--color-invert-1));
}

h3,
.h3 {
  line-height: var(--line-height-large);
  font-size: var(--text-size-medium);
  font-weight: var(--text-weight-bold);
  margin: var(--size-xx-small) 0;
  color: hsl(var(--color-invert-1));
}

.small {
  line-height: var(--line-height-small);
  font-size: var(--text-size-small);
  font-weight: var(--text-weight-normal);
  color: hsl(var(--color-invert-3));
}

.caption {
  line-height: var(--line-height-small);
  font-size: var(--text-size-x-small);
  font-weight: var(--text-weight-normal);
  margin: 0;
  color: hsl(var(--color-invert-3));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
