/* Themes + header toolbar — theme lives in .nav-list > li.nav-theme */

.nav-theme {
  display: flex;
  align-items: center;
  list-style: none;
}

@media (min-width: 769px) {
  .site-nav .nav-list {
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
  }
}

.theme-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.theme-toolbar.theme-toolbar--header {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}

.theme-toolbar-btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
  align-items: center;
}

.theme-toolbar--header .theme-toolbar-btns {
  gap: 2px;
  padding: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.theme-btn {
  flex: 0 0 auto;
  min-width: auto;
  min-height: auto;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.theme-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.theme-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toolbar:not(.theme-toolbar--header) .theme-btn[aria-pressed="true"] {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.theme-toolbar:not(.theme-toolbar--header) .theme-btn[aria-pressed="true"]:hover {
  color: var(--bg);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.theme-toolbar--header .theme-btn {
  flex: 0 0 auto;
  min-width: auto;
  padding: 0.18rem 0.42rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 999px;
  position: relative;
  z-index: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* Semantic defaults: Dark = dark chip, Light = light chip (visible on Ocean too) */
.theme-toolbar--header .theme-btn[data-theme="warm-dark"] {
  color: rgba(248, 246, 243, 0.96);
  background: rgba(24, 24, 22, 0.72);
}

.theme-toolbar--header .theme-btn[data-theme="warm-light"] {
  color: var(--text-muted);
  background: rgba(255, 254, 251, 0.45);
}

.theme-toolbar--header .theme-btn:hover {
  opacity: 1;
  filter: brightness(1.07);
}

.theme-toolbar--header .theme-toolbar-btns .theme-btn[data-theme]:hover {
  border-color: transparent;
}

.theme-toolbar--header .theme-toolbar-btns .theme-btn[data-theme]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.theme-toolbar--header .theme-toolbar-btns .theme-btn[aria-pressed="true"] {
  opacity: 1;
  z-index: 1;
  font-weight: 600;
  box-shadow:
    0 0 0 2px var(--accent),
    0 1px 3px rgba(0, 0, 0, 0.16);
}

.theme-toolbar--header .theme-toolbar-btns .theme-btn[aria-pressed="false"] {
  box-shadow: none;
}

html[data-theme="warm-dark"] .theme-toolbar--header .theme-toolbar-btns .theme-btn[aria-pressed="false"],
html[data-theme="warm-light"] .theme-toolbar--header .theme-toolbar-btns .theme-btn[aria-pressed="false"] {
  opacity: 0.72;
}

html[data-theme="warm-dark"] .theme-toolbar--header .theme-toolbar-btns .theme-btn[aria-pressed="false"]:hover,
html[data-theme="warm-light"] .theme-toolbar--header .theme-toolbar-btns .theme-btn[aria-pressed="false"]:hover {
  opacity: 1;
}

/* Warm dark site: emphasized dark selection, airy light preview */
html[data-theme="warm-dark"]
  .theme-toolbar--header
  .theme-btn[data-theme="warm-dark"][aria-pressed="true"] {
  color: var(--text);
  background: var(--bg);
  filter: none;
}

html[data-theme="warm-dark"]
  .theme-toolbar--header
  .theme-btn[data-theme="warm-light"][aria-pressed="false"] {
  color: #393530;
  background: rgba(243, 241, 236, 0.98);
}

/* Warm light site: paper selection, muted dark sibling (labels match ink) */
html[data-theme="warm-light"]
  .theme-toolbar--header
  .theme-btn[data-theme="warm-dark"][aria-pressed="false"] {
  color: #faf8f4;
  background: #4a4038;
}

html[data-theme="warm-light"]
  .theme-toolbar--header
  .theme-btn[data-theme="warm-light"][aria-pressed="true"] {
  color: var(--text);
  background: var(--bg-elevated);
  filter: none;
}

.theme-toolbar--header .theme-btn[aria-pressed="true"]:hover {
  filter: brightness(1.05);
}

/* Non-header toolbar (fallback) */
.theme-toolbar:not(.theme-toolbar--header) .theme-btn {
  min-height: 30px;
  padding: 0.25rem 0.5rem;
}

.theme-toolbar:not(.theme-toolbar--header) .theme-btn:hover {
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .nav-theme {
    align-items: flex-start;
  }

  .theme-toolbar.theme-toolbar--header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0.52rem 0 0.25rem;
  }
}

/* Toolbar UI: only these two choices visible; all themes remain in HTML/JS/CSS */
.theme-toolbar-btns .theme-btn:not([data-theme="warm-dark"]):not([data-theme="warm-light"]) {
  display: none;
}

/* -------------------------------------------------------------------------- */
html[data-theme="ocean"] {
  --bg: #0c1017;
  --bg-elevated: #131a24;
  --bg-soft: #1a2332;
  --text: #e8edf5;
  --text-muted: #9aa8bc;
  --accent: #5eead4;
  --accent-hover: #8ef9ea;
  --accent-dim: rgba(94, 234, 212, 0.15);
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  --body-gradient:
    radial-gradient(ellipse 120% 80% at 100% -10%, rgba(94, 234, 212, 0.12), transparent 50%),
    radial-gradient(ellipse 80% 50% at 0% 100%, rgba(99, 102, 241, 0.08), transparent 45%);
  --header-bg: rgba(12, 16, 23, 0.85);
  --nav-drawer-bg: rgba(12, 16, 23, 0.98);
  --section-alt-bg: rgba(19, 26, 36, 0.55);
  --timeline-line-end: rgba(94, 234, 212, 0.22);
  color-scheme: dark;
}

html[data-theme="warm-dark"] {
  --bg: #2b2b2b;
  --bg-elevated: #383838;
  --bg-soft: #454545;
  --text: #f5f5f0;
  --text-muted: #c9c6bf;
  --accent: #c4aa94;
  --accent-hover: #dfc7b4;
  --accent-dim: rgba(196, 170, 148, 0.2);
  --border: rgba(245, 245, 240, 0.12);
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
  --body-gradient:
    radial-gradient(ellipse 110% 70% at 90% -5%, rgba(196, 170, 148, 0.12), transparent 48%),
    radial-gradient(ellipse 90% 55% at 0% 100%, rgba(78, 52, 46, 0.15), transparent 45%);
  --header-bg: rgba(43, 43, 43, 0.9);
  --nav-drawer-bg: rgba(43, 43, 43, 0.98);
  --section-alt-bg: rgba(255, 255, 255, 0.06);
  --timeline-line-end: rgba(196, 170, 148, 0.25);
  color-scheme: dark;
}

html[data-theme="warm-light"] {
  --bg: #f3f1ec;
  --bg-elevated: #fffefa;
  --bg-soft: #ebe6de;
  --text: #2c2c2c;
  --text-muted: #5a554d;
  --accent: #6b5346;
  --accent-hover: #8f6f5c;
  --accent-dim: rgba(107, 83, 70, 0.12);
  --border: rgba(44, 44, 44, 0.1);
  --shadow: 0 14px 40px rgba(60, 50, 40, 0.12);
  --body-gradient:
    radial-gradient(ellipse 130% 80% at 100% -10%, rgba(166, 142, 122, 0.18), transparent 50%),
    radial-gradient(ellipse 85% 50% at 0% 100%, rgba(107, 83, 70, 0.06), transparent 45%);
  --header-bg: rgba(243, 241, 236, 0.92);
  --nav-drawer-bg: rgba(253, 252, 248, 0.98);
  --section-alt-bg: rgba(255, 254, 250, 0.85);
  --timeline-line-end: rgba(107, 83, 70, 0.25);
  color-scheme: light;
}

/* Second warm-light option: cooler paper + sage accent (vs. brown “Warm light”) */
html[data-theme="warm-linen"] {
  --bg: #faf7f2;
  --bg-elevated: #fffffe;
  --bg-soft: #f0ebe3;
  --text: #2a2825;
  --text-muted: #5e5a54;
  --accent: #4a6741;
  --accent-hover: #5d7f52;
  --accent-dim: rgba(74, 103, 65, 0.12);
  --border: rgba(42, 40, 37, 0.09);
  --shadow: 0 16px 42px rgba(45, 55, 40, 0.1);
  --body-gradient:
    radial-gradient(ellipse 125% 78% at 100% -8%, rgba(74, 103, 65, 0.1), transparent 50%),
    radial-gradient(ellipse 88% 52% at 0% 100%, rgba(184, 140, 110, 0.08), transparent 46%);
  --header-bg: rgba(250, 247, 242, 0.93);
  --nav-drawer-bg: rgba(255, 255, 254, 0.98);
  --section-alt-bg: rgba(240, 235, 227, 0.65);
  --timeline-line-end: rgba(74, 103, 65, 0.22);
  color-scheme: light;
}

html[data-theme="slate"] {
  --bg: #0f172a;
  --bg-elevated: #1e293b;
  --bg-soft: #273449;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --accent: #38bdf8;
  --accent-hover: #7dd3fc;
  --accent-dim: rgba(56, 189, 248, 0.16);
  --border: rgba(148, 163, 184, 0.12);
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
  --body-gradient:
    radial-gradient(ellipse 120% 75% at 100% -5%, rgba(56, 189, 248, 0.1), transparent 50%),
    radial-gradient(ellipse 80% 50% at 0% 100%, rgba(99, 102, 241, 0.1), transparent 45%);
  --header-bg: rgba(15, 23, 42, 0.88);
  --nav-drawer-bg: rgba(15, 23, 42, 0.98);
  --section-alt-bg: rgba(30, 41, 59, 0.65);
  --timeline-line-end: rgba(56, 189, 248, 0.22);
  color-scheme: dark;
}

html[data-theme="ember"] {
  --bg: #1a1010;
  --bg-elevated: #241818;
  --bg-soft: #2f1f1a;
  --text: #fdf4f1;
  --text-muted: #cfa89d;
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-dim: rgba(245, 158, 11, 0.14);
  --border: rgba(253, 244, 241, 0.08);
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  --body-gradient:
    radial-gradient(ellipse 115% 70% at 95% -5%, rgba(245, 158, 11, 0.09), transparent 48%),
    radial-gradient(ellipse 85% 50% at 0% 100%, rgba(220, 38, 38, 0.08), transparent 42%);
  --header-bg: rgba(26, 16, 16, 0.9);
  --nav-drawer-bg: rgba(26, 16, 16, 0.97);
  --section-alt-bg: rgba(36, 24, 24, 0.55);
  --timeline-line-end: rgba(245, 158, 11, 0.28);
  color-scheme: dark;
}

html[data-theme="forest"] {
  --bg: #0c1412;
  --bg-elevated: #13221c;
  --bg-soft: #1a2e26;
  --text: #ecfdf8;
  --text-muted: #93c7b8;
  --accent: #34d399;
  --accent-hover: #6ee7b7;
  --accent-dim: rgba(52, 211, 153, 0.14);
  --border: rgba(236, 253, 248, 0.08);
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.38);
  --body-gradient:
    radial-gradient(ellipse 115% 70% at 100% -10%, rgba(52, 211, 153, 0.1), transparent 48%),
    radial-gradient(ellipse 80% 50% at 0% 100%, rgba(16, 185, 129, 0.08), transparent 45%);
  --header-bg: rgba(12, 20, 18, 0.88);
  --nav-drawer-bg: rgba(12, 20, 18, 0.97);
  --section-alt-bg: rgba(19, 34, 28, 0.62);
  --timeline-line-end: rgba(52, 211, 153, 0.22);
  color-scheme: dark;
}

/* Mobile header: moon/sun ↔ warm-dark / warm-light */
.theme-toggle-icon--hidden {
  display: none !important;
}

.theme-toggle-dl {
  box-sizing: border-box;
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle-dl svg {
  display: block;
  width: 22px;
  height: 22px;
}

.theme-toggle-dl:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle-dl:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .theme-toggle-dl {
    display: inline-flex;
  }
}