/* Shared design tokens and resets — reused across Black Box pages. */

:root {
  --amber: #FF7A1A;
  --ink: #EDEAE3;
  --dim: #8A8A86;
  --faint: #6B6B67;
  --green: #3DDC84;
  --red: #FF4D4D;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: #08080A; height: 100%; }

body {
  font-family: -apple-system, 'Inter', system-ui, sans-serif;
  color: var(--ink);
}

.mono { font-family: 'IBM Plex Mono', monospace; }

.wordmark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--faint);
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(circle at 50% 42%, #0c0c0e 0%, #000 78%);
  position: relative;
}

.btn {
  padding: 12px 36px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.2em;
  background: none;
  border: 1px solid rgba(255,122,26,0.4);
  color: var(--amber);
  font-family: 'IBM Plex Mono', monospace;
  cursor: pointer;
}

.btn:active { background: rgba(255,122,26,0.12); }