/* Dark mode overrides for compiled Tailwind CSS */

/* Basic elements */
body {
  background-color: var(--color-gray-50, #f9fafb);
  color: var(--color-gray-800, #1f2937);
}

.dark body {
  background-color: var(--color-gray-900, #111827);
  color: var(--color-gray-200, #e5e7eb);
}

/* Display utilities */
.dark\:block {
  display: none;
}

.dark\:hidden {
  display: block;
}

.dark .dark\:block {
  display: block;
}

.dark .dark\:hidden {
  display: none;
}

/* Background colors */
.dark\:bg-gray-700 {
  background-color: var(--color-white, #ffffff);
}

.dark\:bg-gray-800 {
  background-color: var(--color-white, #ffffff);
}

.dark\:bg-gray-900 {
  background-color: var(--color-gray-50, #f9fafb);
}

.dark .dark\:bg-gray-700 {
  background-color: var(--color-gray-700, #374151);
}

.dark .dark\:bg-gray-800 {
  background-color: var(--color-gray-800, #1f2937);
}

.dark .dark\:bg-gray-900 {
  background-color: var(--color-gray-900, #111827);
}

/* Primary background colors for dark mode */
.dark .dark\:bg-primary-600 {
  background-color: var(--color-primary-600, #ec282b);
}

.dark .dark\:bg-primary-700 {
  background-color: var(--color-primary-700, #d41a1d);
}

.dark .dark\:hover\:bg-primary-700:hover {
  background-color: var(--color-primary-700, #d41a1d);
}

.dark .dark\:hover\:bg-primary-500:hover {
  background-color: var(--color-primary-500, #ef4444);
}

/* Text colors */
.dark\:text-gray-100 {
  color: var(--color-gray-800, #1f2937);
}

.dark\:text-gray-200 {
  color: var(--color-gray-800, #1f2937);
}

.dark\:text-gray-300 {
  color: var(--color-gray-600, #4b5563);
}

.dark\:text-gray-400 {
  color: var(--color-gray-500, #6b7280);
}

.dark\:text-primary-400 {
  color: var(--color-primary-600, #ec282b);
}

.dark\:text-primary-500 {
  color: var(--color-primary-500, #ef4444);
}

.dark\:text-primary-600 {
  color: var(--color-primary-600, #ec282b);
}

.dark .dark\:text-gray-100 {
  color: var(--color-gray-100, #f3f4f6);
}

.dark .dark\:text-gray-200 {
  color: var(--color-gray-200, #e5e7eb);
}

.dark .dark\:text-gray-300 {
  color: var(--color-gray-300, #d1d5db);
}

.dark .dark\:text-gray-400 {
  color: var(--color-gray-400, #9ca3af);
}

.dark .dark\:text-primary-300 {
  color: var(--color-primary-300, #fca5a5);
}

.dark .dark\:text-primary-400 {
  color: var(--color-primary-500, #ef4444);
}

.dark .dark\:text-primary-500 {
  color: var(--color-primary-500, #ef4444);
}

.dark .dark\:text-primary-600 {
  color: var(--color-primary-600, #ec282b);
}

/* Border colors */
.dark\:border-gray-600 {
  border-color: var(--color-gray-200, #e5e7eb);
}

.dark\:border-gray-700 {
  border-color: var(--color-gray-300, #d1d5db);
}

.dark\:border-primary-500 {
  border-color: var(--color-primary-500, #ef4444);
}

.dark\:border-primary-600 {
  border-color: var(--color-primary-600, #ec282b);
}

.dark .dark\:border-gray-600 {
  border-color: var(--color-gray-600, #4b5563);
}

.dark .dark\:border-gray-700 {
  border-color: var(--color-gray-700, #374151);
}

.dark .dark\:border-primary-500 {
  border-color: var(--color-primary-500, #ef4444);
}

.dark .dark\:border-primary-600 {
  border-color: var(--color-primary-600, #ec282b);
}

/* Hover states */
.dark\:hover\:bg-gray-600:hover {
  background-color: var(--color-gray-100, #f3f4f6);
}

.dark\:hover\:bg-gray-700:hover {
  background-color: var(--color-gray-200, #e5e7eb);
}

.dark\:hover\:bg-primary-700:hover {
  background-color: var(--color-primary-700, #d41a1d);
}

.dark\:hover\:text-primary-400:hover {
  color: var(--color-primary-600, #ec282b);
}

.dark\:hover\:text-primary-300:hover {
  color: var(--color-primary-300, #fca5a5);
}

.dark .dark\:hover\:bg-gray-600:hover {
  background-color: var(--color-gray-600, #4b5563);
}

.dark .dark\:hover\:bg-gray-700:hover {
  background-color: var(--color-gray-700, #374151);
}

.dark .dark\:hover\:bg-primary-500:hover {
  background-color: var(--color-primary-500, #ef4444);
}

.dark .dark\:hover\:bg-primary-700:hover {
  background-color: var(--color-primary-700, #d41a1d);
}

.dark .dark\:hover\:text-primary-300:hover {
  color: var(--color-primary-300, #fca5a5);
}

.dark .dark\:hover\:text-primary-400:hover {
  color: var(--color-primary-400, #f87171);
}