/* Base variables for light mode */
:root {
  --primary-color: #8A2BE2; /* Soft violet-purple */
  --secondary-color: #F0F0F0; /* Light grey */
  --background-color: #FFFFFF; /* White */
  --accent-blue: #87CEEB; /* Bright sky blue */
  --accent-orange-brown: #D2B48C; /* Muted orange-brown */
  --accent-green: #90EE90; /* Subtle green */
  --text-primary: #1a202c; /* Keeping existing dark text for contrast */
  --text-secondary: #4a5568; /* Keeping existing secondary text */
}

/* Dark mode variables */
html.dark-mode {
  --primary-color: #9A4BFF; /* Lighter purple for dark mode */
  --secondary-color: #2D3748; /* Dark gray for secondary elements */
  --background-color: #1A202C; /* Very dark blue-gray */
  --text-primary: #F7FAFC; /* Off-white for primary text */
  --text-secondary: #A0AEC0; /* Lighter gray for secondary text */
}

/* Apply dark mode styles */
html.dark-mode body {
  background-color: var(--background-color) !important;
  color: var(--text-primary) !important;
}

html.dark-mode .bg-white {
  background-color: var(--secondary-color) !important;
}

html.dark-mode .text-\[var\(--text-primary\)\] {
  color: var(--text-primary) !important;
}

html.dark-mode .text-\[var\(--text-secondary\)\] {
  color: var(--text-secondary) !important;
}

html.dark-mode .border-gray-200 {
  border-color: #4A5568 !important;
}

html.dark-mode .transparent-gradient-purple {
    background-image: linear-gradient(to bottom right, rgba(154, 75, 255, 0.1), rgba(154, 75, 255, 0.05));
}

/* Specific overrides for elements that might not use var() directly */
html.dark-mode .text-gray-800 { color: var(--text-primary) !important; }
html.dark-mode .text-gray-700 { color: var(--text-secondary) !important; }
html.dark-mode .text-gray-600 { color: var(--text-secondary) !important; }
html.dark-mode .text-gray-500 { color: var(--text-secondary) !important; }
html.dark-mode .text-black { color: var(--text-primary) !important; }
html.dark-mode .bg-gray-100 { background-color: var(--secondary-color) !important; }
html.dark-mode .bg-green-50 { background-color: var(--secondary-color) !important; }

/* Aggressive override for body background */
html.dark-mode body.bg-\[var\(--background-color\)\] {
    background-color: var(--background-color) !important;
}