/* ===========================================================================
   DARK MODE — Otlo Design System
   Uses data-theme='dark' attribute. Warm ink (hue 24°) instead of pure black.
   ========================================================================= */

/* Legacy html.dark selector for backward compatibility */
html.dark {
  color-scheme: dark;
}

html.dark .app-header,
html.dark .header {
  background: var(--glass-bg);
  border-bottom-color: var(--border-subtle);
}

html.dark .bottom-nav {
  background: var(--glass-bg-strong);
  border-top-color: var(--border-subtle);
}

html.dark .sidebar {
  background: var(--surface);
  border-right-color: var(--border-subtle);
}

html.dark .modal {
  background: var(--surface);
  border: 1px solid var(--border-default);
}

html.dark .search-bar {
  background: var(--surface-sunken);
}

html.dark .input {
  background: var(--surface-sunken);
  border-color: var(--border-default);
}

/* Dark mode scrollbar */
html.dark ::-webkit-scrollbar-thumb {
  background: var(--sand-700);
}