:root {
  /* Floating Theme - Light and Airy Colors */
  --primary: 79 70 229; /* indigo-600 */
  --primary-foreground: 255 255 255;
  
  --secondary: 147 51 234; /* purple-600 */
  --secondary-foreground: 255 255 255;
  
  --accent: 236 72 153; /* pink-500 */
  --accent-foreground: 255 255 255;
  
  --background: 255 255 255; /* white */
  --foreground: 31 41 55; /* gray-800 */
  
  --card: 255 255 255;
  --card-foreground: 31 41 55;
  
  --popover: 255 255 255;
  --popover-foreground: 31 41 55;
  
  --muted: 243 244 246; /* gray-100 */
  --muted-foreground: 107 114 128; /* gray-500 */
  
  --destructive: 239 68 68; /* red-500 */
  --destructive-foreground: 255 255 255;
  
  --border: 229 231 235; /* gray-200 */
  --input: 243 244 246; /* gray-100 */
  --ring: 79 70 229; /* indigo-600 */
  
  --radius: 1.5rem;
  
  /* Custom gradients */
  --gradient-primary: linear-gradient(135deg, rgb(99, 102, 241), rgb(147, 51, 234));
  --gradient-secondary: linear-gradient(135deg, rgb(236, 72, 153), rgb(167, 243, 208));
  --gradient-accent: linear-gradient(135deg, rgb(129, 140, 248), rgb(196, 181, 253));
  
  /* Floating effects */
  --shadow-float: 0 20px 40px rgba(99, 102, 241, 0.15);
  --shadow-float-hover: 0 30px 60px rgba(99, 102, 241, 0.25);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.1);
  
  /* Background patterns */
  --pattern-dots: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
  --pattern-grid: linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
}

/* Floating animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes float-rotate {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}

@keyframes soft-glow {
  0%, 100% { box-shadow: var(--shadow-float); }
  50% { box-shadow: var(--shadow-float-hover); }
}

/* Glassmorphism with floating effect */
.glass-float {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-float);
  transition: all 0.3s ease;
}

.glass-float:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float-hover);
}

/* Bubble effects */
.bubble {
  position: relative;
  overflow: hidden;
}

.bubble::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
  animation: bubble-move 6s ease-in-out infinite;
}

@keyframes bubble-move {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-30px, 30px) rotate(240deg); }
}

/* Soft rounded corners */
.rounded-soft {
  border-radius: var(--radius);
}

.rounded-extra-soft {
  border-radius: 2rem;
}

/* Floating text effect */
.floating-text {
  animation: gentle-bounce 3s ease-in-out infinite;
}

/* Cloud-like shadows */
.cloud-shadow {
  box-shadow: 
    0 10px 30px rgba(99, 102, 241, 0.1),
    0 20px 60px rgba(147, 51, 234, 0.05),
    0 30px 90px rgba(236, 72, 153, 0.03);
}

/* Weightless interaction */
.weightless {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.weightless:hover {
  transform: translateY(-8px) scale(1.02);
}

/* Masonry layout helpers */
.masonry-item {
  break-inside: avoid;
  margin-bottom: 2rem;
}

/* Custom scrollbar for floating theme */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(243, 244, 246, 0.8);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgb(99, 102, 241), rgb(147, 51, 234));
  border-radius: 6px;
  border: 2px solid rgba(243, 244, 246, 0.8);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgb(79, 70, 229), rgb(126, 34, 206));
}