/* Local Optima for the main site; self-hosted DM Sans for reading pages. */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/previews/dm-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Site Optima";
  src: local("Optima Pro Roman"), local("OptimaPro-Roman"),
       local("Optima LT Pro Roman"), local("OptimaLTPro-Roman"),
       local("Optima-Regular"), local("Optima Regular"), local("Optima"),
       local("Optima LT Roman"), local("OptimaLT");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Site Optima";
  src: local("Optima Pro Italic"), local("OptimaPro-Italic"),
       local("Optima LT Pro Italic"), local("OptimaLTPro-Italic"),
       local("Optima-Italic"), local("Optima Italic");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Site Optima";
  src: local("Optima Pro Bold"), local("OptimaPro-Bold"),
       local("Optima LT Pro Bold"), local("OptimaLTPro-Bold"),
       local("Optima-Bold"), local("Optima Bold");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --site-font: "Site Optima", Candara, "Noto Sans", "Segoe UI", sans-serif;
  --site-reading-font: "DM Sans", "Segoe UI", sans-serif;
  --site-body-font: var(--site-font);
  --site-heading-font: var(--site-font);
}

.reading-content {
  --site-body-font: var(--site-reading-font);
  --site-heading-font: var(--site-reading-font);
  font-family: var(--site-body-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--site-heading-font);
  font-weight: 700;
}

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