/* Base theme variables */
:root {
  color-scheme: light;
  /* These are fallbacks if theme variables aren't set */
  --color-background-light: #ffffff;
  --color-text-light: #1f2937;
  --bg-white-light: #ffffff;
  --bg-gray-50-light: #f9fafb;
  --bg-gray-100-light: #f3f4f6;
  --text-gray-500-light: #6b7280;
  --text-gray-600-light: #4b5563;
  --text-gray-700-light: #374151;
  --text-gray-800-light: #1f2937;
  --text-gray-900-light: #111827;
  --border-gray-200-light: #e5e7eb;
}

/* Dark mode variables */
html.dark {
  color-scheme: dark;
  --color-primary-dark: var(--color-primary);
  --color-secondary-dark: var(--color-secondary);
  --color-accent-dark: var(--color-accent);
  --color-background-dark: #1f2937;
  --color-text-dark: #f9fafb;
  --bg-white-dark: #1f2937;
  --bg-gray-50-dark: #111827;
  --bg-gray-100-dark: #374151;
  --text-gray-500-dark: #9ca3af;
  --text-gray-600-dark: #d1d5db;
  --text-gray-700-dark: #e5e7eb;
  --text-gray-800-dark: #f3f4f6;
  --text-gray-900-dark: #f9fafb;
  --border-gray-200-dark: #374151;
}

/* Smooth transitions for theme changes */
.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Ensure transitions are smooth */
html, body, * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Base styles for light mode (default) */
html {
  background-color: var(--color-background, var(--color-background-light)) !important;
  color: var(--color-text, var(--color-text-light)) !important;
}

body {
  background-color: var(--color-background, var(--color-background-light)) !important;
  color: var(--color-text, var(--color-text-light)) !important;
}

/* Add these rules to ensure background colors are applied */
.bg-white {
  background-color: var(--color-background-light) !important;
}

/* Light mode specific styles */
html[data-theme="light"] {
  color-scheme: light;
}

/* Dark mode specific styles */
html[data-theme="dark"],
html.dark {
  background-color: var(--color-background, var(--color-background-dark)) !important;
  color: var(--color-text, var(--color-text-dark)) !important;
}

html.dark body {
  background-color: var(--color-background, var(--color-background-dark)) !important;
  color: var(--color-text, var(--color-text-dark)) !important;
}

html.dark .bg-white, 
html.dark .bg-gray-800,
html.dark .bg-gray-900 {
  background-color: var(--color-background-dark) !important;
}

/* Component-specific dark mode styles */
html.dark .bg-white {
  background-color: var(--bg-white-dark);
}

html.dark .bg-gray-50 {
  background-color: var(--bg-gray-50-dark);
}

html.dark .bg-gray-100 {
  background-color: var(--bg-gray-100-dark);
}

html.dark .text-gray-500 {
  color: var(--text-gray-500-dark);
}

html.dark .text-gray-600 {
  color: var(--text-gray-600-dark);
}

html.dark .text-gray-700 {
  color: var(--text-gray-700-dark);
}

html.dark .text-gray-800 {
  color: var(--text-gray-800-dark);
}

html.dark .text-gray-900 {
  color: var(--text-gray-900-dark);
}

html.dark .border-gray-200 {
  border-color: var(--border-gray-200-dark);
}

html.dark .shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

/* Ensure text in dark mode is visible */
html.dark h1, 
html.dark h2, 
html.dark h3, 
html.dark h4, 
html.dark h5, 
html.dark h6 {
  color: var(--text-gray-900-dark);
}

/* Fix for specific components */
html.dark .prose {
  color: var(--text-gray-600-dark);
}

html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4 {
  color: var(--text-gray-900-dark);
}

html.dark .prose a {
  color: var(--color-primary-dark, var(--color-primary));
}

/* Fix for the homepage hero section */
html.dark .text-\[var\(--color-text\)\] {
  color: var(--color-text-dark);
}

/* Target specific elements in the homepage */
html.dark .relative.bg-white {
  background-color: var(--bg-white-dark);
}

html.dark .relative.z-10.pb-8.bg-white {
  background-color: var(--bg-white-dark);
}

/* Custom styles can be added here */