/* Setu Yoga Studio — shared theme layer for the self-contained pages
   (the pages that carry their own inline <style> rather than main.min.css).

   These pages define a dark :root palette inline. This file adds:
     1. the [data-theme="light"] override of that palette
     2. the #theme-toggle button styling
     3. a small .lp-nav tweak so the toggle sits on the right

   Palette values mirror main.min.css so light mode is identical site-wide. */

/* ── Light palette override ─────────────────────────────────────────── */
:root[data-theme="light"],
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F2EC;
  --dark: #FFFFFF;
  --darker: #EDEAE2;
  /* The dark theme's #C9A870 only reaches 2.6:1 on this cream background —
     below the WCAG minimum — and it is used for headings, links and button
     labels. This deeper bronze reads as the same brand gold but clears AA
     (4.7:1) both as text on cream and as cream text on a gold button. */
  --gold: #8C6528;
  --gold-text: #8C6528;
  --text: #100F18;
  --muted: #504D4A;
  --border: #D8D4CC;
  --lit: #F5F2EC;
  /* Component styles use rgba(var(--text-rgb) / --gold-rgb, a) for translucent
     copy and hairlines. Swapping these re-tints all of it for light mode. */
  --text-rgb: 16, 15, 24;
  --gold-rgb: 140, 101, 40;
}

/* Dark (default) values for the translucent channels. Declared here so pages
   pick them up without editing each inline :root. */
:root {
  --text-rgb: 237, 233, 225;
  --gold-rgb: 201, 168, 112;
}

/* ── Theme toggle button ────────────────────────────────────────────── */
#theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  color: var(--text);
  transition: background .3s, border-color .3s, transform .3s;
  flex-shrink: 0;
}

#theme-toggle:hover {
  background: var(--dark);
  border-color: var(--gold);
  transform: translateY(-1px);
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Nav placement ──────────────────────────────────────────────────── */
/* .lp-nav is flex + space-between with two children. The auto margin on the
   logo absorbs the free space so the added toggle groups to the right. */
.lp-nav {
  gap: 14px;
}

.lp-nav .lp-logo {
  margin-right: auto;
}

/* Pages with no nav bar (bare <header>) get a floating toggle instead. */
#theme-toggle.is-floating {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 999;
  background: var(--bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

/* ── Light-mode readability touch-ups ───────────────────────────────── */
/* The dark palette leans on a translucent gold for hairlines; on the light
   background those need a touch more presence to stay visible. */
html[data-theme="light"] .lp-nav {
  border-bottom-color: var(--border);
}