/* 
 * Clean Dark Mode Support for Tailwind CSS
 * No more !important hacks - pure Tailwind approach
 */

:root {
  /* Light mode design tokens */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6B7280;
  
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB;
  --bg-tertiary: #F3F4F6;
  
  --border-primary: #E5E7EB;
  --border-secondary: #D1D5DB;
}

.dark {
  /* Dark mode design tokens */
  --text-primary: #F9FAFB;
  --text-secondary: #E5E7EB;
  --text-tertiary: #D1D5DB;
  
  --bg-primary: #111827;
  --bg-secondary: #1F2937;
  --bg-tertiary: #374151;
  
  --border-primary: #4B5563;
  --border-secondary: #6B7280;
}

/* Enhanced dark mode utilities */
.dark {
  color-scheme: dark;
}

/* Focus ring improvements for dark mode */
.dark *:focus {
  outline-color: theme('colors.primary.500');
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 2px;
}

/* Card shadow improvements for dark mode */
.dark .shadow-card {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.3), 
    0 2px 4px -1px rgba(0, 0, 0, 0.2), 
    0 0 0 1px rgba(75, 85, 99, 0.2);
}

/* Better text contrast for common patterns */
.dark .text-muted {
  @apply text-gray-400;
}

.dark .bg-muted {
  @apply bg-gray-800;
}

/* High contrast utility classes */
.dark-high-contrast {
  @apply dark:text-gray-100;
}

.dark-medium-contrast {
  @apply dark:text-gray-300;
}

.dark-low-contrast {
  @apply dark:text-gray-400;
}

/* Form improvements */
.dark input::placeholder,
.dark textarea::placeholder {
  @apply text-gray-500;
}

/* Better table contrast */
.dark table {
  @apply border-gray-700;
}

.dark th {
  @apply bg-gray-800 text-gray-200;
}

.dark td {
  @apply text-gray-300;
}

.dark tr:hover {
  @apply bg-gray-800;
}

/* Alert and notification improvements */
.dark .alert-info {
  @apply bg-blue-900 bg-opacity-20 text-blue-300 border-blue-800;
}

.dark .alert-success {
  @apply bg-green-900 bg-opacity-20 text-green-300 border-green-800;
}

.dark .alert-warning {
  @apply bg-yellow-900 bg-opacity-20 text-yellow-300 border-yellow-800;
}

.dark .alert-danger {
  @apply bg-red-900 bg-opacity-20 text-red-300 border-red-800;
}