@tailwind base;
@tailwind components;
@tailwind utilities;

/* VibeShift Brand Styles */

/* Brand Typography */
@layer base {
  .font-brand {
    font-family: var(--font-brand);
  }
  .font-display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
  }
}

/* Brand Gradients */
@layer components {
  .bg-vibeshift-primary {
    background: var(--vibeshift-gradient-primary);
  }
  .bg-vibeshift-secondary {
    background: var(--vibeshift-gradient-secondary);
  }
  .bg-vibeshift-accent {
    background: var(--vibeshift-gradient-accent);
  }
  
  .text-vibeshift-gradient {
    background: var(--vibeshift-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Brand Button Styles */
  .btn-vibeshift-primary {
    @apply bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 text-white font-medium px-6 py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105;
  }
  
  .btn-vibeshift-secondary {
    @apply bg-white/90 backdrop-blur-sm hover:bg-white text-gray-800 border border-gray-200 hover:border-gray-300 font-medium px-6 py-3 rounded-xl shadow-md hover:shadow-lg transition-all duration-300;
  }
  
  .btn-vibeshift-ghost {
    @apply bg-white/10 hover:bg-white/20 text-white border border-white/20 hover:border-white/30 font-medium px-6 py-3 rounded-xl backdrop-blur-sm transition-all duration-300;
  }
  
  /* Brand Card Styles */
  .card-vibeshift {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl border border-white/20 transition-all duration-300 hover:scale-[1.02] hover:bg-white/90;
  }
  
  /* Brand Input Styles */
  .input-vibeshift {
    @apply bg-white/90 backdrop-blur-sm border border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 rounded-xl px-4 py-3 font-medium transition-all duration-300 placeholder:text-gray-400;
  }
}

/* Brand Animations */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

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

@keyframes vibeshift-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes vibeshift-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

.animate-vibeshift-float {
  animation: vibeshift-float 3s ease-in-out infinite;
}

.animate-vibeshift-pulse {
  animation: vibeshift-pulse 2s ease-in-out infinite;
}

.animate-vibeshift-gradient {
  background-size: 200% 200%;
  animation: vibeshift-gradient-shift 3s ease infinite;
}

/* Brand Glass Morphism */
.glass-vibeshift {
  @apply bg-white/10 backdrop-blur-md border border-white/20;
}

.glass-vibeshift-strong {
  @apply bg-white/20 backdrop-blur-lg border border-white/30;
}

/* Premium Glow Effects */
.glow-vibeshift {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), 0 0 40px rgba(99, 102, 241, 0.2);
}

.glow-vibeshift-pink {
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.3), 0 0 40px rgba(236, 72, 153, 0.2);
}

.glow-vibeshift-cyan {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), 0 0 40px rgba(6, 182, 212, 0.2);
}

/* Fix Paddle Modal Overlay */
.paddle-overlay,
[class*="paddle"],
iframe[src*="paddle.com"] {
  position: fixed !important;
  z-index: 999999 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: none !important;
}

iframe[src*="paddle.com"] {
  background: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Hide quantity and VAT fields in Paddle */
iframe[src*="paddle.com"] {
  /* CSS injecté dans l'iframe ne fonctionne pas, donc on fait ça côté config Paddle */
}