/* =========================
   Local Fonts
   ========================= */

/* OSWALD */
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-400.woff2') format('woff2');
  font-weight: 400;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-500.woff2') format('woff2');
  font-weight: 500;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-700.woff2') format('woff2');
  font-weight: 700;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

/* ROBOTO */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-400.woff2') format('woff2');
  font-weight: 400;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-500.woff2') format('woff2');
  font-weight: 500;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-700.woff2') format('woff2');
  font-weight: 700;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}


/* =========================
   Typography System (Static)
   ========================= */

:root {
  --primary-font: 'Oswald', var(--zeitfresser-heading-fallback);
  --secondary-font: 'Roboto', sans-serif;

  --site-identity-font-size: 40px;

  --font-weight: 400;
  --line-height: 1.6;
}


/* =========================
   Base Typography
   ========================= */

body,
p,
div,
span,
article,
section,
li,
input,
textarea,
button {
  font-family: var(--secondary-font);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}


/* =========================
   Headlines (Hierarchy Fix)
   ========================= */

h1, h2, h3, h4, h5, h6,
.entry-title {
  font-family: var(--primary-font);
  font-weight: 500;
  line-height: 1.3;
}


/* =========================
   Site Title (Branding)
   ========================= */

.site-title,
.site-title a {
  font-family: var(--primary-font);
  font-size: var(--site-identity-font-size);
  font-weight: 700;
  line-height: 1.2;
}


/* =========================
   Secondary Text
   ========================= */

.site-description,
.entry-content,
.news-snippet .excerpt {
  font-family: var(--secondary-font);
}