:root {
    /* Brand Colors */
    --primary-color: #2C3E50;
    --secondary-color: #3498DB;
    --accent-color: #E74C3C;
    
    /* Text Colors */
    --text-light: #ECF0F1;
    --text-dark: #2C3E50;
    
    /* UI Colors */
    --ui-gray-100: #f8f9fa;
    --ui-gray-200: #dee2e6;
    --ui-border: rgba(0, 0, 0, 0.125);
    
    /* Overlays */
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-dark: rgba(0, 0, 0, 0.1);
    --overlay-light-15: rgba(255, 255, 255, 0.15);
    --overlay-light-20: rgba(255, 255, 255, 0.2);
    --overlay-light-50: rgba(255, 255, 255, 0.5);
    --overlay-light-60: rgba(255, 255, 255, 0.6);
    --shadow-sm: rgba(0, 0, 0, 0.05);
    --shadow-md: rgba(0, 0, 0, 0.1);
    
    /* Bootstrap Overrides */
    --bs-primary: var(--primary-color);
    --bs-secondary: var(--secondary-color);
    --bs-success: #2ECC71;
    --bs-info: #3498DB;
    --bs-warning: #F1C40F;
    --bs-danger: var(--accent-color);
    
    /* Bootstrap Component Colors */
    --bs-primary-rgb: 44, 62, 80;        /* #2C3E50 in RGB */
    --bs-secondary-rgb: 52, 152, 219;    /* #3498DB in RGB */
    --bs-success-rgb: 46, 204, 113;      /* #2ECC71 in RGB */
    --bs-info-rgb: 52, 152, 219;         /* #3498DB in RGB */
    --bs-warning-rgb: 241, 196, 15;      /* #F1C40F in RGB */
    --bs-danger-rgb: 231, 76, 60;        /* #E74C3C in RGB */
    
    /* Additional UI Colors */
    --ui-hover: #f5f7fa;
    --ui-active: #e9ecef;
    --text-muted: rgba(44, 62, 80, 0.6);  /* Based on primary color */
    
    /* Additional Shadows */
    --shadow-hover: rgba(0, 0, 0, 0.08);
}