/* Base shell. Component styling is inline (token-driven) inside the React tree. */
html, body {
  margin: 0;
  padding: 0;
  background: #0A0A0C;
  color: #F5F5F7;
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* The app manages its own scroll regions; avoid rubber-band on the shell. */
body { overscroll-behavior-y: none; }

#root { min-height: 100dvh; }

/* Inputs inherit nothing useful by default — normalise. */
input, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: rgba(138,138,144,0.7); }
button { -webkit-tap-highlight-color: transparent; }

/* Accessibility — visible keyboard focus ring (only when navigating by keyboard,
   never on mouse/touch so the editorial look stays clean). */
:focus-visible {
  outline: 2px solid #FF4D00;
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* Scrollbars — quiet, matching the editorial chrome. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.18); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.32); }

/* Hide number-input spinners (amount fields). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}