:root {
    
    --color-violet: #7C3AED;
  --color-violet-light: #A78BFA;
  --color-violet-pastel: #B9AFE3;
  
    --color-lila-light: #F8F7FF;
  --color-dark-gray: #1F2937;
  --color-white: #FFFFFF;
  
    --color-accent-warm: #FF6B6B;
  --color-accent-cold: #10B981;
  --color-accent-golden: #FBBF24;
  
    --color-success: #059669;
  --color-error: #DC2626;
  --color-warning: #F59E0B;
  --color-info: var(--color-violet);
  
    --bg-primary: var(--color-lila-light);
  --bg-secondary: var(--color-white);
  --bg-elevated: var(--color-white);
  
    --text-primary: var(--color-dark-gray);
  --text-secondary: rgba(31, 41, 55, 0.7);
  --text-tertiary: rgba(31, 41, 55, 0.5);
  --text-inverse: var(--color-white);
  
    --border-light: rgba(31, 41, 55, 0.1);
  --border-medium: rgba(31, 41, 55, 0.2);
  --border-strong: rgba(31, 41, 55, 0.3);
  
    
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-pacifico: 'Pacifico', cursive;
  --font-great-vibes: 'Great Vibes', cursive;
  
    --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  
    --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
    --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
    --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  
    
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  
    
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(31, 41, 55, 0.05);
  --shadow-sm: 0 2px 4px rgba(31, 41, 55, 0.08);
  --shadow-md: 0 4px 12px rgba(31, 41, 55, 0.12);
  --shadow-lg: 0 8px 24px rgba(31, 41, 55, 0.16);
  --shadow-xl: 0 12px 32px rgba(31, 41, 55, 0.20);
  
    
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  
    
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
    
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  
    
  --breakpoint-sm: 360px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;
  
    
  --container-mobile: 100%;
  --container-tablet: 720px;
  --container-desktop: 1200px;
  
  --navbar-height: 64px;
  --footer-height: 80px;
  
    
    --touch-target-min: 44px;
  
    --card-padding: var(--space-5);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  
    --button-height-sm: 36px;
  --button-height-md: 44px;
  --button-height-lg: 52px;
  --button-padding-x: var(--space-6);
  --button-radius: var(--radius-lg);
  
    --input-height: 44px;
  --input-padding-x: var(--space-4);
  --input-radius: var(--radius-md);
  --input-border: 1px solid var(--border-medium);
  
    --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.2);
  --focus-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.2);

    
    --glass-bg-light: rgba(255, 255, 255, 0.75);
  --glass-bg-medium: rgba(255, 255, 255, 0.85);
  --glass-bg-strong: rgba(255, 255, 255, 0.95);
  
    --glass-blur-sm: blur(8px);
  --glass-blur-md: blur(12px);
  --glass-blur-lg: blur(20px);
  
    --glass-border-light: 1px solid rgba(124, 58, 237, 0.12);
  --glass-border-medium: 1px solid rgba(124, 58, 237, 0.20);
  --glass-border-strong: 1px solid rgba(124, 58, 237, 0.30);
  --glass-border-white: 1px solid rgba(255, 255, 255, 0.25);
  
    --glass-shadow-sm: 
    0 2px 10px rgba(124, 58, 237, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-shadow-md: 
    0 4px 16px rgba(124, 58, 237, 0.10),
    0 2px 8px rgba(31, 41, 55, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-shadow-lg: 
    0 6px 28px rgba(124, 58, 237, 0.12),
    0 2px 8px rgba(31, 41, 55, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  
    --glass-saturate: saturate(150%);
  --glass-saturate-high: saturate(180%);
  
    
    --surface-base: var(--color-lila-light);
  --surface-base-rgb: 248, 247, 255;
  --surface-raised: var(--color-white);
  --surface-overlay: rgba(255, 255, 255, 0.95);
  
    --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-subtle: var(--text-tertiary);
  
    --border-default: var(--border-light);
  --border-subtle: rgba(31, 41, 55, 0.05);
  
    --primary: var(--color-violet);
  --primary-hover: #6D28D9;
  --primary-active: #5B21B6;
  --primary-rgb: 124, 58, 237;
  
    --success: var(--color-success);
  --error: var(--color-error);
  --warning: var(--color-warning);
  --info: var(--color-info);
}