/* ============================================
   APLICACIÓN DE VARIABLES CSS - TEMA
   Aplica las variables del tema a elementos principales
   ============================================ */

/* Body y contenedor principal */
body {
    background-color: var(--color-light) !important;
    color: var(--color-secondary) !important;
}

/* Header y navegación */
.header {
    background: linear-gradient(180deg, rgba(10, 10, 20, 0.92) 0%, rgba(10, 10, 20, 0.75) 60%, transparent 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.nav-menu a,
.logo {
    color: var(--color-secondary) !important;
}

/* Footer */
.footer {
    background-color: var(--color-light);
    color: var(--color-secondary);
}

/* Transiciones suaves */
body,
.header,
.footer,
.nav-menu a,
.logo {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header cuando el usuario hace scroll: usa un degradado que parte de --color-accent hacia transparente */
.header.scrolled {
    background: var(--color-accent);
    opacity: 1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Cuando el menú móvil está abierto queremos que el header muestre el mismo color/gradiente del menú */
.header.menu-open {
    background: var(--color-accent);
    opacity: 0.98;
}

.nav-menu.show {
    background: var(--color-accent);
    border: 1px solid var(--color-primary);
    color: var(--color-secondary);
}