:root {
    /* Brand Colors - Core */
    --qb-orange: #F95699;
    --qb-orange-hover: #E44788;
    --qb-orange-active: #C92F72;
    --qb-orange-light: #FFF0F6;
    
    --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);

    /* Warm Surfaces & Brand Tones */
    --qb-peach: #FFF5F9;
    --qb-peach-border: #FBCFE2;
    --qb-peach-hover: #FFE4EF;
    --qb-cream: #FFFDF9;
    --qb-warm-bg: #FFFBF5;
    --qb-light-gray: #F8FAFC;
    --qb-green: #16A34A;
    --qb-green-light: #DCFCE7;
    --qb-green-border: #BBF7D0;
    --qb-green-dark: #15803D;
    
    /* Gradients */
    --qb-gradient-primary: linear-gradient(135deg, var(--qb-orange) 0%, #FF8AB9 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(249, 86, 153, 0.3);
    --qb-shadow-glow-focus: 0 0 0 4px rgba(249, 86, 153, 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 - Optimized Compact Scale (12-16px component, 20-28px sections) */
    --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.25rem; /* 20px */
    --qb-space-6: 1.5rem;  /* 24px */
    --qb-space-7: 1.75rem; /* 28px */
    --qb-space-8: 2rem;    /* 32px */
    --qb-space-10: 2.5rem; /* 40px */
    --qb-space-12: 3rem;   /* 48px */
    --qb-space-16: 3.5rem; /* 56px */

    /* Typography */
    --qb-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 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);
}