:root {
  --theme-light-bg: #f8fafc;
  --theme-light-surface: #ffffff;
  --theme-light-text: #172033;
  --theme-light-muted: #526078;
  --theme-light-border: #d7deea;
  --theme-dark-bg: #111827;
  --theme-dark-surface: #1f2937;
  --theme-dark-surface-raised: #273449;
  --theme-dark-text: #bac3e9;
  --theme-dark-muted: #cbd5e1;
  --theme-dark-border: #526176;
  --theme-light-hover: #eef2f7;
  --theme-dark-hover: #334155;
}

body {
  transition: background-color 180ms ease, color 180ms ease;
}

body.dark {
  background-color: var(--theme-dark-bg) !important;
  color: var(--theme-dark-text) !important;
}

body.dark a {
  color: #93c5fd;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark label,
body.dark p,
body.dark li,
body.dark span {
  color: inherit;
}

body.dark input,
body.dark textarea,
body.dark select {
  color: var(--theme-dark-text) !important;
  background-color: var(--theme-dark-surface) !important;
  border-color: var(--theme-dark-border) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
  color: var(--theme-dark-muted) !important;
}

body.dark .card,
body.dark .form-card,
body.dark .settings-card,
body.dark .reminder,
body.dark .modal-content,
body.dark .dropdown,
body.dark .search-results-box,
body.dark .book-card,
body.dark .post-card,
body.dark .comment-card,
body.dark .review-card,
body.dark .auth-card {
  color: var(--theme-dark-text);
  background-color: var(--theme-dark-surface) !important;
  border-color: var(--theme-dark-border) !important;
}

body.dark table,
body.dark th,
body.dark td {
  border-color: var(--theme-dark-border) !important;
}

body.dark th {
  color: var(--theme-dark-text);
  background-color: var(--theme-dark-surface-raised) !important;
}

body.dark td {
  color: var(--theme-dark-text);
}

body.dark .text-muted,
body.dark .muted,
body.dark small,
body.dark .subtitle,
body.dark .description {
  color: var(--theme-dark-muted) !important;
}

/* Page-specific surfaces that previously stayed light in dark mode. */
body.dark .create-post-card,
body.dark .posts-list .post-card,
body.dark .friends-container,
body.dark .chat-sidebar,
body.dark .chat-main,
body.dark .chat-input,
body.dark .message.received,
body.dark .features .card,
body.dark .testimonials .card,
body.dark .logos div,
body.dark .footer,
body.dark .impact-bar,
body.dark .stories,
body.dark .search-form input[type="text"],
body.dark .community-list > li,
body.dark .community-posts,
body.dark .community-members,
body.dark .post,
body.dark #joinRequests li,
body.dark #membersList li {
  color: var(--theme-dark-text);
  background: var(--theme-dark-surface) !important;
  border-color: var(--theme-dark-border) !important;
}

body.dark .chat-top,
body.dark .chat-input,
body.dark .chat-input input[type="text"],
body.dark .friends-container li,
body.dark .post,
body.dark .community-list > li,
body.dark #joinRequests li,
body.dark #membersList li {
  border-color: var(--theme-dark-border) !important;
}

body.dark .chat-main {
  background: var(--theme-dark-bg) !important;
}

body.dark .messages {
  background: var(--theme-dark-bg);
  background-image: none;
}

body.dark .message .text,
body.dark .chat-sidebar h3,
body.dark .community-list a,
body.dark .community-list .btn,
body.dark .community-list-container h2,
body.dark .community-detail-container h2,
body.dark .post strong,
body.dark .friends-container h2 {
  color: var(--theme-dark-text) !important;
}

body.dark .message .meta,
body.dark .community-list p,
body.dark .community-list small,
body.dark .community-header p {
  color: var(--theme-dark-muted) !important;
}

body.dark .btn,
body.dark .tab {
  color: var(--theme-dark-text);
  background: var(--theme-dark-surface-raised);
}

body.dark .post-actions button:hover,
body.dark .post-actions button:focus-visible,
body.dark .btn:hover,
body.dark .tab:hover,
body.dark .community-list > li:hover,
body.dark .post:hover,
body.dark .message:hover {
  background: var(--theme-dark-hover) !important;
}

body.dark .btn.join:hover,
body.dark .create-community button:hover,
body.dark form button[type="submit"]:hover,
body.dark .comment-submit:hover,
body.dark .form-actions button:hover {
  color: #fff !important;
  background: var(--primary-hover) !important;
}

body.dark .btn.leave {
  color: var(--theme-dark-text);
  background: var(--theme-dark-surface-raised);
  border-color: var(--theme-dark-border);
}

body.dark .community-list .btn.join {
  color: #c7d2fe;
  background: transparent;
  border-color: var(--theme-dark-border);
}

.theme-toggle-floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--theme-light-border);
  border-radius: 999px;
  color: var(--theme-light-text);
  background: var(--theme-light-surface);
  box-shadow: 0 4px 14px rgb(15 23 42 / 15%);
  cursor: pointer;
  font: inherit;
}

.theme-toggle-floating:hover,
.theme-toggle-floating:focus-visible {
  border-color: #2563eb;
  outline: 3px solid rgb(37 99 235 / 25%);
}

body.dark .theme-toggle-floating {
  color: var(--theme-dark-text);
  background: var(--theme-dark-surface);
  border-color: var(--theme-dark-border);
  box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
}

@media (max-width: 600px) {
  .theme-toggle-floating {
    top: 10px;
    right: 10px;
    min-height: 36px;
    padding: 7px 10px;
  }
}