/* ============================================
   Global Theme Variables
   Change these colors to update entire application theme
   ============================================ */

:root {
    /* Primary Theme Colors - Purple Gradient */
    --primary-gradient-start: #667eea;
    --primary-gradient-end: #764ba2;
    
    /* Success Theme Colors - Green/Teal Gradient */
    --success-gradient-start: #11998e;
    --success-gradient-end: #38ef7d;
    
    /* Info Theme Colors - Blue Gradient */
    --info-gradient-start: #17a2b8;
    --info-gradient-end: #138496;
    
    /* Warning Theme Colors - Orange Gradient */
    --warning-gradient-start: #ffc107;
    --warning-gradient-end: #ff9800;
    
    /* Danger Theme Colors - Red Gradient */
    --danger-gradient-start: #dc3545;
    --danger-gradient-end: #c82333;
    
    /* Dark Theme Colors */
    --dark-gradient-start: #343a40;
    --dark-gradient-end: #23272b;
    
    /* Light Theme Colors */
    --light-bg: #f8f9fa;
    --light-border: #dee2e6;
    
    /* Text Colors */
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --text-light: #495057;
    
    /* Border Colors */
    --border-color: #e9ecef;
    --border-focus: var(--primary-gradient-start);
    
    /* Shadow Colors */
    --shadow-sm: rgba(0, 0, 0, 0.05);
    --shadow-md: rgba(0, 0, 0, 0.08);
    --shadow-lg: rgba(0, 0, 0, 0.1);
}

/* ============================================
   Reusable Gradient Classes
   Use these classes anywhere in your application
   ============================================ */

/* Primary Gradient */
.theme-primary-gradient {
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%) !important;
    border: none !important;
    color: #fff !important;
}

/* Success Gradient */
.theme-success-gradient {
    background: linear-gradient(135deg, var(--success-gradient-start) 0%, var(--success-gradient-end) 100%) !important;
    border: none !important;
    color: #fff !important;
}

/* Info Gradient */
.theme-info-gradient {
    background: linear-gradient(135deg, var(--info-gradient-start) 0%, var(--info-gradient-end) 100%) !important;
    border: none !important;
    color: #fff !important;
}

/* Warning Gradient */
.theme-warning-gradient {
    background: linear-gradient(135deg, var(--warning-gradient-start) 0%, var(--warning-gradient-end) 100%) !important;
    border: none !important;
    color: #fff !important;
}

/* Danger Gradient */
.theme-danger-gradient {
    background: linear-gradient(135deg, var(--danger-gradient-start) 0%, var(--danger-gradient-end) 100%) !important;
    border: none !important;
    color: #fff !important;
}

/* Dark Gradient */
.theme-dark-gradient {
    background: linear-gradient(135deg, var(--dark-gradient-start) 0%, var(--dark-gradient-end) 100%) !important;
    border: none !important;
    color: #fff !important;
}

/* Hover Effects for Gradient Buttons */
.theme-primary-gradient:hover,
.theme-success-gradient:hover,
.theme-info-gradient:hover,
.theme-warning-gradient:hover,
.theme-danger-gradient:hover,
.theme-dark-gradient:hover {
    transform: translateY(-2px);
    opacity: 0.9;
    box-shadow: 0 5px 15px var(--shadow-lg);
}

/* ============================================
   Background Color Classes
   ============================================ */
.bg-primary-gradient {
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
}

.bg-success-gradient {
    background: linear-gradient(135deg, var(--success-gradient-start) 0%, var(--success-gradient-end) 100%);
}

.bg-info-gradient {
    background: linear-gradient(135deg, var(--info-gradient-start) 0%, var(--info-gradient-end) 100%);
}

.bg-warning-gradient {
    background: linear-gradient(135deg, var(--warning-gradient-start) 0%, var(--warning-gradient-end) 100%);
}

.bg-danger-gradient {
    background: linear-gradient(135deg, var(--danger-gradient-start) 0%, var(--danger-gradient-end) 100%);
}

.bg-dark-gradient {
    background: linear-gradient(135deg, var(--dark-gradient-start) 0%, var(--dark-gradient-end) 100%);
}

/* ============================================
   Border Color Classes
   ============================================ */
.border-primary-gradient {
    border: 2px solid var(--primary-gradient-start) !important;
}

.border-success-gradient {
    border: 2px solid var(--success-gradient-start) !important;
}

.border-info-gradient {
    border: 2px solid var(--info-gradient-start) !important;
}

/* ============================================
   Text Color Classes
   ============================================ */
.text-primary-theme {
    color: var(--primary-gradient-start) !important;
}

.text-success-theme {
    color: var(--success-gradient-start) !important;
}

.text-info-theme {
    color: var(--info-gradient-start) !important;
}