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

/* Custom styles */
@layer components {
  .btn-primary {
    @apply bg-gradient-to-r from-blue-600 to-green-600 text-white font-bold py-3 px-6 rounded-lg hover:from-blue-700 hover:to-green-700 transition-all shadow-lg;
  }
  
  .btn-secondary {
    @apply bg-white text-gray-700 font-semibold py-3 px-6 rounded-lg border-2 border-gray-300 hover:border-blue-500 transition-all;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg p-6;
  }
  
  .input-field {
    @apply w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition text-lg;
  }
}

/* Green and Blue Theme Variables */
:root {
  --primary-green: #10b981;
  --primary-blue: #3b82f6;
  --dark-green: #059669;
  --dark-blue: #2563eb;
}