/* Whitelabel Brand Colors */
:root {
    /* Primary Brand Colors - Dynamic from whitelabel config */
    --boels-orange: var(--wl-primary);
    --boels-orange-light: var(--wl-primary-light);
    --boels-orange-dark: var(--wl-primary-dark);
    --boels-orange-50: #FFF4E6;
    --boels-orange-100: #FFE4CC;
    --boels-orange-200: #FFC999;
    --boels-orange-300: #FFAD66;
    --boels-orange-400: #FF9233;
    --boels-orange-500: var(--wl-primary);
    --boels-orange-600: var(--wl-primary-dark);
    --boels-orange-700: #CC5000;
    --boels-orange-800: #994000;
    --boels-orange-900: #663000;
    
    /* Whitelabel Primary Colors */
    --wl-primary: #FF6900;
    --wl-primary-light: #FF8533;
    --wl-primary-dark: #E55A00;
    --wl-secondary: #6B7280;
    --wl-accent: #10B981;
    
    /* Secondary Colors - Grays and White */
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    
    /* Status Colors */
    --success: #10B981;
    --success-light: #34D399;
    --success-dark: #059669;
    --warning: #F59E0B;
    --warning-light: #FCD34D;
    --warning-dark: #D97706;
    --error: #EF4444;
    --error-light: #F87171;
    --error-dark: #DC2626;
    --info: #3B82F6;
    --info-light: #60A5FA;
    --info-dark: #2563EB;
    
    /* Component Colors - Whitelabel */
    --primary: var(--wl-primary);
    --primary-hover: var(--wl-primary-dark);
    --primary-light: var(--wl-primary-light);
    --secondary: var(--wl-secondary);
    --secondary-hover: var(--gray-700);
    
    /* Background Colors - Whitelabel */
    --bg-primary: var(--wl-bg-primary, var(--white));
    --bg-secondary: var(--wl-bg-secondary, var(--gray-50));
    --bg-tertiary: var(--gray-100);
    --bg-dark: var(--wl-bg-dark, var(--gray-900));
    --bg-orange-light: var(--boels-orange-50);
    
    /* Text Colors - Whitelabel */
    --text-primary: var(--wl-text-primary, var(--gray-900));
    --text-secondary: var(--wl-text-secondary, var(--gray-600));
    --text-light: var(--wl-text-light, var(--gray-500));
    --text-white: var(--wl-text-white, var(--white));
    --text-orange: var(--wl-primary);
    
    /* Border Colors - Whitelabel */
    --border-light: var(--gray-200);
    --border-medium: var(--gray-300);
    --border-dark: var(--gray-400);
    --border-orange: var(--wl-primary);
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-orange: 0 4px 6px -1px rgba(255, 105, 0, 0.3);
    
    /* Component Specific */
    --header-bg: var(--white);
    --header-border: var(--border-light);
    --footer-bg: var(--gray-900);
    --footer-text: var(--gray-300);
    --button-primary-bg: var(--boels-orange);
    --button-primary-hover: var(--boels-orange-dark);
    --button-secondary-bg: var(--gray-600);
    --button-secondary-hover: var(--gray-700);
    --input-border: var(--border-medium);
    --input-focus-border: var(--boels-orange);
    --card-bg: var(--white);
    --card-border: var(--border-light);
    
    /* Chat Interface */
    --chat-bg: var(--bg-secondary);
    --chat-user-bg: var(--boels-orange);
    --chat-user-text: var(--white);
    --chat-bot-bg: var(--white);
    --chat-bot-text: var(--text-primary);
    --chat-bot-border: var(--border-light);
}

/* Dark mode disabled */