:root {
  --primary-color-light: #6200ee;
  --primary-variant-color-light: #3700b3;
  --secondary-color-light: #03dac6;
  --background-color-light: #ffffff;
  --surface-color-light: #ffffff;
  --error-color-light: #b00020;
  --on-primary-color-light: #ffffff;
  --on-secondary-color-light: #000000;
  --on-background-color-light: #000000;
  --on-surface-color-light: #000000;
  --text-primary-light: #212121;
  --text-secondary-light: #757575;

  --primary-color-dark: #bb86fc;
  --primary-variant-color-dark: #3700b3; /* Kept same as light for contrast or can be changed */
  --secondary-color-dark: #03dac6; /* Often kept same or made slightly less vibrant */
  --background-color-dark: #121212;
  --surface-color-dark: #1e1e1e; /* Slightly lighter than background for cards, dialogs */
  --error-color-dark: #cf6679;
  --on-primary-color-dark: #000000;
  --on-secondary-color-dark: #000000;
  --on-background-color-dark: #ffffff;
  --on-surface-color-dark: #ffffff;
  --text-primary-dark: #e0e0e0;
  --text-secondary-dark: #bdbdbd;
}

body {
  background-color: var(--background-color-light);
  color: var(--text-primary-light);
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme {
  background-color: var(--background-color-dark);
  color: var(--text-primary-dark);
}

/* Material Design inspired card styling */
.material-card {
  background-color: var(--surface-color-light);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 16px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-theme .material-card {
  background-color: var(--surface-color-dark);
  box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* Darker shadow for dark theme */
}

/* Material Design inspired button styling */
.material-button {
  background-color: var(--primary-color-light);
  color: var(--on-primary-color-light);
  padding: 10px 20px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border: none;
  cursor: pointer;
}

.material-button:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

body.dark-theme .material-button {
  background-color: var(--primary-color-dark);
  color: var(--on-primary-color-dark);
}

/* Class for elements that should primarily use theme's surface color for background */
.bg-surface {
    background-color: var(--surface-color-light);
}
body.dark-theme .bg-surface {
    background-color: var(--surface-color-dark);
}

/* Class for elements that should primarily use theme's background color */
.bg-background {
    background-color: var(--background-color-light);
}
body.dark-theme .bg-background {
    background-color: var(--background-color-dark);
}

/* Text color that contrasts with primary color */
.text-on-primary {
    color: var(--on-primary-color-light);
}
body.dark-theme .text-on-primary {
    color: var(--on-primary-color-dark);
}

/* Text color that contrasts with surface color */
.text-on-surface {
    color: var(--on-surface-color-light);
}
body.dark-theme .text-on-surface {
    color: var(--on-surface-color-dark);
}

/* Text color that contrasts with background color */
.text-on-background {
    color: var(--on-background-color-light);
}
body.dark-theme .text-on-background {
    color: var(--on-background-color-dark);
}

/* Primary text color */
.text-primary {
    color: var(--text-primary-light);
}
body.dark-theme .text-primary {
    color: var(--text-primary-dark);
}

/* Secondary text color */
.text-secondary {
    color: var(--text-secondary-light);
}
body.dark-theme .text-secondary {
    color: var(--text-secondary-dark);
}

/* Primary theme color */
.bg-primary {
    background-color: var(--primary-color-light);
}
body.dark-theme .bg-primary {
    background-color: var(--primary-color-dark);
}

/* Secondary theme color */
.bg-secondary {
    background-color: var(--secondary-color-light);
}
body.dark-theme .bg-secondary {
    background-color: var(--secondary-color-dark);
}

/* Header specific styles */
header {
    background-color: var(--surface-color-light);
    border-bottom-color: var(--primary-variant-color-light) !important; /* Tailwind uses !important, so we might need it too */
}
body.dark-theme header {
    background-color: var(--surface-color-dark);
    border-bottom-color: var(--primary-variant-color-dark) !important;
}
body.dark-theme header h2, body.dark-theme header a, body.dark-theme header svg {
    color: var(--on-surface-color-dark) !important; /* Important to override Tailwind's direct text color utilities */
}
body.dark-theme header input {
    background-color: var(--background-color-dark) !important; /* Adjust input background for dark theme */
    color: var(--on-background-color-dark) !important;
}
body.dark-theme header input::placeholder {
    color: var(--text-secondary-dark) !important;
}
body.dark-theme header .bg-\[\#f0f0f4\] { /* Targeting specific Tailwind class used for search and bell icon bg */
    background-color: var(--surface-color-dark) !important; /* Or a slightly different shade like var(--background-color-dark) depending on desired look */
}
body.dark-theme header .text-\[\#111118\] {
    color: var(--on-surface-color-dark) !important;
}
body.dark-theme header .text-\[\#636388\] {
    color: var(--text-secondary-dark) !important;
}


/* Footer specific styles (assuming you'll add a footer) */
footer {
  background-color: var(--surface-color-light);
  color: var(--text-secondary-light);
  padding: 20px;
  text-align: center;
  border-top: 1px solid var(--primary-variant-color-light);
}

body.dark-theme footer {
  background-color: var(--surface-color-dark);
  color: var(--text-secondary-dark);
  border-top: 1px solid var(--primary-variant-color-dark);
}

/* Theme switcher button styling */
#theme-switcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    border-radius: 50%;
    background-color: var(--primary-color-light);
    color: var(--on-primary-color-light);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000; /* Ensure it's above other content */
}

body.dark-theme #theme-switcher {
    background-color: var(--primary-color-dark);
    color: var(--on-primary-color-dark);
}

/* Adjusting Tailwind's default white background for the main content area */
.group\/design-root {
    background-color: var(--background-color-light) !important;
}
body.dark-theme .group\/design-root {
    background-color: var(--background-color-dark) !important;
}

/* General text color adjustments for dark theme if not covered by specific component classes */
body.dark-theme .text-\[\#111118\] { /* Example: A common text color from your HTML */
    color: var(--text-primary-dark) !important;
}
body.dark-theme .text-\[\#636388\] { /* Example: A secondary text color */
    color: var(--text-secondary-dark) !important;
}

/* Ensure links in dark theme are visible and use theme colors */
body.dark-theme a {
    color: var(--secondary-color-dark); /* Or primary color, depending on design preference */
}
body.dark-theme a:hover {
    color: var(--primary-color-dark);
}

/* Hero section text color */
body.dark-theme .text-white { /* Classes that set text to white might need to be re-evaluated or carefully used with dark theme */
    /* If the background is dark, white text is fine. If the background is light in dark theme, this needs adjustment. */
    /* For now, assuming white text is on dark backgrounds (like image overlays) and remains legible. */
}

/* Specific component adjustments */
body.dark-theme .bg-\[\#f0f0f4\] {
    background-color: var(--surface-color-dark) !important; /* For search bar, icons background */
}
body.dark-theme .border-b-\[\#f0f0f4\] {
    border-bottom-color: var(--surface-color-dark) !important; /* For header border */
}

/* Update button colors for Material Design feel and theme compatibility */
.bg-\[\#4242ea\] { /* Example: "Explore" button */
    background-color: var(--primary-color-light) !important;
    color: var(--on-primary-color-light) !important;
}
body.dark-theme .bg-\[\#4242ea\] {
    background-color: var(--primary-color-dark) !important;
    color: var(--on-primary-color-dark) !important;
}

/* Ensure image overlay text remains visible */
.dark-theme .text-white {
  /* This might need adjustment if the image itself is very light, but generally white text is fine on overlays */
}

/* Update text colors in "What would you like to do?" section */
body.dark-theme .text-\[\#111118\] {
  color: var(--text-primary-dark) !important;
}
body.dark-theme .text-\[\#636388\] {
  color: var(--text-secondary-dark) !important;
}

/* Update "Join the Community" button */
/* .bg-\[\#4242ea\] is already handled above */