/* 
 * Theme Configuration System
 * Centralized color and logo management for runtime customization
 * 
 * This file contains CSS custom properties that can be dynamically updated
 * to change the application's appearance at runtime.
 */

:root {
    /* ===========================================
       PRIMARY BRAND COLORS
       =========================================== */
    
    /* Main Brand Colors - These are the 3 core colors used throughout the app */
    --theme-primary: #91d500;        /* Green - Primary brand color */
    --theme-secondary: #2d1bff;      /* Blue/Orange - Accent color */
    --theme-tertiary: #935fc7;       /* Purple - Secondary accent */
    
    /* RGBA versions for transparency effects */
    --theme-primary-rgba: rgba(145, 213, 0, 0.05);
    --theme-secondary-rgba: rgba(45, 27, 255, 0.05);
    --theme-tertiary-rgba: rgba(147, 95, 199, 0.05);
    
    /* Legacy variable names for backward compatibility */
    --logo-green: var(--theme-primary);
    --logo-orange: var(--theme-secondary);
    --logo-purple: var(--theme-tertiary);
    
    /* ===========================================
       DERIVED COLORS
       =========================================== */
    
    /* Primary color variations */
    --theme-primary-light: #a8e01a;
    --theme-primary-dark: #7bb800;
    --theme-primary-hover: #7bb800;
    --theme-primary-active: #6ba300;
    
    /* Secondary color variations */
    --theme-secondary-light: #4d3aff;
    --theme-secondary-dark: #1a0acc;
    --theme-secondary-hover: #1a0acc;
    --theme-secondary-active: #0d0599;
    
    /* Tertiary color variations */
    --theme-tertiary-light: #a875d4;
    --theme-tertiary-dark: #7a4ba8;
    --theme-tertiary-hover: #7a4ba8;
    --theme-tertiary-active: #6b3f96;
    
    /* ===========================================
       SEMANTIC COLORS
       =========================================== */
    
    /* Status colors */
    --theme-success: var(--theme-primary);
    --theme-info: #17a2b8;
    --theme-warning: #ffc107;
    --theme-danger: #dc3545;
    
    /* Neutral colors */
    --theme-light: #f8f9fa;
    --theme-dark: #343a40;
    --theme-muted: #6c757d;
    
    /* ===========================================
       BACKGROUND GRADIENTS
       =========================================== */
    
    /* Primary gradients */
    --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    --theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-secondary-dark) 100%);
    --theme-gradient-tertiary: linear-gradient(135deg, var(--theme-tertiary) 0%, var(--theme-tertiary-dark) 100%);
    
    /* Mixed gradients */
    --theme-gradient-primary-secondary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    --theme-gradient-secondary-tertiary: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-tertiary) 100%);
    --theme-gradient-tertiary-primary: linear-gradient(135deg, var(--theme-tertiary) 0%, var(--theme-primary) 100%);
    
    /* ===========================================
       LOGO CONFIGURATION
       =========================================== */
    
    /* Logo paths - can be updated dynamically */
    --theme-logo-main: url('/images/1404-ASS-LOGO-FINAL-01-CROPPED-LARGE.png');
    --theme-logo-auth: url('/images/Logo Transparent.png');
    --theme-logo-favicon: url('/images/1404-ASS-LOGO-FINAL-01-CROPPED-LARGE.png');
    --theme-logo-mobile: url('/images/1404-ASS-LOGO-FINAL-01-CROPPED-LARGE.png');
    
    /* Logo sizes */
    --theme-logo-height-sidebar: 120px;
    --theme-logo-height-mobile: 40px;
    --theme-logo-height-auth: 80px;
    --theme-logo-height-admin: 70px;
    
    /* ===========================================
       COMPONENT-SPECIFIC OVERRIDES
       =========================================== */
    
    /* Button colors */
    --btn-primary-bg: var(--theme-primary);
    --btn-primary-border: var(--theme-primary);
    --btn-primary-hover: var(--theme-primary-hover);
    
    --btn-secondary-bg: var(--theme-tertiary);
    --btn-secondary-border: var(--theme-tertiary);
    --btn-secondary-hover: var(--theme-tertiary-hover);
    
    /* Card header colors */
    --card-header-bg: var(--theme-gradient-secondary-tertiary);
    --card-header-text: white;
    
    /* Sidebar colors */
    --sidebar-header-border: var(--theme-secondary);
    --sidebar-bottom-border: var(--theme-secondary);
    --sidebar-active-bg: #8E44AD;
    --sidebar-active-border: var(--theme-secondary);
    
    /* Navigation colors */
    --nav-active-bg: var(--theme-secondary);
    --nav-active-text: white;
    --nav-hover-bg: #f8f9fa;
    
    /* Progress bar colors */
    --progress-bg: var(--theme-primary);
    --progress-bar-bg: var(--theme-gradient-primary);
    
    /* Alert colors */
    --alert-success-bg: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    --alert-success-border: #c3e6cb;
    --alert-success-text: #155724;
    
    --alert-danger-bg: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    --alert-danger-border: #f5c6cb;
    --alert-danger-text: #721c24;
    
    --alert-warning-bg: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    --alert-warning-border: #ffeaa7;
    --alert-warning-text: #856404;
    
    --alert-info-bg: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    --alert-info-border: #bee5eb;
    --alert-info-text: #0c5460;
}

/* ===========================================
   THEME VARIATIONS
   =========================================== */

/* Alternative theme 1: Blue-focused */
[data-theme="blue"] {
    --theme-primary: #007bff;
    --theme-secondary: #6f42c1;
    --theme-tertiary: #20c997;
}

/* Alternative theme 2: Purple-focused */
[data-theme="purple"] {
    --theme-primary: #6f42c1;
    --theme-secondary: #e83e8c;
    --theme-tertiary: #fd7e14;
}

/* Alternative theme 3: Orange-focused */
[data-theme="orange"] {
    --theme-primary: #fd7e14;
    --theme-secondary: #dc3545;
    --theme-tertiary: #20c997;
}

/* Alternative theme 4: Dark theme */
[data-theme="dark"] {
    --theme-primary: #28a745;
    --theme-secondary: #17a2b8;
    --theme-tertiary: #ffc107;
    --theme-light: #2d3748;
    --theme-dark: #1a202c;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Color utility classes */
.text-theme-primary { color: var(--theme-primary) !important; }
.text-theme-secondary { color: var(--theme-secondary) !important; }
.text-theme-tertiary { color: var(--theme-tertiary) !important; }

.bg-theme-primary { background-color: var(--theme-primary) !important; }
.bg-theme-secondary { background-color: var(--theme-secondary) !important; }
.bg-theme-tertiary { background-color: var(--theme-tertiary) !important; }

.border-theme-primary { border-color: var(--theme-primary) !important; }
.border-theme-secondary { border-color: var(--theme-secondary) !important; }
.border-theme-tertiary { border-color: var(--theme-tertiary) !important; }

/* Gradient utility classes */
.bg-gradient-theme-primary { background: var(--theme-gradient-primary) !important; }
.bg-gradient-theme-secondary { background: var(--theme-gradient-secondary) !important; }
.bg-gradient-theme-tertiary { background: var(--theme-gradient-tertiary) !important; }
.bg-gradient-theme-mixed { background: var(--theme-gradient-primary-secondary) !important; }

/* ===========================================
   RESPONSIVE LOGO SIZES
   =========================================== */

@media (max-width: 768px) {
    :root {
        --theme-logo-height-sidebar: 100px;
        --theme-logo-height-mobile: 35px;
        --theme-logo-height-auth: 70px;
    }
}

@media (max-width: 480px) {
    :root {
        --theme-logo-height-sidebar: 80px;
        --theme-logo-height-mobile: 30px;
        --theme-logo-height-auth: 60px;
    }
}