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

/* Custom color scheme */
:root {
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
  --color-primary-950: #082f49;
}

/* Custom styles */
.btn-primary {
  @apply bg-primary-600 hover:bg-primary-700 text-white font-bold py-2 px-4 rounded;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded;
}

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

/* Loading spinner */
.spinner {
  @apply animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600;
}

/* Form styles */
.form-input {
  @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50;
}

.form-label {
  @apply block text-sm font-medium text-gray-700;
}

.form-error {
  @apply mt-2 text-sm text-red-600;
}

/* Transitions */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
} 