/* ============ Theme variables ============ */
:root {
  --bg: #f5f5f5;
  --card-bg: #ffffff;
  --text: #222;
  --text-muted: #666;
  --border: #e5e5e5;
  --primary: #00a651;
  --primary-dark: #008c44;
}

/* DARK theme */
html[data-theme="dark"] {
  --bg: #1a1a1a;
  --card-bg: #2a2a2a;
  --text: #e0e0e0;
  --text-muted: #a0a0a0;
  --border: #3a3a3a;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); }
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .listing-card,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] footer.bg-light { background: var(--card-bg) !important; color: var(--text); border-color: var(--border) !important; }
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] body { color: var(--text) !important; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background:#1f1f1f; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .table { color: var(--text); }
html[data-theme="dark"] .bg-light { background: #2a2a2a !important; }
html[data-theme="dark"] .navbar-light { background: #222 !important; }
html[data-theme="dark"] .navbar-light .nav-link { color: #d0d0d0 !important; }
html[data-theme="dark"] .mobile-bottom-nav { background:#222; border-color:var(--border); }
html[data-theme="dark"] .mobile-bottom-nav a { color:#aaa; }

/* SEPIA theme */
html[data-theme="sepia"] {
  --bg: #f5ebd5;
  --card-bg: #fff8e7;
  --text: #5b4636;
  --border: #d8c7a3;
}
html[data-theme="sepia"] body { background: var(--bg); color: var(--text); }

/* HIGH CONTRAST */
html[data-theme="hc"] {
  --bg: #000;
  --card-bg: #000;
  --text: #fff;
  --border: #fff;
}
html[data-theme="hc"] body { background: #000 !important; color: #fff !important; }
html[data-theme="hc"] .form-card { background: #000 !important; border: 2px solid #fff !important; }

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  bottom: 150px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 996;
  font-size: 20px;
}
@media (max-width: 768px) {
  .theme-toggle { bottom: 200px; }
}