:root {
  --bg-base: #0b0e11;
  --bg-panel: #14181d;
  --bg-panel-2: #1b2027;
  --border: #262b33;
  --text-primary: #f2f3f0;
  --text-muted: #8b92a0;
  --volt: #c8ff4d;
  --volt-dim: #9bd431;
  --coral: #ff4368;
  --info: #4da3ff;
  --violet: #a78bfa;
  --amber: #ffb84d;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
}

/* Bootstrap pisa el color con su propia variable, causa el "se mezcla con el fondo" */
.text-muted { color: var(--text-muted) !important; }

.brand-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}
.brand-mark--accent { color: var(--volt); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 2px;
  border-radius: 4px;
}