/* Original colors remain the fallbacks in sohbet.html. Only palettes change. */
:root {
  color-scheme: light;
}

:root[data-color-theme="gray"] {
  --appearance-canvas: #c9c9c9;
  --appearance-surface: #e7e7e7;
  --appearance-surface-rgb: 231, 231, 231;
  --appearance-subtle: #dedede;
  --appearance-subtle-rgb: 222, 222, 222;
  --appearance-muted: #d4d4d4;
  --appearance-highlight: #c4c4c4;
  --appearance-solid: #303030;
  --appearance-accent: #525252;
  --appearance-text: #171717;
  --appearance-secondary: #404040;
  --appearance-caption: #525252;
  --appearance-disabled: #686868;
  --appearance-link: #333333;
  --appearance-border: #a3a3a3;
  --appearance-border-soft: #bcbcbc;
  --appearance-focus: #737373;
}

/* One shared night palette for all sites and embedded login forms. */
:root.theme-night,
:host([data-sohbet-mode="night"]) {
  color-scheme: dark;
  --appearance-canvas: #080808;
  --appearance-surface: #121212;
  --appearance-surface-rgb: 18, 18, 18;
  --appearance-subtle: #191919;
  --appearance-subtle-rgb: 25, 25, 25;
  --appearance-muted: #222222;
  --appearance-highlight: #303030;
  --appearance-solid: #080808;
  --appearance-accent: #4a4a4a;
  --appearance-text: #f5f5f5;
  --appearance-secondary: #d4d4d4;
  --appearance-caption: #b0b0b0;
  --appearance-disabled: #969696;
  --appearance-link: #e5e5e5;
  --appearance-border: #444444;
  --appearance-border-soft: #303030;
  --appearance-focus: #a3a3a3;
  --appearance-danger: #fca5a5;
  --appearance-success: #86efac;
  --appearance-warning: #fcd34d;
  --appearance-backdrop: rgba(0, 0, 0, 0.65);
}

:root[data-color-theme="gray"] input::placeholder,
:root[data-color-theme="gray"] textarea::placeholder,
:root[data-color-theme="site"] input::placeholder,
:root[data-color-theme="site"] textarea::placeholder,
:root.theme-night input::placeholder,
:root.theme-night textarea::placeholder {
  color: var(--appearance-caption);
  opacity: 1;
}

/* Connected sites use their own accent on the decorative strips, too. */
:root.theme-day[data-color-theme="site"] .home-strip,
:root.theme-day[data-color-theme="site"] .header-color-strip,
:root.theme-day[data-color-theme="site"] .connection-overlay-strip,
:root.theme-day[data-color-theme="site"] .user-profile-topbar::before {
  background: var(--appearance-accent);
}

:root.theme-day[data-color-theme="site"] .voice-join,
:root.theme-day[data-color-theme="site"] #sendBtn,
:root.theme-day[data-color-theme="site"] .safety-dialog button[type="submit"] {
  background: var(--appearance-accent);
}

:root.theme-day[data-color-theme="site"] .safety-dialog button[type="submit"] {
  border-color: var(--appearance-accent);
}

:root.theme-day[data-color-theme="site"] .safety-error {
  color: var(--appearance-danger);
}

:root.theme-day[data-color-theme="site"] .user-profile-permission-toggle {
  accent-color: var(--appearance-focus);
}