/* Best NSFW Generator - Hot Pink/Purple Playful Theme */
:root {
  --color-primary: #ec4899;
  --color-primary-hover: #db2777;
  --color-accent: #7c3aed;
  --color-accent-hover: #6d28d9;
  --color-gradient-from: #ec4899;
  --color-gradient-to: #db2777;
  --color-accent-gradient-from: #7c3aed;
  --color-accent-gradient-to: #6d28d9;
  
  /* Legacy colors for backwards compatibility */
  --primary-50: #fdf2f8;
  --primary-100: #fce7f3;
  --primary-500: #ec4899;
  --primary-600: #db2777;
  --primary-700: #be185d;
  --primary-800: #9d174d;
  --primary-900: #831843;
  
  --accent-50: #faf5ff;
  --accent-100: #f3e8ff;
  --accent-800: #581c87;
  --accent-900: #3b0764;
  
  --font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Playful rounded styling */
.playful-card {
  @apply border border-pink-500/30 bg-gradient-to-br from-pink-600/20 to-purple-800/30 rounded-3xl;
  box-shadow: 0 20px 40px rgba(236, 72, 153, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.playful-card:hover {
  @apply border-pink-400/60;
  box-shadow: 0 25px 50px rgba(236, 72, 153, 0.4);
  transform: translateY(-5px) scale(1.02);
}

/* Rounded corners everywhere */
.rounded-element {
  @apply rounded-2xl;
}

.button-playful {
  @apply bg-gradient-to-r from-pink-500 to-purple-600 rounded-full px-8 py-3 font-semibold;
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3);
}

.button-playful:hover {
  @apply from-pink-400 to-purple-500;
  box-shadow: 0 15px 40px rgba(236, 72, 153, 0.5);
  transform: translateY(-2px);
}

/* Bubble effect hero */
.bubble-hero {
  background: linear-gradient(
    135deg,
    rgba(236, 72, 153, 0.8) 0%,
    rgba(88, 28, 135, 0.6) 100%
  );
  position: relative;
  overflow: hidden;
}

.bubble-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(236, 72, 153, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(147, 51, 234, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 0%, rgba(219, 39, 119, 0.2) 0%, transparent 50%);
  animation: bubbleFloat 20s ease-in-out infinite;
}

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

/* Friendly tone styling */
.friendly-text {
  @apply font-medium;
  line-height: 1.6;
}

.emoji-accent {
  @apply text-2xl mr-2;
}

/* Playful badges */
.fun-badge {
  @apply bg-gradient-to-r from-pink-400 to-purple-500 text-white font-bold px-4 py-2 rounded-full text-sm;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
  animation: wiggle 2s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  75% { transform: rotate(-1deg); }
}

/* Score styling */
.score-playful {
  @apply text-pink-400 font-bold text-3xl;
  text-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
}

/* Interactive elements */
.heart-icon {
  @apply text-pink-400;
  transition: all 0.3s ease;
}

.heart-icon:hover {
  @apply text-pink-300;
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.8));
}