/* Custom dark mode styles */
.dark {
  --bg-primary: theme('colors.gray.900');
  --bg-secondary: theme('colors.gray.800');
  --text-primary: theme('colors.gray.100');
  --text-secondary: theme('colors.gray.300');
  --border-color: theme('colors.gray.700');
}

/* Dark mode transition */
.dark body,
.dark header,
.dark main,
.dark footer,
.dark nav,
.dark button,
.dark a,
.dark input,
.dark textarea,
.dark select {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Focus styles for dark mode */
.dark *:focus-visible {
  outline: 2px solid theme('colors.blue.500');
  outline-offset: 2px;
}

/* Custom styles for form elements in dark mode */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="month"],
.dark input[type="week"],
.dark input[type="time"],
.dark textarea,
.dark select {
  background-color: theme('colors.gray.800');
  border-color: theme('colors.gray.700');
  color: theme('colors.gray.100');
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark input[type="search"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="url"]:focus,
.dark input[type="date"]:focus,
.dark input[type="datetime-local"]:focus,
.dark input[type="month"]:focus,
.dark input[type="week"]:focus,
.dark input[type="time"]:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: theme('colors.blue.500');
  box-shadow: 0 0 0 1px theme('colors.blue.500');
}

/* Custom styles for buttons in dark mode */
.dark .btn-primary {
  background-color: theme('colors.blue.600');
  color: theme('colors.white');
}

.dark .btn-primary:hover {
  background-color: theme('colors.blue.700');
}

.dark .btn-secondary {
  background-color: theme('colors.gray.700');
  color: theme('colors.white');
}

.dark .btn-secondary:hover {
  background-color: theme('colors.gray.600');
}

/* Custom styles for tables in dark mode */
.dark table {
  background-color: theme('colors.gray.800');
  color: theme('colors.gray.100');
}

.dark thead {
  background-color: theme('colors.gray.700');
}

.dark tbody tr:hover {
  background-color: theme('colors.gray.700');
}

/* Custom card styles for dark mode */
.dark .card {
  background-color: theme('colors.gray.800');
  border-color: theme('colors.gray.700');
}

/* Custom pagination styles for dark mode */
.dark .pagination {
  background-color: theme('colors.gray.800');
  border-color: theme('colors.gray.700');
}

.dark .pagination a {
  color: theme('colors.gray.300');
}

.dark .pagination a:hover {
  background-color: theme('colors.gray.700');
}

/* Dark mode for code blocks */
.dark code,
.dark pre {
  background-color: theme('colors.gray.800');
  border-color: theme('colors.gray.700');
  color: theme('colors.gray.200');
}