/* ═══════════════════════════════════════════════════════════════
   Reset + base
   ═══════════════════════════════════════════════════════════════ */

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

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text);
    background: var(--surface);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

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

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

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

button { cursor: pointer; background: none; border: none; }

ul, ol { list-style: none; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

::selection { background: var(--accent-soft); color: var(--accent-active); }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }
::-webkit-scrollbar-track { background: transparent; }

/* Utilidades */
.muted { color: var(--text-muted); }
.soft  { color: var(--text-soft); }
.mono  { font-family: var(--font-mono); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.hidden { display: none !important; }
.full { width: 100%; }

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