:root {
  /* Primary Theme Colors */
  --primary-violet: #7C4DFF;
  --primary-violet-container: #EDE5FF;
  --secondary-teal: #00B4A3;
  --tertiary-coral: #FF6B6B;
  
  /* Surface Colors */
  --surface-1: #FFFFFF;
  --surface-2: #F8F9FA;
  --surface-3: #F1F3F5;
  --surface-4: #E9ECEF;
  
  /* Dark Mode Colors */
  --dark-surface-1: #1A1625;
  --dark-surface-2: #211D2E;
  --dark-surface-3: #2A2438;
  --dark-surface-4: #332B47;
  
  /* Animation Constants */
  --spring-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
  --bounce-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --swift-easing: cubic-bezier(0.23, 1, 0.32, 1);
  
  /* Elevation Values */
  --elevation-1: 0 2px 4px rgba(0,0,0,0.05);
  --elevation-2: 0 4px 8px rgba(0,0,0,0.1);
  --elevation-3: 0 8px 16px rgba(0,0,0,0.15);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --primary-violet: #B794FF;
  --primary-violet-container: #4A3880;
  --surface-1: var(--dark-surface-1);
  --surface-2: var(--dark-surface-2);
  --surface-3: var(--dark-surface-3);
  --surface-4: var(--dark-surface-4);
}

/* Animation Keyframes */
@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes borderGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(124, 77, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(124, 77, 255, 0);
  }
}

/* Utility Classes */
.animate-float {
  animation: floatIn 0.6s var(--spring-easing) forwards;
}

.animate-scale {
  animation: scaleIn 0.4s var(--bounce-easing) forwards;
}

.hover-glow {
  transition: all 0.3s var(--spring-easing);
}

.hover-glow:hover {
  animation: borderGlow 1.5s infinite;
}