/* ============================================================
   Synapse — Base
   Reset y estilos de elementos HTML. Sin clases.
   ============================================================ */

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

html { font-size: 15px; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: var(--lh-base);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.75; }

img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

select,
select option { background-color: var(--surface-4); color: var(--text-primary); }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--accent); }

code { font-family: var(--font-mono); }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

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