/* ─────────────────────────────────────────────────────────────
   Theme layer: light/dark tokens, toggle button, and the
   hand-written light-mode fixes that the generator cannot infer
   (video hero, translucent nav, gradients).

   Dark is the default. Light is opt-in via html[data-theme="light"].
   Load order: theme.css → theme-light.generated.css
   ───────────────────────────────────────────────────────────── */

:root { --gold-ink: var(--gold, #c9a227); }

html[data-theme="light"] {
  color-scheme: light;
  /* page-level tokens the templates already use */
  --black: #f6f7f9;
  --dark:  #f6f7f9;
  --dark2: #eef0f4;
  --card:  #ffffff;
  --border:#e2e5ea;
  --text:  #12141a;
  --muted: #646c7a;
  --gold-ink: #7d6210;   /* gold that stays legible as text on white */
}
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="light"] body { background: #f6f7f9; color: #2c313b; }

/* ── home: fixed translucent nav (JS also sets this inline, see home.ejs) ── */
html[data-theme="light"] .nav {
  background: rgba(255,255,255,0.88);
  border-bottom: 1px solid #e2e5ea;
}
html[data-theme="light"] .nav-toggle span { background: var(--gold-ink); }

/* ── home: video hero. Light overlay so dark type stays readable ── */
html[data-theme="light"] .hero-video { opacity: 0.55; }
html[data-theme="light"] .hero-overlay {
  background: linear-gradient(to bottom,
    rgba(246,247,249,0.50) 0%,
    rgba(246,247,249,0.72) 55%,
    rgba(246,247,249,0.96) 100%);
}
html[data-theme="light"] .btn-outline { border-color: #c8ccd4; }
html[data-theme="light"] .btn-outline:hover { border-color: var(--gold-ink); }
html[data-theme="light"] .hero-badge img { box-shadow: 0 0 0 3px var(--gold), 0 4px 24px rgba(15,17,21,0.16) !important; }

/* ── misc translucent surfaces the generator leaves alone ── */
html[data-theme="light"] .step-card,
html[data-theme="light"] .booking-frame-wrap { border-color: #e2e5ea; }
html[data-theme="light"] hr { border-color: #e2e5ea; }
html[data-theme="light"] ::placeholder { color: #9aa1ad; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color: #12141a; }

/* Gold set through an inline style would otherwise stay too pale on white */
html[data-theme="light"] [style*="color:var(--gold)"],
html[data-theme="light"] [style*="color: var(--gold)"] { color: var(--gold-ink) !important; }

/* Gold-filled CTAs: keep the fill, fix the label contrast */
html[data-theme="light"] .nav-links a.nav-cta:not([style*="transparent"]) { background: var(--gold-ink); color: #fff !important; }
html[data-theme="light"] .nav-links a.nav-cta:not([style*="transparent"]):hover { background: var(--gold); color: #12141a !important; }
html[data-theme="light"] nav.ln .ln-links a.ln-cta,
html[data-theme="light"] .btn-gold,
html[data-theme="light"] .hero-btns .btn-gold { color: #12141a; }


/* Inline styles cannot be re-scoped, so the light theme overrides them here.
   (Keep this list in sync with any new style="color:#…" added to a template.) */
html[data-theme="light"] [style*="color:#ddd"],
html[data-theme="light"] [style*="color:#e8e8e8"] { color: #2c313b !important; }
html[data-theme="light"] [style*="color:#aaa"],
html[data-theme="light"] [style*="color:#888"],
html[data-theme="light"] [style*="color:#777"] { color: #525a68 !important; }
html[data-theme="light"] [style*="color:#666"],
html[data-theme="light"] [style*="color:#555"] { color: #646b78 !important; }
html[data-theme="light"] [style*="color:#4ade80"] { color: #15803d !important; }
html[data-theme="light"] [style*="color:#60a0e0"],
html[data-theme="light"] [style*="color:#cfe"]   { color: #1d4ed8 !important; }
html[data-theme="light"] [style*="color:#c66"]   { color: #b91c1c !important; }
html[data-theme="light"] [style*="color:#f0b840"]{ color: var(--gold-ink) !important; }

/* ── the toggle itself ── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 999px; cursor: pointer;
  background: transparent;
  border: 1px solid rgba(201,162,39,0.45);
  color: #c9a227;
  font-family: inherit; line-height: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.theme-toggle:hover { background: rgba(201,162,39,0.12); border-color: #c9a227; }
.theme-toggle:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle {
  border-color: rgba(125,98,16,0.45); color: #7d6210;
  background: #ffffff;
}
html[data-theme="light"] .theme-toggle:hover { background: #fdf7e6; border-color: #7d6210; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* home nav: the toggle is a direct child so the mobile collapse cannot hide it */
nav.nav > .theme-toggle { margin-left: 14px; }
@media (max-width: 900px) { nav.nav > .theme-toggle { margin-left: auto; margin-right: 14px; } }

/* simple two-item navs (contact, term sheet): keep the toggle beside the link */
nav > .theme-toggle { margin-left: 12px; }
nav > .nav-back { margin-left: auto; }
nav .nav-right > .theme-toggle { margin-left: 4px; }

/* floating fallback for pages with no nav to slot into */
.theme-toggle.floating {
  position: fixed; top: 14px; right: 16px; z-index: 999;
  background: rgba(20,20,20,0.9); backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
html[data-theme="light"] .theme-toggle.floating {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 12px rgba(15,17,21,0.12);
}
@media (max-width: 600px) { .theme-toggle.floating { top: 10px; right: 10px; } }

@media print { .theme-toggle { display: none !important; } }