/* ============================================================
   ТЁМНАЯ ТЕМА
   Включается атрибутом на <html>: data-theme="dark".
   Меняются только переменные — вся вёрстка берёт цвета оттуда,
   поэтому переключение мгновенное и без переделки страниц.
   ============================================================ */

[data-theme="dark"] {
  /* фон и поверхности */
  --bg: #0d0817;
  --bg-2: #150e24;
  --surface: #1a1230;
  --surface-2: #211739;
  --surface-3: #2a1e47;

  /* акценты остаются, но светлее — на тёмном иначе тускло */
  --deep: #cbb9ff;
  --deep-2: #a48fd8;
  --outline: #dccdff;

  /* текст */
  --txt: #f4eeff;
  --txt-2: #c6b6e2;
  --txt-3: #9f8dbd;
  --txt-4: #7c6c99;

  /* линии */
  --line: #2d2145;
  --line-2: #3f2f5e;

  /* градиенты */
  --g-head: linear-gradient(100deg, #241038 0%, #3a1250 35%, #5c1a6a 70%, #7d2270 100%);
  --g-title: linear-gradient(90deg, #b98cff 0%, #e07ae8 52%, #ff7ad9 100%);
  --g-foot: linear-gradient(100deg, #150c26 0%, #1c1033 45%, #241540 100%);
  --g-hero: linear-gradient(125deg, #150a28 0%, #2a1140 40%, #4a1a52 76%, #6b2560 100%);

  /* тени на тёмном должны быть глубже, иначе их не видно */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .38);
  --shadow: 0 12px 32px rgba(0, 0, 0, .48);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .58);
}

/* ---------- точечные правки ----------
   Часть цветов в стилях задана напрямую, а не переменными.
   Их на тёмном видно хуже всего, поэтому перекрываем адресно. */

/* поля ввода: были белые */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select {
  background: var(--surface-2);
  color: var(--txt);
  border-color: var(--line-2);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .input:focus,
[data-theme="dark"] .textarea:focus,
[data-theme="dark"] .select:focus {
  background: var(--surface-3);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--txt-4);
}

/* светлые кнопки */
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-light:hover {
  background: var(--surface-3);
  color: var(--txt);
  border-color: var(--line-2);
}

/* плашки-уведомления: светлые подложки заменяем на приглушённые */
[data-theme="dark"] .notice {
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--txt-2);
}
[data-theme="dark"] .notice.bad {
  background: rgba(255, 77, 94, .12);
  border-color: rgba(255, 77, 94, .35);
  color: #ffb3ba;
}
[data-theme="dark"] .notice.ok {
  background: rgba(75, 240, 192, .10);
  border-color: rgba(75, 240, 192, .32);
  color: #9df5da;
}

/* мелочи с жёсткими светлыми фонами */
[data-theme="dark"] .pill.amber,
[data-theme="dark"] .badge .b-ico {
  background: rgba(255, 215, 110, .14);
  color: #ffd76e;
}
[data-theme="dark"] .badge .b-ico svg { color: #ffd76e; }

/* выпадающие списки */
[data-theme="dark"] option {
  background: var(--surface-2);
  color: var(--txt);
}

/* ---------- переключатель темы ---------- */
.theme-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.theme-btn {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--txt-2);
  font: 600 13.5px/1 inherit;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.theme-btn:hover { border-color: var(--violet-2); color: var(--txt); }
.theme-btn.on {
  border-color: var(--accent);
  color: var(--txt);
  background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.theme-btn .sw {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  border: 1px solid var(--line-2);
}
.theme-btn[data-theme-pick="light"] .sw { background: #f6ecfd; }
.theme-btn[data-theme-pick="dark"] .sw { background: #16102a; }

/* ---------- верхний блок главной ----------
   Тёмный фон там уже был, но его перекрывали два больших свечения
   (розовое и сиреневое) — из-за них блок оставался ярким.
   Приглушаем их, иначе тёмная тема выглядит недоделанной. */
[data-theme="dark"] .hero::before { background: rgba(255, 120, 214, 0.12); }
[data-theme="dark"] .hero::after  { background: rgba(168, 85, 247, 0.14); }
[data-theme="dark"] .hero-bg { opacity: 0.22; }
[data-theme="dark"] .hero .kicker { color: var(--txt-2); }
[data-theme="dark"] .hero .kicker::before { background: var(--txt-2); }

/* плашки на тёмном не должны слепить */
[data-theme="dark"] .chip .c-ico,
[data-theme="dark"] .nav-links a.on,
[data-theme="dark"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
}

/* ---------- космос ---------- */
/* полотно со звёздами поверх страницы, но не перехватывает нажатия */
#ny-space {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* при отключённых анимациях полотно не создаётся вовсе */
@media (prefers-reduced-motion: reduce) {
  #ny-space { display: none; }
}