/* ============================================================
   theme.css — color palettes, dark (night) theme, settings panel.
   Loaded LAST so its overrides win the cascade.
   ============================================================ */

/* ---------- Color palettes (override brand/accent token) ---------- */
:root[data-palette="terracotta"] { --wood: #B5654A; --wood-light: #C77E63; }
:root[data-palette="pine"]       { --wood: #3F6B4F; --wood-light: #56876A; }
:root[data-palette="slate"]      { --wood: #4A5A6B; --wood-light: #647689; }
:root[data-palette="plum"]       { --wood: #74566B; --wood-light: #8E6E85; }
:root[data-palette="sand"]       { --wood: #B08D57; --wood-light: #C6A471; }
:root[data-palette="bordeaux"]   { --wood: #7B3B45; --wood-light: #9A5460; }
:root[data-palette="teal"]       { --wood: #2F6E6A; --wood-light: #438C87; }
:root[data-palette="gold"]       { --wood: #B8923B; --wood-light: #CDA957; }
:root[data-palette="graphite"]   { --wood: #55514B; --wood-light: #6F6A63; }

/* ---------- Night theme ---------- */
:root[data-theme="dark"] {
  --cream:   #16150F;
  --cream-2: #201E18;
  --greige:  #2A2722;
  --text:    #ECE7DF;
  --muted:   #A89F92;
  --line:    rgba(255, 255, 255, 0.12);
  --shadow:    0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] body { background: var(--cream); color: var(--text); }

/* surfaces that used literal white */
:root[data-theme="dark"] .why-card,
:root[data-theme="dark"] .amenity-group,
:root[data-theme="dark"] .cap-card,
:root[data-theme="dark"] .booking-form,
:root[data-theme="dark"] .filter-btn,
:root[data-theme="dark"] .lang-menu,
:root[data-theme="dark"] .faq-item { background: #201E18; color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .lang-menu button { color: var(--text); }
:root[data-theme="dark"] .lang-menu button:hover { background: #2A2722; }

:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea { background: #16150F; color: var(--text); }
:root[data-theme="dark"] .field label { color: var(--text); }

/* header when scrolled */
:root[data-theme="dark"] .site-header.scrolled { background: rgba(20, 19, 16, 0.9); }
:root[data-theme="dark"] .scrolled .brand,
:root[data-theme="dark"] .scrolled .main-nav a,
:root[data-theme="dark"] .scrolled .lang-current { color: var(--text); }
:root[data-theme="dark"] .scrolled .nav-toggle span { background: var(--text); }

/* text-on-light spots */
:root[data-theme="dark"] .amenity-group li,
:root[data-theme="dark"] .legal p,
:root[data-theme="dark"] .legal li,
:root[data-theme="dark"] .faq-a { color: #CFC8BD; }
:root[data-theme="dark"] .filter-btn.active { color: #fff; }

/* mobile nav drawer */
:root[data-theme="dark"] .main-nav { background: #201E18; }

/* ---------- Settings panel (right rail, above cookie banner) ---------- */
.fab-settings { right: 24px; bottom: 228px; z-index: 97; background: var(--charcoal); color: var(--cream); font-size: 1.4rem; }
.theme-panel {
  position: fixed; right: 24px; bottom: 296px; z-index: 98; width: 250px;
  background: var(--cream); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1.2rem 1.3rem;
  animation: slideUp .35s var(--ease);
}
.theme-panel[hidden] { display: none; }
.theme-panel-title { font-weight: 600; font-size: .95rem; margin-bottom: .7rem; }
.theme-panel-sub { font-size: .8rem; color: var(--muted); margin: 1rem 0 .55rem; text-transform: uppercase; letter-spacing: .08em; }
.theme-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.theme-mode {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: .9rem; color: var(--text); transition: all .25s var(--ease);
}
.theme-mode:hover { border-color: var(--wood); }
.theme-mode.active { background: var(--wood); color: var(--cream); border-color: var(--wood); }
.theme-palettes { display: flex; gap: .55rem; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; background: var(--sw);
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line); transition: transform .2s var(--ease);
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--wood); }

@media (max-width: 720px) {
  .fab-settings { right: 16px; bottom: 220px; }
  .theme-panel { right: 16px; left: 16px; width: auto; bottom: 284px; }
}