:root {

  --text-rgb: 255,255,255;
  --bg-rgb: 0,0,0;
  --bg-main: #000000;
  --bg-card: #0d0d0d;
  --bg-card-alt: #111111;
  --bg-overlay: rgba(0,0,0,0.4);
  --bg-overlay-strong: rgba(0,0,0,0.85);
  --text-main: #FFFFFF;
  --text-dim: rgba(255,255,255,0.75);
  --text-dimmer: rgba(255,255,255,0.5);
  --text-faint: rgba(255,255,255,0.35);
  --border-c: rgba(255,255,255,0.15);
  --border-c-strong: rgba(255,255,255,0.3);
  --fill-soft: rgba(255,255,255,0.06);
  --fill-hover: rgba(255,255,255,0.1);
  --btn-invert-bg: #FFFFFF;
  --btn-invert-text: #000000;
  --btn-invert-text-rgb: 0,0,0;
  --btn-invert-badge-bg: #f2f2f2;
}

[data-theme="light"] {
  --text-rgb: 0,0,0;
  --bg-rgb: 255,255,255;
  --bg-main: #FFFFFF;
  --bg-card: #f7f7f7;
  --bg-card-alt: #f0f0f0;
  --bg-overlay: rgba(255,255,255,0.6);
  --bg-overlay-strong: rgba(255,255,255,0.9);
  --text-main: #000000;
  --text-dim: rgba(0,0,0,0.75);
  --text-dimmer: rgba(0,0,0,0.5);
  --text-faint: rgba(0,0,0,0.35);
  --border-c: rgba(0,0,0,0.15);
  --border-c-strong: rgba(0,0,0,0.3);
  --fill-soft: rgba(0,0,0,0.05);
  --fill-hover: rgba(0,0,0,0.08);
  --btn-invert-bg: #000000;
  --btn-invert-text: #FFFFFF;
  --btn-invert-text-rgb: 255,255,255;
  --btn-invert-badge-bg: #1a1a1a;
}

[data-theme="light"] .nav-logo img,
[data-theme="light"] .hero-logo-img,
[data-theme="light"] .footer-logo,
[data-theme="light"] .db-topbar-logo img,
[data-theme="light"] img.db-topbar-logo,
[data-theme="light"] .connexion-logo img {
  filter: invert(1);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.15s, opacity 0.15s;
}
.theme-toggle:hover { transform: scale(1.08); opacity: 0.9; }
.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-main);
  fill: none;
  stroke-width: 2;
}
.theme-toggle-icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] .theme-toggle-icon-sun { display: block; }
.theme-toggle[aria-pressed="true"] .theme-toggle-icon-moon { display: none; }