@import "mixins";

@font-face {
  font-family: "Libre Caslon Condensed";
  src:
    url("/fonts/LibreCaslonCondensed.woff2") format("woff2 supports variations"),
    url("/fonts/LibreCaslonCondensed.woff2") format("woff2-variations"),
    url("/fonts/LibreCaslonCondensed.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Roobert";
  src:
    url("/fonts/Roobert.woff2") format("woff2 supports variations"),
    url("/fonts/Roobert.woff2") format("woff2-variations"),
    url("/fonts/Roobert.woff") format("woff-variations"),
    url("/fonts/Roobert.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Regular.woff") format("woff");
  font-weight: 450;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "PP Editorial New";
  src: url("/fonts/PPEditorialNew-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "PP Editorial New";
  src: url("/fonts/PPEditorialNew-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

h1,
h2,
h3,
h4,
h5,
p,
a,
span,
div,
input,
textarea,
label,
select,
button {
  @include type-item(body);
}

p,
span,
div,
input,
textarea,
label,
select,
button {
  font-size: font-size(body);
  line-height: line-height(body);
}

b,
strong {
  font-weight: font-weight(medium);
}

i,
em {
  font-style: italic;
}

a {
  text-decoration: none;
  cursor: pointer;
}

button {
  cursor: pointer;
}

h1,
.h1,
.heading-1 {
  @include type-item(heading-1);
}

h2,
.h2,
.heading-2 {
  @include type-item(heading-2);
}

h3,
.h3,
.heading-3 {
  @include type-item(heading-3);
}

h4,
.h4,
.heading-4 {
  @include type-item(heading-4);
}

h5,
.h5,
.heading-5 {
  @include type-item(heading-5);
}

h6,
.h6,
.heading-6 {
  @include type-item(heading-6);
}

p,
.p,
.body {
  @include type-item(body);
}

.body-medium {
  @include type-item(body-medium);
}

.body-bold {
  @include type-item(body-bold);
}

small,
.small {
  @include type-item(small);
}

code,
.code {
  @include type-item(code);
}

.fluid-headline {
  @include type-item(fluid-headline);
}

blockquote {
  border-left: 1px solid color(orange);
  padding-inline: spacer(4);
  quotes: "“" "”" "'" "'";

  p {
    @include type-item(body-bold);
  }

  footer {
    @include type-item(body-bold);
    margin-top: 1rem;

    &:before {
      content: "–";
      margin-right: 1rem;
    }
  }
}

span {
  @include inherit-type;
  color: currentColor;
}