@import "./tokens.css";
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap");

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
}
#root { width: 100vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; }
img { display: block; max-width: 100%; }
::selection { background: color-mix(in oklch, var(--color-primary) 28%, transparent); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes slideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }
@keyframes progressBar { from{background-position:200% 0} to{background-position:-200% 0} }