@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;600&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--vs-font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

body {
  background: var(--vs-bg);
  color: var(--vs-text-primary);
  min-height: 100vh;
  line-height: 1.5;
  transition: background var(--vs-duration-fast), color var(--vs-duration-fast);
}

/* Scrollbars — Voltstock style */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--vs-bg); }
::-webkit-scrollbar-thumb {
  background: var(--vs-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--vs-border-strong); }

a { color: var(--vs-accent); text-decoration: none; }
a:hover { filter: brightness(1.15); }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--vs-accent); color: #000; }
::-moz-selection { background: var(--vs-accent); color: #000; }

.mono { font-family: var(--vs-font-mono); }
.display { font-family: var(--vs-font-display); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}