/**
 * KidVenture Clubs - Shared Theme Colors
 * CSS Custom Properties for consistent theming across public and admin interfaces
 */

:root {
    /* Default/Primary Theme Colors */
    --theme-primary: #2563EB;
    --theme-primary-dark: #1D4ED8;
    --theme-primary-light: #3B82F6;
    --theme-primary-alpha: rgba(37, 99, 235, 0.4);
    
    /* Piano Theme Colors (Purple) */
    --theme-piano-primary: #7C3AED;
    --theme-piano-secondary: #6D28D9;
    --theme-piano-dark: #5B21B6;
    --theme-piano-alpha: rgba(124, 58, 237, 0.4);
    --theme-piano-gradient: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
    --theme-piano-gradient-hover: linear-gradient(135deg, #6D28D9 0%, #5B21B6 100%);
    
    /* Guitar Theme Colors (Red) */
    --theme-guitar-primary: #DC2626;
    --theme-guitar-secondary: #B91C1C;
    --theme-guitar-dark: #991B1B;
    --theme-guitar-alpha: rgba(220, 38, 38, 0.4);
    --theme-guitar-gradient: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    --theme-guitar-gradient-hover: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%);
    
    /* Combo Theme Colors (Green) */
    --theme-combo-primary: #059669;
    --theme-combo-secondary: #047857;
    --theme-combo-dark: #065F46;
    --theme-combo-alpha: rgba(5, 150, 105, 0.4);
    --theme-combo-gradient: linear-gradient(135deg, #059669 0%, #047857 100%);
    --theme-combo-gradient-hover: linear-gradient(135deg, #047857 0%, #065F46 100%);
    
    /* Magic Theme Colors (Pink) */
    --theme-magic-primary: #DB2777;
    --theme-magic-secondary: #BE185D;
    --theme-magic-dark: #9D174D;
    --theme-magic-alpha: rgba(219, 39, 119, 0.4);
    --theme-magic-gradient: linear-gradient(135deg, #DB2777 0%, #BE185D 100%);
    --theme-magic-gradient-hover: linear-gradient(135deg, #BE185D 0%, #9D174D 100%);
    
    /* Brain Theme Colors (Cyan) */
    --theme-brain-primary: #0891B2;
    --theme-brain-secondary: #0E7490;
    --theme-brain-dark: #155E75;
    --theme-brain-alpha: rgba(8, 145, 178, 0.4);
    --theme-brain-gradient: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
    --theme-brain-gradient-hover: linear-gradient(135deg, #0E7490 0%, #155E75 100%);
    
    /* Theme-specific shadows */
    --theme-piano-shadow: 0 8px 20px var(--theme-piano-alpha);
    --theme-guitar-shadow: 0 8px 20px var(--theme-guitar-alpha);
    --theme-combo-shadow: 0 8px 20px var(--theme-combo-alpha);
    --theme-magic-shadow: 0 8px 20px var(--theme-magic-alpha);
    --theme-brain-shadow: 0 8px 20px var(--theme-brain-alpha);
    
    /* Common theme properties */
    --theme-text-white: #ffffff;
    --theme-text-dark: #1f2937;
    --theme-text-muted: #6b7280;
    --theme-border-light: #e5e7eb;
    --theme-border-dark: #d1d5db;
    --theme-bg-light: #f9fafb;
    --theme-bg-white: #ffffff;
    
    /* Animation properties */
    --theme-transition: all 0.2s ease;
    --theme-transform-hover: translateY(-2px) scale(1.02);
}

/* Utility classes for applying themes */
.theme-piano {
    --theme-current-primary: var(--theme-piano-primary);
    --theme-current-secondary: var(--theme-piano-secondary);
    --theme-current-dark: var(--theme-piano-dark);
    --theme-current-gradient: var(--theme-piano-gradient);
    --theme-current-gradient-hover: var(--theme-piano-gradient-hover);
    --theme-current-shadow: var(--theme-piano-shadow);
    --theme-current-alpha: var(--theme-piano-alpha);
}

.theme-guitar {
    --theme-current-primary: var(--theme-guitar-primary);
    --theme-current-secondary: var(--theme-guitar-secondary);
    --theme-current-dark: var(--theme-guitar-dark);
    --theme-current-gradient: var(--theme-guitar-gradient);
    --theme-current-gradient-hover: var(--theme-guitar-gradient-hover);
    --theme-current-shadow: var(--theme-guitar-shadow);
    --theme-current-alpha: var(--theme-guitar-alpha);
}

.theme-combo {
    --theme-current-primary: var(--theme-combo-primary);
    --theme-current-secondary: var(--theme-combo-secondary);
    --theme-current-dark: var(--theme-combo-dark);
    --theme-current-gradient: var(--theme-combo-gradient);
    --theme-current-gradient-hover: var(--theme-combo-gradient-hover);
    --theme-current-shadow: var(--theme-combo-shadow);
    --theme-current-alpha: var(--theme-combo-alpha);
}

.theme-magic {
    --theme-current-primary: var(--theme-magic-primary);
    --theme-current-secondary: var(--theme-magic-secondary);
    --theme-current-dark: var(--theme-magic-dark);
    --theme-current-gradient: var(--theme-magic-gradient);
    --theme-current-gradient-hover: var(--theme-magic-gradient-hover);
    --theme-current-shadow: var(--theme-magic-shadow);
    --theme-current-alpha: var(--theme-magic-alpha);
}

.theme-brain {
    --theme-current-primary: var(--theme-brain-primary);
    --theme-current-secondary: var(--theme-brain-secondary);
    --theme-current-dark: var(--theme-brain-dark);
    --theme-current-gradient: var(--theme-brain-gradient);
    --theme-current-gradient-hover: var(--theme-brain-gradient-hover);
    --theme-current-shadow: var(--theme-brain-shadow);
    --theme-current-alpha: var(--theme-brain-alpha);
}

/* Generic theme-aware component classes */
.theme-gradient-bg {
    background: var(--theme-current-gradient);
    color: var(--theme-text-white);
}

.theme-gradient-bg:hover {
    background: var(--theme-current-gradient-hover);
    transform: var(--theme-transform-hover);
    box-shadow: var(--theme-current-shadow);
}

.theme-border {
    border-color: var(--theme-current-primary);
}

.theme-text {
    color: var(--theme-current-primary);
}

.theme-bg {
    background-color: var(--theme-current-primary);
    color: var(--theme-text-white);
}

.theme-bg:hover {
    background-color: var(--theme-current-secondary);
}

/* Admin-specific theme utilities */
.admin-theme-card {
    border-left: 4px solid var(--theme-current-primary);
}

.admin-theme-badge {
    background: var(--theme-current-primary);
    color: var(--theme-text-white);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-theme-button {
    background: var(--theme-current-gradient);
    color: var(--theme-text-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: var(--theme-transition);
}

.admin-theme-button:hover {
    background: var(--theme-current-gradient-hover);
    transform: translateY(-1px);
    box-shadow: var(--theme-current-shadow);
}