:root {
  --dark-bg: #071125;
  --dark-surface: #0f172a;
  --dark-surface-2: #111827;
  --dark-text: #edf6ff;
  --dark-muted: #b7c9df;
  --light-bg: #f5f7fb;
  --light-surface: #ffffff;
  --light-surface-2: #f8fafc;
  --light-text: #0f172a;
  --light-muted: #475569;
  --brand-1: #f59e0b;
  --brand-2: #4f46e5;
  --floating-shadow: 0 14px 36px rgba(2, 6, 23, 0.32);
}

html, body {
  background: var(--light-bg);
  color: var(--light-text);
  transition: background-color 220ms ease, color 220ms ease;
}

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

html.dark-mode body,
html.dark-mode main,
html.dark-mode section,
html.dark-mode article,
html.dark-mode header,
html.dark-mode footer,
html.dark-mode div,
html.dark-mode form,
html.dark-mode .card,
html.dark-mode .box,
html.dark-mode .panel,
html.dark-mode .page-shell,
html.dark-mode .container,
html.dark-mode .hero,
html.dark-mode .banner,
html.dark-mode .room-card,
html.dark-mode .facility-card,
html.dark-mode .notice,
html.dark-mode .site-modal-panel,
html.dark-mode .modal-content,
html.dark-mode .modal-terms-card,
html.dark-mode .facility-summary,
html.dark-mode .pair-tenant-box {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

html.dark-mode p,
html.dark-mode li,
html.dark-mode span,
html.dark-mode label,
html.dark-mode small,
html.dark-mode td,
html.dark-mode th,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode a,
html.dark-mode button,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  color: var(--dark-text) !important;
}

html.dark-mode .muted,
html.dark-mode .text-muted,
html.dark-mode .meta,
html.dark-mode .subtext,
html.dark-mode .description,
html.dark-mode p[style*="color:"] {
  color: var(--dark-muted) !important;
}

html.dark-mode img:not(.hero-img):not(.hero-section img):not(.feature-card img):not(.gallery-image):not(.property-image):not(.team-card img):not(.partner-item img) {
  filter: brightness(0.9) contrast(1.08);
}

html.dark-mode .hero-img,
html.dark-mode .hero-section img,
html.dark-mode .feature-card img,
html.dark-mode .gallery-image,
html.dark-mode .property-image,
html.dark-mode .team-card img,
html.dark-mode .partner-item img {
  filter: none !important;
  opacity: 1 !important;
}

html.dark-mode #pageContent > div > div[style*="background:rgba(0,0,0,0.6)"] {
  background: rgba(7, 17, 37, 0.28) !important;
}

html.dark-mode .dark-mode-toggle {
  color: #071125 !important;
}

.dark-mode-toggle {
  position: fixed !important;
  z-index: 2147483647 !important;
  width: 52px !important;
  height: 52px !important;
  border: 0 !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
  color: #071125 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
  box-shadow: var(--floating-shadow) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease !important;
}

.dark-mode-toggle:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.38) !important;
}

.dark-mode-toggle.dragging {
  cursor: grabbing !important;
  transform: scale(1.02) !important;
}

.dark-mode-toggle:focus {
  outline: 3px solid rgba(255, 255, 255, 0.18) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .dark-mode-toggle,
  html, body {
    transition: none !important;
  }
}