/* ═══════════════════════════════════════════════════════════════════
   Cuarenta 40 · Reset, tipografía base, scrollbar y preferencias de movimiento.
   ═══════════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--indigo-400); text-decoration: none; }
a:hover { color: var(--indigo-300); }

::selection { background: var(--indigo-glow); color: #fff; }

/* Tipografía display para títulos de página y cifras */
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ── HTMX indicador ───────────────────────────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: 6px; border: 2px solid var(--ink-850); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-650); }

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

/* Las reglas responsive (breakpoints) viven en modules/responsive.css, que se
   enlaza el último para ganar la cascada sobre layout.css y components.css. */