:root {
  --site-theme-control-bg: rgba(255, 255, 255, 0.08);
  --site-theme-control-ink: currentColor;
}

html[data-theme="light"] {
  color-scheme: light;
  --site-theme-control-bg: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --site-theme-control-bg: rgba(255, 255, 255, 0.08);
}

.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--site-theme-control-bg);
  color: var(--site-theme-control-ink);
  font: 9px/1 var(--mono, "DM Mono", monospace);
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.site-theme-toggle .theme-icon {
  color: var(--gold, var(--accent, currentColor));
  font-size: 14px;
  line-height: 1;
}

.site-theme-toggle:is(:hover, :focus-visible) {
  background: var(--gold, var(--accent, currentColor));
  color: #17140e;
  transform: translateY(-1px);
}

.site-theme-toggle:focus-visible {
  outline: 2px solid var(--gold, var(--accent, currentColor));
  outline-offset: 3px;
}

.site-theme-toggle:active {
  transform: translateY(0) scale(0.98);
}

html.theme-transition,
html.theme-transition body,
html.theme-transition :is(
  .site-head,
  .hero,
  .cast,
  .play,
  .closing,
  .site-theme-toggle
) {
  transition:
    background-color 0.45s ease,
    border-color 0.45s ease,
    color 0.45s ease,
    box-shadow 0.45s ease;
}

@media (max-width: 620px) {
  .site-theme-toggle {
    min-height: 32px;
    padding: 6px 9px;
  }

  .site-theme-toggle .theme-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition body,
  html.theme-transition :is(
    .site-head,
    .hero,
    .cast,
    .play,
    .closing,
    .site-theme-toggle
  ) {
    transition: none;
  }
}