/* ===========================================================
   Тема «День / Ночь» для публичного сайта.
   Светлая палитра живёт в styles.css (:root). Здесь — только
   переопределения для тёмной, чтобы правка цветов оставалась
   в одном месте на каждую тему.

   Три состояния, как принято для тем:
     • выбор не сделан        → идём за системной настройкой;
     • выбрана тёмная         → атрибут data-theme="dark"  на <html>;
     • выбрана светлая        → атрибут data-theme="light" на <html>
       (перекрывает системную тёмную).
   =========================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text: #E7EAEE;
    --color-text-secondary: #A9B1BC;
    --color-text-muted: #7A828E;

    --color-bg: #0F1115;
    --color-bg-section: #14171D;
    --color-bg-card: #181C23;

    --color-border: #272C35;

    --color-accent: #34D399;
    --color-accent-dark: #10B981;
    --color-accent-soft: #123329;

    --color-danger: #F87171;
    --color-warning: #FBBF24;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .35);
    --shadow-hover: 0 10px 30px rgba(0, 0, 0, .55);


    /* Семантические токены — тёмные двойники светлых из styles.css.
       Контраст выверен: кнопки и статусы проверены по WCAG (см. ниже). */
    --color-on-accent: #08160F;
    --color-header-bg: rgba(15, 17, 21, .92);
    --color-input-bg: #12151B;
    --color-border-subtle: #21262E;
    --color-hover: #1D222A;
    --color-success-text: #6EE7B7;
    --color-warning-bg: #3B2F0B;
    --color-warning-text: #FCD34D;
    --color-danger-btn: #F87171;
    --color-danger-btn-hover: #EF4444;
    --color-on-danger: #1A0B0B;
    --color-danger-soft: #3A1517;
    --color-danger-text: #FCA5A5;
    --color-info-bg: #1A1F3A;
    --color-info-border: #2C3566;
    --color-info-text: #A5B4FC;
    --color-avatar-bg: #64748B;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-text: #E7EAEE;
  --color-text-secondary: #A9B1BC;
  --color-text-muted: #7A828E;

  --color-bg: #0F1115;
  --color-bg-section: #14171D;
  --color-bg-card: #181C23;

  --color-border: #272C35;

  --color-accent: #34D399;
  --color-accent-dark: #10B981;
  --color-accent-soft: #123329;

  --color-danger: #F87171;
  --color-warning: #FBBF24;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .35);
  --shadow-hover: 0 10px 30px rgba(0, 0, 0, .55);


  /* Семантические токены — тёмные двойники светлых из styles.css.
     Контраст выверен: кнопки и статусы проверены по WCAG (см. ниже). */
  --color-on-accent: #08160F;
  --color-header-bg: rgba(15, 17, 21, .92);
  --color-input-bg: #12151B;
  --color-border-subtle: #21262E;
  --color-hover: #1D222A;
  --color-success-text: #6EE7B7;
  --color-warning-bg: #3B2F0B;
  --color-warning-text: #FCD34D;
  --color-danger-btn: #F87171;
  --color-danger-btn-hover: #EF4444;
  --color-on-danger: #1A0B0B;
  --color-danger-soft: #3A1517;
  --color-danger-text: #FCA5A5;
  --color-info-bg: #1A1F3A;
  --color-info-border: #2C3566;
  --color-info-text: #A5B4FC;
  --color-avatar-bg: #64748B;

  color-scheme: dark;
}

/* Кнопка переключения. Вид один на все страницы сайта. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}