:root {
    /* Core Brand Colors - Vlara Theme */
    --deep-purple: #2D1B3A;      /* Deep Purple - primary background */
    --primary-purple: #6B2E6F;    /* Primary Purple - secondary elements */
    --vibrant-pink: #D53B6B;      /* Vibrant Pink - primary accent */
    --soft-magenta: #B83B7A;      /* Soft Magenta - secondary accent */
    --warm-orange: #FF6B4A;       /* Warm Orange - call to action */
    --cool-blue: #4A90E2;         /* Cool Blue - links */
    --light-blue-end: #6EC8E0;    /* Light Blue - gradients */
    
    /* Generated Variations */
    --deep-purple-light: #3F2B4A;
    --deep-purple-dark: #1B0F28;
    --primary-purple-light: #8B3E8F;
    --primary-purple-dark: #4B1E4F;
    --vibrant-pink-light: #F54B7B;
    --vibrant-pink-dark: #B52B5B;
    --soft-magenta-light: #D84B8A;
    --soft-magenta-dark: #982B5A;
    --warm-orange-light: #FF8B6A;
    --warm-orange-dark: #E54B3A;
    --cool-blue-light: #6AB0FF;
    --cool-blue-dark: #2A70C2;
    
    /* Background Colors */
    --bg-primary: var(--deep-purple-dark);
    --bg-secondary: var(--deep-purple);
    --bg-card: var(--deep-purple-light);
    --bg-hover: var(--primary-purple);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-glass: rgba(45, 27, 58, 0.8);
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-dark: var(--deep-purple-dark);
    
    /* Accent Colors */
    --accent-primary: var(--vibrant-pink);
    --accent-secondary: var(--soft-magenta);
    --accent-tertiary: var(--warm-orange);
    --accent-blue: var(--cool-blue);
    --accent-light: var(--light-blue-end);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--vibrant-pink), var(--soft-magenta));
    --gradient-secondary: linear-gradient(135deg, var(--soft-magenta), var(--warm-orange));
    --gradient-accent: linear-gradient(135deg, var(--cool-blue), var(--light-blue-end));
    --gradient-hero: linear-gradient(135deg, var(--deep-purple), var(--primary-purple), var(--vibrant-pink));
    --gradient-card: linear-gradient(180deg, transparent, var(--deep-purple-dark));
    --gradient-glow: radial-gradient(circle at center, var(--vibrant-pink), transparent);
    
    /* Borders */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: var(--vibrant-pink);
    --border-focus: var(--warm-orange);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(213, 59, 107, 0.3);
    --shadow-glow-strong: 0 0 30px rgba(213, 59, 107, 0.5);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
    --z-toast: 1070;
}

/* Light theme variant */
.theme-light {
    --bg-primary: #F5F0FF;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    --text-primary: var(--deep-purple-dark);
    --text-secondary: var(--deep-purple);
    --text-muted: var(--primary-purple);
    --border-color: rgba(45, 27, 58, 0.1);
}