@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 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-outline {
    @apply 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;
  }
}