html[data-theme="light"] {
  color-scheme: light;
  --theme-ink: #20231f;
  --theme-muted: #62675f;
  --theme-paper: #f6f5f0;
  --theme-surface: #fffefb;
  --theme-line: #deded7;
  --theme-soft: #efefe8;
  --theme-accent: #314b3d;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-ink: #f0efe8;
  --theme-muted: #b6b8ae;
  --theme-paper: #151714;
  --theme-surface: #20231f;
  --theme-line: #3b403a;
  --theme-soft: #292d28;
  --theme-accent: #c4d6bb;
}

html[data-theme] body { background-color: var(--theme-paper); color: var(--theme-ink); }
html[data-theme] .site-header { border-color: var(--theme-line); background-color: var(--theme-paper); color: var(--theme-ink); }
html[data-theme] :where(.template, .composer, .rules, .proposal, .email-card, .sheet, .budget, .pricing-sheet, .calendar, .report) { border-color: var(--theme-line); background-color: var(--theme-surface); color: var(--theme-ink); }
html[data-theme] :where(input, textarea, select, option) { border-color: var(--theme-line); background-color: var(--theme-soft); color: var(--theme-ink); }

.theme-toggle.theme-toggle {
  position: relative;
  display: inline-flex;
  width: 78px;
  height: 38px;
  min-width: 78px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  padding: 0;
  perspective: 480px;
  cursor: pointer;
}

.theme-toggle__card {
  position: relative;
  display: block;
  width: 100%;
  height: 38px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

html[data-theme="dark"] .theme-toggle__card { transform: rotateY(180deg); }

.theme-toggle__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid;
  border-radius: 8px;
  padding: 0 9px;
  backface-visibility: hidden;
  box-shadow: 0 4px 12px rgb(0 0 0 / .08);
  font: 750 .68rem/1 "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .055em;
}

.theme-toggle__face svg { width: 15px; height: 15px; flex: 0 0 15px; }
.theme-toggle__face--dark { border-color: #4b504a; background: #20231f; color: #f0efe8; }
.theme-toggle__face--light { border-color: #c9cac2; background: #f6f5f0; color: #20231f; transform: rotateY(180deg); }

.theme-toggle:focus-visible {
  outline: 3px solid var(--theme-accent, var(--focus, var(--accent, #a45e38)));
  outline-offset: 3px;
}

.theme-toggle:focus-visible .theme-toggle__face {
  border-color: var(--theme-accent, var(--focus, var(--accent, #a45e38)));
  box-shadow: 0 5px 16px rgb(0 0 0 / .14);
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover .theme-toggle__face { border-color: var(--theme-accent, var(--focus, var(--accent, #a45e38))); box-shadow: 0 5px 16px rgb(0 0 0 / .14); }
}

:where(
  html[data-theme] body,
  html[data-theme] .site-header,
  html[data-theme] .hero,
  html[data-theme] main,
  html[data-theme] footer,
  html[data-theme] .panel,
  html[data-theme] .card,
  html[data-theme] .tool-card,
  html[data-theme] .tool-workspace,
  html[data-theme] .tool-input-panel,
  html[data-theme] .tool-results-panel,
  html[data-theme] .preview,
  html[data-theme] .print-area,
  html[data-theme] .template,
  html[data-theme] .sheet,
  html[data-theme] .calendar,
  html[data-theme] .report,
  html[data-theme] .proposal,
  html[data-theme] .budget,
  html[data-theme] .composer,
  html[data-theme] .email-card,
  html[data-theme] .callout,
  html[data-theme] .notice,
  html[data-theme] .formula,
  html[data-theme] .ad-slot,
  html[data-theme] details,
  html[data-theme] summary,
  html[data-theme] table,
  html[data-theme] th,
  html[data-theme] td,
  html[data-theme] input,
  html[data-theme] select,
  html[data-theme] textarea
) {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke;
  transition-duration: .3s;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__card { transition-duration: .01ms; }
  :where(
    html[data-theme] body,
    html[data-theme] .site-header,
    html[data-theme] .hero,
    html[data-theme] main,
    html[data-theme] footer,
    html[data-theme] .panel,
    html[data-theme] .card,
    html[data-theme] .tool-card,
    html[data-theme] .tool-workspace,
    html[data-theme] .tool-input-panel,
    html[data-theme] .tool-results-panel,
    html[data-theme] .preview,
    html[data-theme] .print-area,
    html[data-theme] .template,
    html[data-theme] .sheet,
    html[data-theme] .calendar,
    html[data-theme] .report,
    html[data-theme] .proposal,
    html[data-theme] .budget,
    html[data-theme] .composer,
    html[data-theme] .email-card,
    html[data-theme] .callout,
    html[data-theme] .notice,
    html[data-theme] .formula,
    html[data-theme] .ad-slot,
    html[data-theme] details,
    html[data-theme] summary,
    html[data-theme] table,
    html[data-theme] th,
    html[data-theme] td,
    html[data-theme] input,
    html[data-theme] select,
    html[data-theme] textarea
  ) { transition-duration: .01ms; }
}