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

@layer components {
  /* Gradients */
  .gradient-primary {
    background: linear-gradient(135deg, #6366F1, #8B5CF6, #06B6D4);
  }

  .gradient-cta {
    background: linear-gradient(90deg, #6366F1, #06B6D4);
  }

  .gradient-accent {
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
  }

  /* Buttons */
  .btn-primary {
    @apply inline-flex items-center whitespace-nowrap text-white rounded-full px-6 py-3 font-semibold transition-all duration-200;
    background: linear-gradient(90deg, #6366F1, #06B6D4);
  }
  .btn-primary:hover {
    @apply shadow-lg shadow-indigo-500/30;
    transform: translateY(-1px);
  }

  .btn-secondary {
    @apply bg-gray-100 text-gray-700 rounded-full px-6 py-3 font-semibold transition-all duration-200;
  }
  .btn-secondary:hover {
    @apply bg-gray-200;
  }

  .btn-danger {
    @apply bg-red-600 text-white rounded-full px-6 py-3 font-semibold transition-all duration-200;
  }
  .btn-danger:hover {
    @apply bg-red-700 shadow-lg shadow-red-500/30;
    transform: translateY(-1px);
  }

  .btn-outline {
    @apply inline-flex items-center whitespace-nowrap bg-white border-2 border-squad-purple text-squad-purple rounded-full px-6 py-3 font-semibold transition-all duration-200;
  }
  .btn-outline:hover {
    @apply bg-squad-purple text-white;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-2xl shadow-sm p-6;
  }

  .card-elevated {
    @apply bg-white rounded-2xl shadow-lg p-6;
  }
}