:root[data-theme="dark"] {
  --color-bg: #1f1d24;
  --color-bg-elevated: #282732;
  --color-bg-muted: #23212b;
  --color-text: #f3f5f8;
  --color-text-muted: #a0a4b8;
  --color-border: #3a3947;
}

:root[data-theme="light"] {
  --color-bg: #f4f5f8;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #eceef4;
  --color-text: #1f1d24;
  --color-text-muted: #64647a;
  --color-border: #d5d8e3;
  --shadow-soft: 0 10px 26px rgba(24, 28, 39, 0.12);
}

:root[data-theme="light"] body {
  background: radial-gradient(1000px 580px at 100% -40%, rgba(5, 197, 255, 0.15), transparent 55%),
    radial-gradient(800px 420px at -10% 25%, rgba(144, 84, 255, 0.12), transparent 50%),
    var(--color-bg);
}

:root[data-theme="light"] .topbar {
  background: rgba(244, 245, 248, 0.92);
}

:root[data-theme="light"] .app-sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 244, 249, 0.95));
}

:root[data-theme="light"] .sidebar-nav .nav-link:hover,
:root[data-theme="light"] .sidebar-nav .nav-link.active {
  background: rgba(187, 255, 0, 0.2);
}

:root[data-theme="light"] .dropdown-menu {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-color: #1f1d24;
  --bs-dropdown-border-color: #d5d8e3;
  --bs-dropdown-link-color: #1f1d24;
  --bs-dropdown-link-hover-color: #11131a;
  --bs-dropdown-link-hover-bg: rgba(5, 197, 255, 0.12);
  --bs-dropdown-link-active-bg: rgba(5, 197, 255, 0.18);
  --bs-dropdown-link-active-color: #11131a;
}

:root[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: #24232d;
  --bs-dropdown-color: #f3f5f8;
  --bs-dropdown-border-color: #3f3d4d;
  --bs-dropdown-link-color: #f3f5f8;
  --bs-dropdown-link-hover-color: #f3f5f8;
  --bs-dropdown-link-hover-bg: rgba(5, 197, 255, 0.14);
  --bs-dropdown-link-active-bg: rgba(5, 197, 255, 0.2);
  --bs-dropdown-link-active-color: #f3f5f8;
}