@import url('project-layout.css');

:root {
    --theme-primary: #000000;
    --theme-secondary: #004e92;
    --theme-gradient: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
    --theme-shadow: rgba(0, 78, 146, 0.2);
    --theme-accent-10: rgba(0, 78, 146, 0.1);
    --theme-accent-20: rgba(0, 78, 146, 0.2);
    --theme-accent-50: rgba(0, 78, 146, 0.5);
    --theme-accent-90: rgba(0, 78, 146, 0.9);
}

/* Dark Mode Colors - Paleta moderna y vibrante para esports */
[data-theme="dark"] {
    --theme-primary: #8B5CF6;
    --theme-secondary: #6366F1;
    --theme-gradient: linear-gradient(to right, #8B5CF6, #6366F1);
    --theme-shadow: rgba(139, 92, 246, 0.3);
    --theme-accent-10: rgba(139, 92, 246, 0.1);
    --theme-accent-20: rgba(139, 92, 246, 0.2);
    --theme-accent-50: rgba(139, 92, 246, 0.5);
    --theme-accent-90: rgba(139, 92, 246, 0.9);
}

.metrica-item {
    background: linear-gradient(135deg, #004e92 0%, #0076d6 100%);
}

[data-theme="dark"] .metrica-item {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
}

.extra-icon {
    color: var(--theme-primary);
}