@font-face {
  font-family: 'Golos';
  src: url('/fonts/golos-text.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: 'Russo';
  src: url('/fonts/russo-one.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Pixel';
  src: url('/fonts/press-start-2p.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces and text */
  --bm-bg: #080f19;
  --bm-surface: #101d2b;
  --bm-surface-raised: #162636;
  --bm-surface-hover: #1d3041;
  --bm-border: #304457;
  --bm-border-strong: #61798b;
  --bm-text: #f3efdf;
  --bm-muted: #a4b5c3;
  --bm-ink: #121b25;

  /* Brand and semantic colors */
  --bm-accent: #ffd460;
  --bm-accent-hover: #ffe399;
  --bm-orange: #ee8a45;
  --bm-success: #83d5b3;
  --bm-info: #91c9ed;
  --bm-danger: #f09a98;
  --bm-accent-soft: #2d2a20;
  --bm-success-soft: #172f2c;
  --bm-info-soft: #172c3c;
  --bm-danger-soft: #33262d;

  /* Type: readable UI first, arcade accents second */
  --bm-font-body: 'Golos', Arial, sans-serif;
  --bm-font-display: 'Russo', 'Arial Black', sans-serif;
  --bm-font-pixel: 'Pixel', monospace;
  --bm-text-xs: 0.75rem;
  --bm-text-sm: 0.875rem;
  --bm-text-md: 1rem;
  --bm-text-lg: 1.25rem;
  --bm-text-xl: 1.75rem;
  --bm-text-2xl: clamp(2.25rem, 4vw, 3.5rem);

  /* A four-pixel rhythm */
  --bm-space-1: 0.25rem;
  --bm-space-2: 0.5rem;
  --bm-space-3: 0.75rem;
  --bm-space-4: 1rem;
  --bm-space-5: 1.25rem;
  --bm-space-6: 1.5rem;
  --bm-space-8: 2rem;
  --bm-space-10: 2.5rem;
  --bm-space-12: 3rem;
  --bm-space-16: 4rem;
  --bm-radius: 2px;
  --bm-control-height: 44px;
  --bm-shadow: 0 4px 0 #030810;
  --bm-shadow-float: 0 20px 64px #0008;
  --bm-focus: 0 0 0 3px var(--bm-bg), 0 0 0 5px var(--bm-accent);
  --bm-duration: 160ms;
}