@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/space-grotesk-500-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-500-700-latin.woff2") format("woff2");
}

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

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

:root {
  /* warm paper palette */
  --bg: #f4f1e8;
  --paper: #fbf9f3;
  --ink: #1c1b17;
  --muted: #6b675c;
  --line: #e5e0d2;
  --green: #1f8a4c;
  --green-strong: #176c3c;
  --stamp: #c73e3e;
  --amber: #a45d1a;
  --shadow: 0 18px 60px rgba(60, 50, 30, 0.10);

  /* type */
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1a15;
    --paper: #2b251e;
    --ink: #f5efe2;
    --muted: #b9ad9b;
    --line: #4a4034;
    --green: #65c985;
    --green-strong: #8adea1;
    --stamp: #ef776f;
    --amber: #e3aa61;
    --shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
  }
}