/* ============================================================
   base.css — Reset y estilos base globales
   Responsabilidad: normalización del navegador, body, scrollbar,
   utilidades tipográficas y animaciones globales.
   ============================================================ */

/* Reset minimal */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tipografía utilitaria */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

/* Background grid effect */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 180, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

#root {
  position: relative;
  z-index: 1;
}

/* Scrollbar */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: var(--bg); }
::-webkit-scrollbar-thumb   { background: var(--border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--hint); }

/* Animaciones globales */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes toastIn {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.spin { animation: spin 0.8s linear infinite; }

/* Utilidades de margen */
.ml-auto { margin-left: auto; }