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

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

:root {
  --bloem-bg: #0c0d0f;
  --bloem-surface: #131519;
  --bloem-surface-raised: #191b20;
  --bloem-paper: #ece7dd;
  --bloem-text: #f0ece4;
  --bloem-muted: #a7a29a;
  --bloem-line: rgba(240, 236, 228, .16);
  --bloem-line-soft: rgba(240, 236, 228, .08);
  --bloem-orange: #e96824;
  --bloem-orange-muted: #bd5724;
  --bloem-orange-hot: #ff8f28;
  --bloem-content: 1280px;
  --bloem-radius: 8px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bloem-bg);
  color: var(--bloem-text);
  font-family: 'IBM Plex Sans', sans-serif;
}
:where(h1, h2, h3, h4, h5, h6) { font-family: 'Space Grotesk', sans-serif; }
:where(button, input, select, textarea) { font: inherit; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--bloem-orange-hot);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}