@font-face {
  font-family: "Zalando Sans Expanded";
  src: url("./assets/fonts/zalando-sans-expanded-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Zalando Sans Expanded";
  src: url("./assets/fonts/zalando-sans-expanded-italic-variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "BRBN Pro";
  src: url("./assets/fonts/brbn-pro-air.ttf") format("truetype");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "BRBN Pro";
  src: url("./assets/fonts/brbn-pro-thin.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "BRBN Pro";
  src: url("./assets/fonts/brbn-pro-light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "BRBN Pro";
  src: url("./assets/fonts/brbn-pro-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "BRBN Pro";
  src: url("./assets/fonts/brbn-pro-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "BRBN Pro";
  src: url("./assets/fonts/brbn-pro-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "BRBN Pro";
  src: url("./assets/fonts/brbn-pro-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "BRBN Pro";
  src: url("./assets/fonts/brbn-pro-black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --font-heading: "Zalando Sans Expanded", sans-serif;
  --font-body: "BRBN Pro", sans-serif;
  --color-ink: #1a2730;
  --color-charcoal: #424048;
  --color-slate: #45586c;
  --color-ice: #b3cee3;
  --color-rust: #a63e1b;
  --color-orange: #e85e2c;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-optical-sizing: auto;
}

p {
  font-weight: 500;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6, .subheading {
  font-family: var(--font-heading);
}

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