@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;
}

/* Loading States & UX Improvements */

/* Turbo Progress Bar */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* Button Loading States */
button:disabled, 
button.loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Mobile Touch Feedback */
button:active, 
a:active,
.btn:active {
  transform: scale(0.98);
  opacity: 0.8;
}

/* Prevent tap highlight on mobile */
button,
a,
.btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Link Loading State */
a.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Smooth transitions */
button,
a {
  transition: opacity 0.15s ease, transform 0.1s ease;
}