/**
 * Travelin - Color Variables System
 * All colors used across the application
 * Easy to update and maintain
 */

:root {
    /* Primary Brand Colors */
    --color-primary: #007bff;
    --color-primary-dark: #0056b3;
    --color-primary-light: #6c9bd6;
    --color-primary-lighter: rgba(0, 123, 255, 0.1);
    
    /* Secondary Colors */
    --color-secondary: #6c757d;
    --color-secondary-dark: #545b62;
    --color-secondary-light: #adb5bd;
    
    /* Success Colors */
    --color-success: #28a745;
    --color-success-dark: #218838;
    --color-success-light: #5cb85c;
    --color-success-lighter: rgba(40, 167, 69, 0.1);
    
    /* Warning Colors */
    --color-warning: #ffc107;
    --color-warning-dark: #e0a800;
    --color-warning-light: #ffd454;
    
    /* Danger/Error Colors */
    --color-danger: #dc3545;
    --color-danger-dark: #c82333;
    --color-danger-light: #f86c6b;
    
    /* Info Colors */
    --color-info: #17a2b8;
    --color-info-dark: #138496;
    --color-info-light: #5bc0de;
    
    /* Neutral/Gray Scale */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    
    /* Background Colors */
    --bg-light: #fdfdfd;
    --bg-dark: #212529;
    --bg-white: #ffffff;
    --bg-body: #ffffff;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #6c757d;
    --text-white: #ffffff;
    --text-light: #f8f9fa;
    --text-dark: #212529;
    
    /* Border Colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --border-dark: #495057;
    
    /* Shadow Colors */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --shadow-xl: 0 2rem 4rem rgba(0, 0, 0, 0.2);
    
    /* Hover States */
    --hover-primary: #0056b3;
    --hover-secondary: #545b62;
    --hover-success: #218838;
    --hover-warning: #e0a800;
    --hover-danger: #c82333;
    --hover-info: #138496;
    
    /* Opacity Variants */
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-30: 0.3;
    --opacity-50: 0.5;
    --opacity-75: 0.75;
    --opacity-90: 0.9;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    --gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    
    /* Company/Business Colors */
    --color-company-primary: var(--color-primary);
    --color-company-secondary: var(--color-success);
    
    /* Dashboard Colors */
    --dashboard-bg: #f4f6f9;
    --dashboard-sidebar: #343a40;
    --dashboard-text: #212529;
    
    /* Modal/Overlay */
    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(255, 255, 255, 0.9);
    
    /* Transparent Colors */
    --transparent: transparent;
}

/* Dark Mode Support (Optional - Disabled by default) */
/* Uncomment to enable dark mode
@media (prefers-color-scheme: dark) {
    :root {
        --bg-body: #1a1a1a;
        --text-primary: #f8f9fa;
        --text-secondary: #adb5bd;
        --bg-light: #2d3748;
        --border-color: #495057;
    }
}
*/

/* Utility Classes using CSS Variables */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-white { background-color: var(--bg-white) !important; }

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-info { color: var(--color-info) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: var(--text-white) !important; }
.text-dark { color: var(--text-dark) !important; }

.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-danger { border-color: var(--color-danger) !important; }
.border-info { border-color: var(--color-info) !important; }

/* Button Color Overrides using CSS Variables */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--hover-primary);
    border-color: var(--hover-primary);
}

.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.btn-success:hover {
    background-color: var(--hover-success);
    border-color: var(--hover-success);
}

.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-warning:hover {
    background-color: var(--hover-warning);
    border-color: var(--hover-warning);
}

.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-danger:hover {
    background-color: var(--hover-danger);
    border-color: var(--hover-danger);
}

.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
}

.btn-info:hover {
    background-color: var(--hover-info);
    border-color: var(--hover-info);
}

.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-secondary:hover {
    background-color: var(--hover-secondary);
    border-color: var(--hover-secondary);
}

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Background Opacity Utilities */
.bg-primary-10 { background-color: rgba(0, 123, 255, 0.1) !important; }
.bg-success-10 { background-color: rgba(40, 167, 69, 0.1) !important; }
.bg-warning-10 { background-color: rgba(255, 193, 7, 0.1) !important; }
.bg-danger-10 { background-color: rgba(220, 53, 69, 0.1) !important; }
.bg-info-10 { background-color: rgba(23, 162, 184, 0.1) !important; }