/* Shared light/dark theme tokens + toggle button — used by every page
   in this hosting site (index.html, privacy.html, terms.html,
   delete-account.html, join.html). Single source of truth: edit here,
   not per-page. Each page's own <style> block references these vars
   for its colors instead of hardcoding hex values.

   Dark is the bare :root default (this site's original look, and the
   fallback for browsers with no theme preference signal at all).
   Light applies two ways: automatically when the OS prefers light AND
   the visitor hasn't explicitly overridden it (the
   :not([data-theme="dark"]) guard), or explicitly via the toggle
   button's [data-theme="light"] attribute, which always wins. See
   theme.js for the toggle logic + the flash-prevention script. */

:root {
  --bg-1: #0a1f15;
  --bg-2: #050e0a;
  --text-rgb: 245,230,211;
  --gold: #d4af37;
  --gold-rgb: 212,175,55;
  --surface-rgb: 255,255,255;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-1: #faf8f2;
    --bg-2: #eef0e6;
    --text-rgb: 31,42,31;
    --gold: #9c7a1f;
    --gold-rgb: 156,122,31;
    --surface-rgb: 0,0,0;
  }
}
:root[data-theme="light"] {
  --bg-1: #faf8f2;
  --bg-2: #eef0e6;
  --text-rgb: 31,42,31;
  --gold: #9c7a1f;
  --gold-rgb: 156,122,31;
  --surface-rgb: 0,0,0;
}

/* Base toggle button look, shared by both placements:
   - Inline in a nav bar (index.html) — just needs .theme-toggle.
   - Floating on pages with no nav (privacy/terms/delete-account/join)
     — add .theme-toggle--fixed too for a top-right fixed position. */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb),0.1);
  border: 1px solid rgba(var(--gold-rgb),0.3);
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
}
.theme-toggle:hover { background: rgba(var(--gold-rgb),0.18); transform: translateY(-1px); }
.theme-toggle--fixed {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
}

/* Shared site nav + footer — used by every page (index, privacy, terms,
   delete-account, join) so navigation and the company footer stay
   consistent site-wide. Single source of truth: edit here, not per-page. */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.15);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo img {
  height: 32px;
  width: auto;
}
.nav-logo span {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: uppercase;
}
.nav-right {
  display: flex;
  align-items: center;
}
.nav-links a {
  color: rgba(var(--text-rgb),0.7);
  text-decoration: none;
  font-size: 13px;
  margin-left: 24px;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold); }
nav .theme-toggle { margin-left: 20px; }

footer {
  border-top: 1px solid rgba(var(--gold-rgb),0.12);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
footer p {
  font-size: 12px;
  color: rgba(var(--text-rgb),0.35);
}
footer p a {
  color: rgba(var(--text-rgb),0.5);
  transition: color 0.2s;
}
footer p a:hover { color: var(--gold); }
.footer-links {
  display: flex;
  gap: 20px;
}
.footer-links a {
  font-size: 12px;
  color: rgba(var(--text-rgb),0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold); }