/* Shared foundation: fonts, design tokens, global reset. SINGLE SOURCE OF TRUTH.
   Linked first on every content page (before the page's own inline <style> and
   /styles.css chrome), so its :root tokens are available to both. Font URLs are
   relative to THIS file (/base.css -> /fonts/...), so they resolve identically
   from every page depth - no per-page ../ juggling. */

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-Variable.woff2') format('woff2-variations'),
       url('fonts/FamiljenGrotesk-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-Italic-Variable.woff2') format('woff2-variations'),
       url('fonts/FamiljenGrotesk-Italic-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Martlingo Prompt';
  src: url('fonts/noto-chev.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+276F;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #111117;
  --surface: #16161e;
  --border: #222230;
  --white: #f0f0f0;
  --muted-light: #b0b0c0;
  --muted-dim: #84849a;
  --accent: #2563eb;
  --accent-hover: #60a5fa;
  --supporting: #10b981;
  --err: #ef4444;
  --code-bg: #0d0d12;
  --code-border: #1e1e2e;

  /* Semantic 4pt spacing scale */
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;

  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --nav-h: 65px;
}