html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
.theme-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-header .brand-logo { width: clamp(156px, 40vw, 200px); }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 80px;
  min-height: 44px;
  padding: 0 12px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--theme-surface-raised);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--theme-surface-raised-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.theme-icon { font-size: 19px; line-height: 1; }
[data-theme="light"] .brand-logo,
[data-theme="light"] .mcp-node > img,
[data-theme="light"] .ft-bolt,
[data-theme="light"] .works-i img,
[data-theme="light"] .feeder-h img { filter: brightness(0.2); }
[data-theme="light"] .feeders-pile .feeder {
  background: var(--theme-surface-raised);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 12%, transparent);
}
[data-theme="light"] .feeders-pile .feeder.lit {
  box-shadow: 0 0 0 1px var(--hl-strong), 0 10px 28px color-mix(in srgb, var(--hl) 18%, transparent);
}
[data-theme="light"] .qpick {
  --chip-face: var(--theme-surface-raised);
  --chip-hover: var(--theme-surface-raised-strong);
  --chip-edge: var(--palette-spanish-300);
  --chip-outline: var(--theme-line);
}
[data-theme="light"] .cd {
  --cl-bg: var(--theme-surface-raised);
  --cl-side: var(--theme-surface);
  --cl-raised: var(--theme-surface-raised-strong);
  --cl-field: var(--theme-surface);
  --cl-ink: var(--theme-ink);
  --cl-muted: var(--theme-ink-muted);
  --cl-faint: var(--theme-ink-faint);
  --cl-line: var(--theme-line);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--ink) 12%, transparent);
}
[data-theme="light"] .cd-sess-active,
[data-theme="light"] .cd-a code,
[data-theme="light"] .cd-badge { background: var(--theme-surface-raised-strong); }
[data-theme="light"] .cd-tool b { color: var(--palette-golden-800); }
[data-theme="light"] footer.ft { background: var(--theme-surface-raised-strong); }
[data-theme="light"] .ft-word { color: var(--ink); }
.ft-word-asset {
  aspect-ratio: 1414 / 269;
  background: currentColor;
  mask: url('/img/ivory-footer-wordmark.svg') center / 100% 100% no-repeat;
  transform: none;
}
[data-theme="light"] .ft-word-asset { color: var(--palette-golden-900); }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* Requested light-mode counterpart to the existing holographic card shine. */
[data-theme="light"] .holo::before {
  background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--palette-greyscale-50) 85%, transparent), transparent 65%);
  mix-blend-mode: normal;
}
[data-theme="light"] .holo::after {
  background: linear-gradient(115deg, transparent 24%, color-mix(in srgb, var(--theme-accent) 18%, transparent) 38%, color-mix(in srgb, var(--palette-greyscale-50) 80%, transparent) 47%, color-mix(in srgb, var(--palette-holly-400) 16%, transparent) 60%, transparent 76%);
  background-size: 230% 230%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: multiply;
}
[data-theme="light"] .feeders-pile .holo:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 35%, var(--line)), 0 18px 40px color-mix(in srgb, var(--ink) 18%, transparent);
}