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

:root {
  --brand-orange: #FF9D00;
  --brand-orange-dark: #FF6B00;
  --brand-pink: #FF0066;
  --brand-pink-dark: #FF006B;
  --brand-purple: #D600AA;
  --brand-violet: #7700FF;
  --brand-blue: #0066FF;
}

@layer base {
  body {
    @apply bg-black text-white;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-white transition-all duration-200;
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-pink) 100%);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(255, 157, 0, 0.3);
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-white border border-white/20 bg-white/5 backdrop-blur transition-all duration-200;
  }

  .btn-secondary:hover {
    @apply bg-white/10 border-white/40;
  }

  .gradient-text {
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-pink) 50%, var(--brand-violet) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .card {
    @apply rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl p-6;
  }

  .card-hover {
    @apply transition-all duration-300;
  }

  .card-hover:hover {
    @apply border-white/20 bg-white/10;
    transform: translateY(-4px);
  }

  .glow-orange {
    box-shadow: 0 0 60px rgba(255, 157, 0, 0.2);
  }

  .glow-pink {
    box-shadow: 0 0 60px rgba(255, 0, 102, 0.2);
  }

  .glow-violet {
    box-shadow: 0 0 60px rgba(119, 0, 255, 0.2);
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Animated background gradient */
.animated-gradient {
  background: linear-gradient(-45deg, #0a0a0a, #1a1a2e, #0f0f1a, #1a0a1a);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

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

/* Floating animation for decorative elements */
.float {
  animation: float 6s ease-in-out infinite;
}

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