:root {
    /* 🎨 Colores base - Tema Negro y Rojo Neón */
    --color-primary: #ff0040;
    --color-primary-hover: #ff3366;
    --color-secondary: #00ff88;
    --color-danger: #ff0040;

    --color-bg: #0a0a0a;
    --color-surface: #141414;
    --color-border: #2a2a2a;
    --color-text: #ffffff;
    --color-text-secondary: #b0b0b0;
    --color-text-muted: #707070;

    /* 🌫️ Sombras con efecto neón */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.7);
    --shadow-neon: 0 0 10px rgba(255, 0, 64, 0.5), 0 0 20px rgba(255, 0, 64, 0.3);
    --shadow-neon-strong: 0 0 15px rgba(255, 0, 64, 0.7), 0 0 30px rgba(255, 0, 64, 0.5), 0 0 45px rgba(255, 0, 64, 0.3);

    /* 📐 Espaciados */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* ⏱️ Animaciones */
    --transition: 0.2s ease-in-out;
    
    /* 🎨 Paleta de colores para avatares - Tonos rojos y complementarios */
    --avatar-color-1: #ff0040; /* Rojo neón */
    --avatar-color-2: #ff1744; /* Rojo brillante */
    --avatar-color-3: #ff3366; /* Rosa neón */
    --avatar-color-4: #ff5252; /* Rojo claro */
    --avatar-color-5: #cc0033; /* Rojo oscuro */
    --avatar-color-6: #00ff88; /* Verde neón */
    --avatar-color-7: #00d4ff; /* Cian neón */
    --avatar-color-8: #ff00ff; /* Magenta neón */
    --avatar-color-9: #ffaa00; /* Naranja neón */
    --avatar-color-10: #ff0080; /* Rosa intenso */
}

/* Efectos de brillo neón para elementos interactivos */
.neon-glow {
    text-shadow: var(--shadow-neon);
}

.neon-glow-strong {
    text-shadow: var(--shadow-neon-strong);
}

/* Animación de pulso neón */
@keyframes neon-pulse {
    0%, 100% {
        text-shadow: 0 0 10px rgba(255, 0, 64, 0.5), 0 0 20px rgba(255, 0, 64, 0.3);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 0, 64, 0.8), 0 0 30px rgba(255, 0, 64, 0.6), 0 0 45px rgba(255, 0, 64, 0.4);
    }
}

@keyframes border-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 0, 64, 0.3), 0 0 10px rgba(255, 0, 64, 0.2);
    }
    50% {
        box-shadow: 0 0 10px rgba(255, 0, 64, 0.6), 0 0 20px rgba(255, 0, 64, 0.4), 0 0 30px rgba(255, 0, 64, 0.2);
    }
}

/* Scrollbar personalizado - Tema oscuro */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 5px;
    transition: var(--transition);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
    box-shadow: var(--shadow-neon);
}

/* Selección de texto */
::selection {
    background: var(--color-primary);
    color: var(--color-text);
}

::-moz-selection {
    background: var(--color-primary);
    color: var(--color-text);
}