/* ──────────────────────────────────────────────────────────
   Design tokens. Single source of truth for fonts (and any
   future design tokens) across the site. Every HTML page
   should link this file FIRST so subsequent stylesheets and
   inline styles can use var(--font-display) / var(--font-mono).

   To swap fonts site-wide: change the @import URL below and
   the two CSS variables in :root. That's it.
   ────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=JetBrains+Mono:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Vinterdoodle';
  src: url('fonts/Vinterdoodle01-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  /* block, not swap — hides text using this font for a brief moment
     while it loads (it's preloaded in index.html so that moment is
     tiny) instead of flashing the fallback font in first, then swapping. */
  font-display: block;
}

:root {
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-doodle:  'Vinterdoodle';
}