/* Dark Mode Styles - Manual Override */

.dark {
  color-scheme: dark;
}

/* Smooth transitions for theme switching */
body,
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-indigo-50,
.bg-indigo-100,
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500,
.border-gray-200 {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Base backgrounds and text */
.dark body,
.dark .bg-white {
  background-color: rgb(17 24 39) !important; /* gray-900 */
  color: rgb(243 244 246) !important; /* gray-100 */
}

.dark .bg-gray-50 {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

.dark .bg-gray-100 {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

.dark .bg-indigo-50 {
  background-color: rgba(49 46 129 / 0.1) !important; /* indigo-900/10 */
}

.dark .bg-indigo-100 {
  background-color: rgba(49 46 129 / 0.2) !important; /* indigo-900/20 */
}

/* Text colors */
.dark .text-gray-800,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: rgb(243 244 246) !important; /* gray-100 */
}

.dark .text-gray-700 {
  color: rgb(229 231 235) !important; /* gray-200 */
}

.dark .text-gray-600 {
  color: rgb(209 213 219) !important; /* gray-300 */
}

.dark .text-gray-500 {
  color: rgb(156 163 175) !important; /* gray-400 */
}

.dark .text-indigo-500,
.dark .text-indigo-600 {
  color: rgb(129 140 248) !important; /* indigo-400 */
}

.dark .text-indigo-700 {
  color: rgb(165 180 252) !important; /* indigo-300 */
}

/* Borders */
.dark .border-gray-200 {
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

.dark .border-gray-300 {
  border-color: rgb(75 85 99) !important; /* gray-600 */
}

.dark .border-indigo-100 {
  border-color: rgb(67 56 202) !important; /* indigo-800 */
}

.dark .border-indigo-200 {
  border-color: rgb(79 70 229) !important; /* indigo-700 */
}

/* Buttons and interactive elements */
.dark .bg-indigo-500 {
  background-color: rgb(99 102 241) !important; /* indigo-500 */
}

.dark .bg-indigo-500:hover {
  background-color: rgb(79 70 229) !important; /* indigo-600 */
}

.dark .hover\:bg-indigo-600:hover {
  background-color: rgb(79 70 229) !important;
}

/* Gradients */
.dark .from-indigo-100 {
  --tw-gradient-from: rgba(49 46 129 / 0.2) !important;
}

.dark .to-white {
  --tw-gradient-to: rgb(17 24 39) !important;
}

/* Specific component overrides */
.dark article {
  background-color: rgba(49 46 129 / 0.1) !important;
  border-color: rgb(67 56 202) !important;
}

.dark table {
  background-color: rgb(31 41 55) !important;
  border-color: rgb(55 65 81) !important;
}

.dark thead {
  background-color: rgb(55 65 81) !important;
}

.dark th {
  color: rgb(229 231 235) !important;
  border-color: rgb(75 85 99) !important;
}

.dark td {
  color: rgb(156 163 175) !important;
  border-color: rgb(55 65 81) !important;
}

/* Tags and badges */
.dark .bg-white.rounded-full {
  background-color: rgb(31 41 55) !important;
}

.dark .bg-indigo-100.rounded-full {
  background-color: rgba(49 46 129 / 0.3) !important;
}

/* Form inputs */
.dark input,
.dark textarea,
.dark select {
  background-color: rgb(55 65 81) !important;
  border-color: rgb(75 85 99) !important;
  color: rgb(243 244 246) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: rgb(156 163 175) !important;
}

/* Links */
.dark a {
  color: rgb(129 140 248) !important;
}

.dark a:hover {
  color: rgb(165 180 252) !important;
}

/* Strong/bold text */
.dark strong {
  color: rgb(243 244 246) !important;
}

/* SVG fills */
.dark .fill-gray-400 {
  fill: rgb(156 163 175) !important;
}

.dark .fill-indigo-500 {
  fill: rgb(129 140 248) !important;
}

.dark .fill-indigo-300 {
  fill: rgb(165 180 252) !important;
}

/* Shadow adjustments */
.dark .shadow-xs,
.dark .shadow-sm,
.dark .shadow-md {
  box-shadow: none !important;
}

/* Theme Toggle Button */
#theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

#theme-toggle:hover {
  background-color: rgba(99, 102, 241, 0.1);
}

.dark #theme-toggle:hover {
  background-color: rgba(129, 140, 248, 0.1);
}

#theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Title Logo Light/Dark Mode Toggle */
.title-logo {
  width: auto !important;
  max-width: 100% !important;
  height: 80px !important;
}

@media (min-width: 768px) {
  .title-logo {
    height: 100px !important;
  }
}

/* Experiment List Font Size Adjustments */
#experiments-list h3,
#related-experiments h3 {
  font-size: 0.875rem !important;
}

@media (min-width: 768px) {
  #experiments-list h3,
  #related-experiments h3 {
    font-size: 1rem !important;
  }
}

#experiments-list .text-xs,
#related-experiments .text-xs {
  font-size: 0.625rem !important;
}

@media (min-width: 768px) {
  #experiments-list .text-xs,
  #related-experiments .text-xs {
    font-size: 0.75rem !important;
  }
}

#experiments-list .text-sm,
#experiments-list .md\:text-sm,
#related-experiments .text-sm,
#related-experiments .md\:text-sm {
  font-size: 0.75rem !important;
}

/* Experiment Detail Page Font Size Adjustments */
#experiment-content h1 {
  font-size: 1rem !important;
}

@media (min-width: 768px) {
  #experiment-content h1 {
    font-size: 1.25rem !important;
  }
}

#experiment-content h2 {
  font-size: 0.9375rem !important;
}

@media (min-width: 768px) {
  #experiment-content h2 {
    font-size: 1.125rem !important;
  }
}

#experiment-content h3 {
  font-size: 0.8125rem !important;
}

@media (min-width: 768px) {
  #experiment-content h3 {
    font-size: 0.9375rem !important;
  }
}

#experiment-content p,
#experiment-content li,
#experiment-content td {
  font-size: 0.8125rem !important;
}

@media (min-width: 768px) {
  #experiment-content p,
  #experiment-content li,
  #experiment-content td {
    font-size: 0.9375rem !important;
  }
}

.title-logo-light {
  display: block;
}

.title-logo-dark {
  display: none;
}

.dark .title-logo-light {
  display: none;
}

.dark .title-logo-dark {
  display: block;
}

/* Improved readability for paragraphs */
.dark p {
  color: rgb(209 213 219) !important; /* gray-300 for better readability */
}

/* List items */
.dark li {
  color: rgb(209 213 219) !important;
}

/* Code blocks if any */
.dark code,
.dark pre {
  background-color: rgb(31 41 55) !important;
  color: rgb(229 231 235) !important;
  border-color: rgb(55 65 81) !important;
}

/* Improved contrast for important text */
.dark .font-bold,
.dark .font-semibold {
  color: rgb(243 244 246) !important;
}

/* Newsletter and CTA sections */
.dark .bg-gray-50.rounded-xl,
.dark .bg-gray-50.rounded-lg {
  background-color: rgb(31 41 55) !important;
}

/* Footer links */
.dark footer a {
  color: rgb(156 163 175) !important;
}

.dark footer a:hover {
  color: rgb(209 213 219) !important;
}

/* Ensure buttons remain visible and clickable */
.dark button,
.dark .btn,
.dark .btn-sm {
  color: rgb(255 255 255) !important;
}

/* Icon backgrounds in footer */
.dark .bg-indigo-100:not(.rounded-full) {
  background-color: rgba(99 102 241 / 0.2) !important;
}

/* Dividers and separators */
.dark hr,
.dark .border-t {
  border-color: rgb(55 65 81) !important;
}

/* Card headings for better hierarchy */
.dark h3.font-semibold,
.dark h4.font-bold {
  color: rgb(243 244 246) !important;
}

/* Meta information and timestamps */
.dark .text-sm.text-gray-500 {
  color: rgb(156 163 175) !important;
}

/* Ensure all text contrasts properly with backgrounds */
.dark article h4,
.dark article h3 {
  color: rgb(243 244 246) !important;
}

.dark article p,
.dark article span:not(.bg-white):not(.bg-indigo-100) {
  color: rgb(209 213 219) !important;
}

/* Fix for specific tag text colors */
.dark .text-gray-700.rounded-full {
  color: rgb(209 213 219) !important;
}

.dark .text-indigo-700.rounded-full {
  color: rgb(165 180 252) !important;
}