/* ============================================================
   Base — reset moderno + tipografía
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-hi);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* Usamos scroll interno en .page */
}

/* Fondo sutil con patrón para el shell */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-dim), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(59, 130, 246, 0.06), transparent);
  pointer-events: none;
  z-index: 0;
}

img, svg, video, canvas { display: block; max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

input, textarea, select { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; color: var(--text-hi); }
h1 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { color: var(--text-md); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); background-clip: padding-box; border: 2px solid transparent; }

/* Selección */
::selection { background: var(--accent-dim); color: var(--text-hi); }

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

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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