frontend/src/index.css

/* Use project's custom Tailwind import */
@import "tailwindcss";

/* Add some custom styles to verify CSS is working correctly */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark mode override styles - these will apply when dark class is on html element */
.dark body {
  background-color: #111827;
  color: #e5e7eb;
}

.dark .bg-white {
  background-color: #1f2937 !important;
}

.dark .text-gray-900 {
  color: #f9fafb !important;
}

.dark .text-gray-800 {
  color: #f3f4f6 !important;
}

.dark .text-gray-700 {
  color: #e5e7eb !important;
}

.dark .text-gray-600 {
  color: #d1d5db !important;
}

.dark .text-gray-500 {
  color: #9ca3af !important;
}

.dark .border-gray-300 {
  border-color: #4b5563 !important;
}

.dark .bg-gray-100 {
  background-color: #374151 !important;
}

.dark .bg-gray-50 {
  background-color: #1f2937 !important;
}

.dark .shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24) !important;
}

.bg-custom-blue {
  background-color: #4a90e2; 
}

.text-custom-white {
  color: #ffffff;
}