/* =========================
   INTER
========================= */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================
   MERRIWEATHER
========================= */

@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================
   MERRIWEATHER SANS
========================= */

@font-face {
  font-family: "Merriweather Sans";
  src: url("../fonts/MerriweatherSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather Sans";
  src: url("../fonts/MerriweatherSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather Sans";
  src: url("../fonts/MerriweatherSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather Sans";
  src: url("../fonts/MerriweatherSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather Sans";
  src: url("../fonts/MerriweatherSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather Sans";
  src: url("../fonts/MerriweatherSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* =========================
   VARIABLES
========================= */

:root {
  --font-sans: "Merriweather Sans", sans-serif;
  --font-serif: "Merriweather", serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
}

/* =========================
   BASE TYPOGRAPHY
========================= */

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
}

p,
span,
a,
button {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
}

section h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
}

section p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
}

.font-mw {
  font-family: var(--font-serif);
}

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

.font-inter {
  font-family: "Inter", sans-serif;
}