/* ============================================================================
   theme-dark.css — тёмная тема. Переопределяет ТОЛЬКО значения переменных:
   вся остальная вёрстка уже написана через них, поэтому ничего дублировать
   не нужно. Переключатель ставит data-theme на <html> и на #app.
   ========================================================================== */

html[data-theme="dark"],
.app[data-theme="dark"] {
  /* Поверхности */
  --bg: #1e2127;
  --bg-elev: #232830;
  --bg-sunken: #191c21;
  --bg-hover: #2a3038;
  --bg-active: #333a44;

  /* Текст */
  --fg: #e6e6e6;
  --fg-muted: #a9b6c3;
  --fg-faint: #7d8b99;

  /* Границы */
  --border: #2b3038;
  --border-strong: #3b424c;

  /* Акцент */
  --accent: #7cc7ff;
  --accent-fg: #10222f;
  --accent-soft: #1f3346;
  --link: #6fd3a8;
  --selection: #2f4a63;

  /* Состояния */
  --ok: #6fd3a8;
  --warn: #ffc46b;
  --error: #ff7b72;
  --info: #7cc7ff;

  /* Код и разметка */
  --code-bg: #171a1f;
  --code-fg: #ffd08a;
  --mark-bg: #5a4a12;

  --shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Тёмная тема для подсветки кода: цвета светлой темы на тёмном фоне читаются
   плохо, поэтому переопределяем их точечно. */
html[data-theme="dark"] .markdown-body .hljs-keyword,
html[data-theme="dark"] .markdown-body .hljs-selector-tag,
html[data-theme="dark"] .markdown-body .hljs-literal {
  color: #c792ea;
}
html[data-theme="dark"] .markdown-body .hljs-string,
html[data-theme="dark"] .markdown-body .hljs-attr {
  color: #a5d6a7;
}
html[data-theme="dark"] .markdown-body .hljs-number {
  color: #f2a97e;
}
html[data-theme="dark"] .markdown-body .hljs-built_in,
html[data-theme="dark"] .markdown-body .hljs-type {
  color: #82aaff;
}

/* Полосы прокрутки в тёмной теме: стандартный светлый thumb выглядит чужеродно. */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3b424c;
  background-clip: content-box;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4d5560;
  background-clip: content-box;
}

/* Диалоги: ::backdrop в тёмной теме плотнее, иначе фон «светится». */
html[data-theme="dark"] .modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* Индикатор работы в тёмной теме. */
html[data-theme="dark"] .busy {
  background: rgba(20, 23, 28, 0.6);
}

/* Баннер предупреждения: в тёмной теме нужен собственный фон, потому что
   смешивание с --bg даёт почти невидимую полосу. */
html[data-theme="dark"] .banner {
  background: #3a2f18;
  border-bottom-color: #5a4a12;
  color: #ffd9a0;
}