:root {
  color-scheme: light dark;
  --paper-light: #eee9df;
  --paper-dark: #191c18;
  --ink-light: #242923;
  --ink-dark: #ecefe6;
  --muted-light: #62695e;
  --muted-dark: #b8c0b1;
  --accent-light: #b84429;
  --accent-dark: #e88668;
  --line-light: #c4c5b7;
  --line-dark: #596253;
  --white-light: #fbf9f3;
  --white-dark: #252a24;
  --green-light: #33543a;
  --green-dark: #a5c18e;
  --button-hover-light: #d9dbcd;
  --button-hover-dark: #30372e;
  --notice-bg-light: #e0e9d5;
  --notice-bg-dark: #293729;
  --notice-err-light: #f3d6c9;
  --notice-err-dark: #492d27;
  --selected-light: #dedfd1;
  --selected-dark: #30362d;
  --drop-border-light: #959e8c;
  --drop-border-dark: #81917b;
  --drop-bg-light: #e5e7da;
  --drop-bg-dark: #242c24;
  --drop-hover-light: #dce2cf;
  --drop-hover-dark: #303a2e;
  --photo-bg-light: #dce0d5;
  --photo-bg-dark: #31382f;
  --questions-bg-light: #f0e2cf;
  --questions-bg-dark: #3d3428;
  --backdrop-light: #17211bc0;
  --backdrop-dark: #080d0bcc;

  --paper: var(--paper-light);
  --ink: var(--ink-light);
  --muted: var(--muted-light);
  --accent: var(--accent-light);
  --line: var(--line-light);
  --white: var(--white-light);
  --green: var(--green-light);
  --button-hover: var(--button-hover-light);
  --notice-background: var(--notice-bg-light);
  --notice-error-background: var(--notice-err-light);
  --selected-entry: var(--selected-light);
  --drop-border: var(--drop-border-light);
  --drop-background: var(--drop-bg-light);
  --drop-hover-background: var(--drop-hover-light);
  --photo-background: var(--photo-bg-light);
  --questions-background: var(--questions-bg-light);
  --backdrop: var(--backdrop-light);

  @media (prefers-color-scheme: dark) {
    --paper: var(--paper-dark);
    --ink: var(--ink-dark);
    --muted: var(--muted-dark);
    --accent: var(--accent-dark);
    --line: var(--line-dark);
    --white: var(--white-dark);
    --green: var(--green-dark);
    --button-hover: var(--button-hover-dark);
    --notice-background: var(--notice-bg-dark);
    --notice-error-background: var(--notice-err-dark);
    --selected-entry: var(--selected-dark);
    --drop-border: var(--drop-border-dark);
    --drop-background: var(--drop-bg-dark);
    --drop-hover-background: var(--drop-hover-dark);
    --photo-background: var(--photo-bg-dark);
    --questions-background: var(--questions-bg-dark);
    --backdrop: var(--backdrop-dark);
  }

  &:has(> head > meta[name='color-scheme'][content='dark']),
  &[data-theme='dark'] {
    color-scheme: dark;
    --paper: var(--paper-dark);
    --ink: var(--ink-dark);
    --muted: var(--muted-dark);
    --accent: var(--accent-dark);
    --line: var(--line-dark);
    --white: var(--white-dark);
    --green: var(--green-dark);
    --button-hover: var(--button-hover-dark);
    --notice-background: var(--notice-bg-dark);
    --notice-error-background: var(--notice-err-dark);
    --selected-entry: var(--selected-dark);
    --drop-border: var(--drop-border-dark);
    --drop-background: var(--drop-bg-dark);
    --drop-hover-background: var(--drop-hover-dark);
    --photo-background: var(--photo-bg-dark);
    --questions-background: var(--questions-bg-dark);
    --backdrop: var(--backdrop-dark);
  }

  &:has(> head > meta[name='color-scheme'][content='light']),
  &[data-theme='light'] {
    color-scheme: light;
    --paper: var(--paper-light);
    --ink: var(--ink-light);
    --muted: var(--muted-light);
    --accent: var(--accent-light);
    --line: var(--line-light);
    --white: var(--white-light);
    --green: var(--green-light);
    --button-hover: var(--button-hover-light);
    --notice-background: var(--notice-bg-light);
    --notice-error-background: var(--notice-err-light);
    --selected-entry: var(--selected-light);
    --drop-border: var(--drop-border-light);
    --drop-background: var(--drop-bg-light);
    --drop-hover-background: var(--drop-hover-light);
    --photo-background: var(--photo-bg-light);
    --questions-background: var(--questions-bg-light);
    --backdrop: var(--backdrop-light);
  }

  @supports (color: light-dark(white, black)) {
    --paper: light-dark(var(--paper-light), var(--paper-dark));
    --ink: light-dark(var(--ink-light), var(--ink-dark));
    --muted: light-dark(var(--muted-light), var(--muted-dark));
    --accent: light-dark(var(--accent-light), var(--accent-dark));
    --line: light-dark(var(--line-light), var(--line-dark));
    --white: light-dark(var(--white-light), var(--white-dark));
    --green: light-dark(var(--green-light), var(--green-dark));
    --button-hover: light-dark(var(--button-hover-light), var(--button-hover-dark));
    --notice-background: light-dark(var(--notice-bg-light), var(--notice-bg-dark));
    --notice-error-background: light-dark(var(--notice-err-light), var(--notice-err-dark));
    --selected-entry: light-dark(var(--selected-light), var(--selected-dark));
    --drop-border: light-dark(var(--drop-border-light), var(--drop-border-dark));
    --drop-background: light-dark(var(--drop-bg-light), var(--drop-bg-dark));
    --drop-hover-background: light-dark(var(--drop-hover-light), var(--drop-hover-dark));
    --photo-background: light-dark(var(--photo-bg-light), var(--photo-bg-dark));
    --questions-background: light-dark(var(--questions-bg-light), var(--questions-bg-dark));
    --backdrop: light-dark(var(--backdrop-light), var(--backdrop-dark));
  }

  accent-color: var(--green);
  scrollbar-color: var(--muted) var(--paper);
}

::selection {
  background: var(--accent);
  color: var(--white);
}

button:hover { background: var(--button-hover); }
#notice { background: var(--notice-background); }
#notice.error { background: var(--notice-error-background); }
.entry.selected { background: var(--selected-entry); }
.dropzone { border-color: var(--drop-border); background: var(--drop-background); }
.dropzone:hover, .dropzone.dragging { background: var(--drop-hover-background); }
.photo-card img { background: var(--photo-background); }
.questions { background: var(--questions-background); }
iframe { background: var(--white); }
dialog::backdrop { background: var(--backdrop); }

.theme-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  flex: none;
  width: 48px;
  height: 27px;
  padding: 2px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
}

.theme-switch:hover { background: var(--paper-deep, var(--paper)); }
.theme-switch__icon { z-index: 1; display: grid; place-items: center; }
.theme-switch__icon svg { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--ink);
  translate: 0 0;
  transition: translate 160ms ease, transform 160ms ease;
}
:root:not([data-theme='dark']) .theme-switch__icon:first-child { color: var(--paper); }
:root[data-theme='dark'] .theme-switch__thumb { translate: 21px 0; }
@supports not (translate: 0px) {
  :root[data-theme='dark'] .theme-switch__thumb { transform: translateX(21px); }
}
:root[data-theme='dark'] .theme-switch__icon:nth-child(2) { color: var(--accent-ink, var(--paper)); }

@media (prefers-reduced-motion: reduce) {
  .theme-switch__thumb { transition: none; }
}

@media (max-width: 760px) {
  .header-actions .theme-switch { padding: 2px; }
}