@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
}

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

/* MeshVault demo design tokens.
   Source of truth: Figma file 2olO3EZ32oJjauaAqYjLUk, page "01 · Tokens",
   LOCKED rev.2 (2026-07-02): pure Graphite monotone. Brand shade #33333A is a
   shade, not black. No accent color. Semantic colors only: green online,
   amber approvals, red danger.
   Type: Inter for UI, JetBrains Mono for node addresses, model names, audit
   log. Radius: cards 12, buttons 999 pills, inputs 10. 4pt grid. */
:root {
  --canvas: #FAFAF8;
  --card: #FFFFFF;
  --hover: #F2F2F0;
  --border: #E8E8E4;
  --frame-border: #E6E7EA;
  --ink: #1D1D1F;
  --ink-2: #6E6E73;
  --brand: #33333A;
  --brand-deep: #2E2E33;
  --brand-tint: #EFEFF2;
  --ok: #34C759;
  --warn: #FF9F0A;
  --danger: #B3261E;
  --whisper: #C77D2E;
  --font-ui: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --r-card: 12px;
  --r-pill: 999px;
  --r-input: 10px;
}

body {
  font-family: var(--font-ui);
}

code, pre, kbd, samp, .mono {
  font-family: var(--font-mono);
}

/* Keyboard users inside demos get a visible, on-brand focus ring. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Demos animate heavily; honor the OS setting in one place for all of them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually hidden but available to screen readers (demo headings). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}