:root {
    /* GlassLearn Base Tokens (The DNA) - Transparencia Aumentada */
    --gl-bg: rgba(255, 255, 255, 0.03);
    /* Más transparente */
    --gl-blur: 12px;
    /* Blur ligeramente más suave */
    --gl-border: 1px solid rgba(255, 255, 255, 0.1);
    --gl-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
    --gl-inner-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    --gl-top-reflection: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
    --gl-radius: 16px;
    --gl-accent: #6d5dfc;
    --gl-text: rgba(255, 255, 255, 0.85);

    /* Spotlight Dynamic Vars */
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-color: rgba(255, 255, 255, 0.08);

    /* Transiciones de Evolución */
    transition: --gl-accent 1s ease, --gl-blur 0.8s ease;
}

/* Aplicación Universal de los Tokens (Base) */
.glass-panel,
body .card,
.container {
    background: var(--gl-bg);
    background-image: var(--gl-top-reflection);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
    border: var(--gl-border);
    border-radius: var(--gl-radius);
    box-shadow: var(--gl-shadow), var(--gl-inner-shadow);
    color: var(--gl-text);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, backdrop-filter;
    position: relative;
    overflow: hidden;
}

/* Efecto de Brillo Localizado (Spotlight Dinámico v4.0 - DRAMÁTICO) */
.spotlight-target:hover {
    --spotlight-color: rgba(255, 255, 255, 0.2) !important;
    background: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--spotlight-color) 0%, transparent 100%), var(--gl-bg) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow:
        0 12px 35px -5px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 0 25px -5px rgba(109, 93, 252, 0.4) !important;
    z-index: 10;
}