/* Theme CSS variables for immediate application */
/* This prevents the flash by having CSS ready for both themes */

:root {
  /* Light theme variables (default) */
  --theme-background: #f5f5f5;
  --theme-surface: #ffffff;
  --theme-text-primary: rgba(0,0,0, 0.87);
  --theme-text-secondary: rgba(0,0,0, 0.54);
  --theme-primary: #1976d2;
}

:root[data-theme="dark"] {
  /* Dark theme variables */
  --theme-background: #1e1e2e;
  --theme-surface: #2a2a3e;
  --theme-text-primary: rgba(255,255,255, 0.87);
  --theme-text-secondary: rgba(255,255,255, 0.60);
  --theme-primary: #42a5f5;
}

/* Apply theme variables to body for immediate effect */
body {
  background-color: var(--theme-background);
  color: var(--theme-text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Prevent flash of wrong theme during page load */
.theme-loading {
  visibility: hidden;
}

.theme-loaded {
  visibility: visible;
}