@import "tailwindcss";

/* Custom styles */
@layer base {
  body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-300;
  }
  
  .btn-primary {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700;
  }
  
  .btn-secondary {
    @apply bg-white/10 text-white hover:bg-white/20 border border-white/20;
  }
  
  .card {
    @apply bg-white/10 backdrop-blur-md border border-white/20 rounded-xl p-6;
  }
  
  .input {
    @apply w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent;
  }
  
  .textarea {
    @apply w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none;
  }
}

@layer utilities {
  .text-shadow-lg {
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1),
                 0px 3px 2px rgba(0, 0, 0, 0.1),
                 0px 4px 8px rgba(0, 0, 0, 0.1);
  }
}