:root {
  color-scheme: light dark;

  /* Light theme colors */
  --text-color-light: #012970;
  --bg-color-light: #fff;
  --header-bg-light: #fff;
  --sidebar-bg-light: #ffffff;
  --warning-color: #b10808;
  

  /* Dark theme colors */
  --text-color-dark: #ffffff;
  --bg-color-dark: #18191a;
  --header-bg-dark: #242526;
  --sidebar-bg-dark: #242526;
  --warning-color: #b10808;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --text-color: var(--text-color-dark);
    --bg-color: var(--bg-color-dark);
    --header-bg: var(--header-bg-dark);
    --sidebar-bg: var(--sidebar-bg-dark);
    --bg-hover-color: var(--text-color);
    --text-hover-color: var(--bg-color);
  }
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --text-color: var(--text-color-light);
    --bg-color: var(--bg-color-light);
    --header-bg: var(--header-bg-light);
    --sidebar-bg: var(--sidebar-bg-light);
    --bg-hover-color: var(--text-color);
    --text-hover-color: var(--bg-color);
  }
}

:root[data-theme="light"] {
  --text-color: var(--text-color-light);
  --bg-color: var(--bg-color-light);
  --header-bg: var(--header-bg-light);
  --sidebar-bg: var(--sidebar-bg-light);
  --bg-hover-color: var(--text-color);
  --text-hover-color: var(--bg-color);
}

:root[data-theme="dark"] {
  --text-color: var(--text-color-dark);
  --bg-color: var(--bg-color-dark);
  --header-bg: var(--header-bg-dark);
  --sidebar-bg: var(--sidebar-bg-dark);
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

.header {
  background-color: var(--header-bg);
}

#sidebar {
  background-color: var(--sidebar-bg);
}

/* Theme toggle button styles */
#theme-toggle {
  padding: 0.5rem;
  color: var(--text-color);
}

#theme-toggle [data-theme-icon] {
  display: none;
}

[data-theme="light"] #theme-toggle [data-theme-icon="light"],
[data-theme="dark"] #theme-toggle [data-theme-icon="dark"],
[data-theme="system"] #theme-toggle [data-theme-icon="system"] {
  display: inline-block;
}