/* ========================================
   BASE — Estilos globales
   ======================================== */

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
}

/* Selection */
::selection {
    background-color: rgba(0, 212, 170, 0.3);
    color: var(--color-text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

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

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-text-primary);
}

p {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

strong {
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
}

/* Gradient text utility */
.text-gradient {
    background: var(--gradient-accent-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Skip to content (accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-accent);
    color: var(--color-bg-primary);
    border-radius: var(--radius-sm);
    z-index: var(--z-toast);
    font-weight: var(--fw-semibold);
}

.skip-link:focus {
    top: var(--space-md);
}