/* ============================================================
   Base — reset, tipografía, fondo con orbs, utilidades
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--surface-0);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Fondo con manchas de luz fijas — dan profundidad sin molestar */
  background-image:
    radial-gradient(ellipse 700px 500px at 10%  -5%,  rgba(91,  63, 240, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 90%  15%,  rgba(29, 13, 64,  0.30) 0%, transparent 65%),
    radial-gradient(ellipse 600px 500px at 75%  90%,  rgba(34, 216,224, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 400px 300px at 5%   85%,  rgba(45,  10, 92,  0.20) 0%, transparent 60%);
  background-attachment: fixed;
}

[data-theme="light"] body,
:root[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 700px 500px at 10%  -5%,  rgba(180, 150, 255, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 90%  15%,  rgba(200, 185, 255, 0.20) 0%, transparent 65%),
    radial-gradient(ellipse 600px 500px at 75%  90%,  rgba(100, 200, 240, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 400px 300px at 5%   85%,  rgba(160, 120, 255, 0.12) 0%, transparent 60%);
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

button {
  font-family: inherit;
}

/* Headings con Syne — la única diferencia tipográfica visible que marca */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--text-2xl); font-weight: var(--weight-extrabold); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p {
  margin: 0;
}

/* Scrollbars discretos */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-subtle);
}

/* Focus accesible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Utilidades --- */
.hidden   { display: none !important; }
.muted    { color: var(--text-muted); }
.subtle   { color: var(--text-subtle); }
.mono     { font-family: var(--font-mono); }
.display  { font-family: var(--font-display); }

.row      { display: flex; align-items: center; }
.gap-1    { gap: var(--space-1); }
.gap-2    { gap: var(--space-2); }
.gap-3    { gap: var(--space-3); }
.gap-4    { gap: var(--space-4); }
.grow     { flex: 1; }
.wrap     { flex-wrap: wrap; }
.text-sm  { font-size: var(--text-sm); }
.text-xs  { font-size: var(--text-xs); }
.nowrap   { white-space: nowrap; }

/* Glass mixin — se aplica a sidebar, topbar, cards, modal */
.glass {
  background: var(--surface-2);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-glass);
}

/* Animaciones reutilizables */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  from { background-position: -480px 0; }
  to   { background-position:  480px 0; }
}
@keyframes orb-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 0.9; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}