/* =========================================================
   LK Theme Tokens — Dark
   IMPORTANT: we keep current LK dark look by reusing
   existing token values already used in the project.
   ========================================================= */

html[data-theme="dark"],
html[data-layout-mode="dark"],
body[data-layout-mode="dark"] {
  color-scheme: dark;
}

/* Ensure html background is dark too (app.css sets background on html, body) */
html[data-theme="dark"],
html[data-layout-mode="dark"] {
  background-color: var(--lk-bg, #0b0f14) !important;
  background-image: none !important;
  color: var(--lk-text, #e5e7eb) !important;
}

/* Tokens */
html[data-theme="dark"],
body[data-layout-mode="dark"] {
  --lk-bg: #0b0f14;
  --lk-surface: #121821;
  --lk-surface-2: #151e28;
  --lk-border: rgba(148, 163, 184, 0.18);
  --lk-text: #e5e7eb;
  --lk-muted: rgba(229, 231, 235, 0.72);
}

/* Bootstrap vars aligned to tokens */
body[data-layout-mode="dark"] {
  --bs-body-bg: var(--lk-bg) !important;
  --bs-body-color: var(--lk-text) !important;
  --bs-border-color: var(--lk-border) !important;
  --bs-border-color-translucent: var(--lk-border) !important;

  --bs-card-bg: var(--lk-surface) !important;
  --bs-modal-bg: var(--lk-surface) !important;
  --bs-offcanvas-bg: var(--lk-surface) !important;
  --bs-dropdown-bg: var(--lk-surface) !important;
  --bs-popover-bg: var(--lk-surface) !important;
  --bs-toast-background-color: var(--lk-surface) !important;

  --bs-secondary-color: var(--lk-muted) !important;
  --bs-tertiary-color: var(--lk-muted) !important;
}