:root {
    /* Brand Colors - Core */
    --qb-orange: #FF6B00;
    --qb-orange-hover: #E56000;
    --qb-orange-active: #CC5500;
    --qb-orange-light: #FFF0E5;
    
    --qb-navy: #111827;
    --qb-navy-light: #1F2937;
    --qb-navy-lighter: #374151;
    
    /* Neutral Colors */
    --qb-white: #FFFFFF;
    --qb-gray-50: #F8FAFC;
    --qb-gray-100: #F1F5F9;
    --qb-gray-200: #E2E8F0;
    --qb-gray-300: #CBD5E1;
    --qb-gray-400: #94A3B8;
    --qb-gray-500: #64748B;
    --qb-gray-600: #475569;
    --qb-gray-700: #334155;
    --qb-gray-800: #1E293B;
    --qb-gray-900: #0F172A;

    /* Semantic Colors */
    --qb-success: #10B981;
    --qb-success-light: #D1FAE5;
    --qb-success-dark: #059669;
    
    --qb-danger: #EF4444;
    --qb-danger-light: #FEE2E2;
    --qb-danger-dark: #DC2626;
    
    --qb-warning: #F59E0B;
    --qb-warning-light: #FEF3C7;
    --qb-warning-dark: #D97706;
    
    --qb-info: #3B82F6;
    --qb-info-light: #DBEAFE;
    --qb-info-dark: #2563EB;

    /* Functional UI mappings */
    --qb-bg-main: var(--qb-gray-50);
    --qb-text-main: var(--qb-gray-800);
    --qb-text-muted: var(--qb-gray-500);
    --qb-border: var(--qb-gray-200);
    
    /* Gradients */
    --qb-gradient-primary: linear-gradient(135deg, var(--qb-orange) 0%, #FF8C3A 100%);
    --qb-gradient-dark: linear-gradient(135deg, var(--qb-navy) 0%, var(--qb-navy-light) 100%);
    
    /* Shadows (Premium soft shadows) */
    --qb-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.05), 0 1px 2px rgba(17, 24, 39, 0.03);
    --qb-shadow-md: 0 4px 6px -1px rgba(17, 24, 39, 0.06), 0 2px 4px -1px rgba(17, 24, 39, 0.04);
    --qb-shadow-lg: 0 10px 15px -3px rgba(17, 24, 39, 0.08), 0 4px 6px -2px rgba(17, 24, 39, 0.04);
    --qb-shadow-xl: 0 20px 25px -5px rgba(17, 24, 39, 0.1), 0 10px 10px -5px rgba(17, 24, 39, 0.04);
    --qb-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    --qb-shadow-glow: 0 0 15px rgba(255, 107, 0, 0.3);
    --qb-shadow-glow-focus: 0 0 0 4px rgba(255, 107, 0, 0.2);

    /* Border Radius */
    --qb-radius-sm: 6px;
    --qb-radius-md: 12px;
    --qb-radius-lg: 16px;
    --qb-radius-xl: 24px;
    --qb-radius-2xl: 32px;
    --qb-radius-pill: 9999px;
    
    /* Spacing */
    --qb-space-1: 0.25rem; /* 4px */
    --qb-space-2: 0.5rem;  /* 8px */
    --qb-space-3: 0.75rem; /* 12px */
    --qb-space-4: 1rem;    /* 16px */
    --qb-space-5: 1.5rem;  /* 24px */
    --qb-space-6: 2rem;    /* 32px */
    --qb-space-8: 3rem;    /* 48px */
    --qb-space-10: 4rem;   /* 64px */
    --qb-space-12: 5rem;   /* 80px */
    --qb-space-16: 8rem;   /* 128px */

    /* Typography */
    --qb-font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    
    /* Transitions */
    --qb-transition-fast: 0.15s ease-in-out;
    --qb-transition-normal: 0.3s ease-in-out;
    --qb-transition-slow: 0.5s ease-in-out;
    --qb-transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}