@font-face {
  font-family: "DDC Biden Bold";
  src: url("assets/biden-bold-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aghast";
  src: url("assets/Aghast-Regular-Webfont-Kit/Aghast-Regular.woff2") format("woff2"),
       url("assets/Aghast-Regular-Webfont-Kit/Aghast-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono — self-hosted (latin subset) for monospace labels.
   Three real weights so we don't rely on synthetic bold. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/ibm-plex-mono/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-black-green-text: #35443B;
  --color-dark-green: #4C8D73;
  --color-medium-green: #8BB5A0;
  --color-light-green: #D1DFCB;
  --color-pale-green: #EDF3E3;
  --color-red: #C92F1F;
  --color-white: #FFFFFF;

  --page-bg: var(--color-pale-green);
  --text-default: var(--color-black-green-text);
  --text-on-dark: var(--color-pale-green);

  --canvas-width: 1440px;
  --content-inset: 220px;

  --font-display: "DDC Biden Bold", "Anton", "Arial Narrow", Impact, sans-serif;
  --font-body: "Aghast", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --button-radius: 5px;
  --button-height: 25px;
}