/* The same lab, with the room lights down. Photographs keep their own color. */
:root { color-scheme: light; }

.site-header nav { flex-wrap: wrap; justify-content: flex-end; }
.site-header nav .dark-room-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 43px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--paper);
  font: 18px/1 LabDisplay, Impact, sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header nav .dark-room-toggle:hover { background: var(--mint); }
.dark-room-toggle[hidden] { display: none !important; }
.dark-room-indicator {
  width: 11px;
  height: 11px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
}
.dark-room-toggle[aria-pressed=true] .dark-room-indicator {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
@media (max-width: 700px) {
  .site-header nav { display: grid; }
  .site-header nav .dark-room-toggle { height: 38px; padding: 0 7px; font-size: 15px; gap: 5px; }
}
@media (max-width: 360px) {
  .site-header nav .dark-room-toggle { font-size: 13px; gap: 4px; }
  .dark-room-indicator { width: 8px; height: 8px; }
}

html[data-theme=dark] {
  color-scheme: dark;
  --ink: #f1eadb;
  --paper: #181e26;
  --yellow: #514222;
  --pink: #462f3c;
  --mint: #253f3b;
  --accent: #f0a9c1;
  --room-surface: #222b35;
  --room-raised: #2b3642;
  --room-line: #73808b;
  --room-muted: #bac1c9;
  --room-shadow: #080c11;
  --room-focus: #96bdff;
}
html[data-theme=dark] body {
  background-image: radial-gradient(#f1eadb06 .6px, transparent .7px);
  background-size: 5px 5px;
}
html[data-theme=dark] :is(button, a, input, select, summary, textarea, [tabindex]):focus-visible {
  outline-color: var(--room-focus);
}

/* Paper frames, form fields, and panels with fixed light backgrounds. */
html[data-theme=dark] :is(
  .tool-content, .photo-mount, .polaroid, .polaroid-shelf .polaroid,
  .catalog-grid .polaroid, .photo-options button, .auth,
  .saved-look-tray .recipe-card, .purchase-download-panel,
  .camera-folder-found, .camera-model-help, .camera-connected-bar,
  .camera-slot-panel, .camera-preview-panel, .camera-filter-tools,
  .camera-original-active, .photo-desk, .photo-backup-panel,
  .photo-filter-control p, .capable-editor,
  .blog-card, .blog-cover img, .blog-comparison
) { background: var(--room-surface); }
html[data-theme=dark] :is(
  .camera select, .catalog-intro + .search input,
  .camera-preview-name-editor input, .camera-filter-tool-card select,
  .photo-filter-control select, .blog-search input, .blog-search select
) { background: var(--paper); }
html[data-theme=dark] .saved-empty { background: var(--room-surface); }
html[data-theme=dark] .saved-look-tray .modified-saved-look { background: var(--pink); }
html[data-theme=dark] .curve { background: var(--room-surface); }
html[data-theme=dark] .curve path { stroke: var(--room-line); }
html[data-theme=dark] .editor-stage { background: var(--paper); }
html[data-theme=dark] .editor-loading { background: #222b35e6; }
html[data-theme=dark] .preview-lock { background: #181e26ed; }
html[data-theme=dark] .blog-body blockquote { background: var(--room-surface); }

/* Replace bright paper textures with quiet, tinted surfaces. */
html[data-theme=dark] :is(.originals, .pack-banner) { background: var(--pink); }
html[data-theme=dark] .free-volume-callout { background: var(--yellow); }
html[data-theme=dark] :is(
  .control-panel .workspace-heading, .camera-panel-heading,
  .camera-browser-note, .camera-connect-card, .camera-identify-card,
  .blog-follow
) { background-image: none; }

/* Softer outlines retain the lab's framed controls. */
html[data-theme=dark] :is(
  button, .button, input, select, textarea, dialog, th, td,
  .brand, .site-header nav a, .site-footer, .control-panel,
  .workspace-heading, .titlebar, .tabs, .toolbar, .tool-content,
  .photo-mount, .polaroid, .polaroid-shelf .polaroid, .catalog-grid .polaroid,
  .saved-section, .saved-section .section-heading, .saved-empty,
  .recipe-card, .notice, .auth, .collection-ticket, .collection-ticket::before,
  .purchase-download-panel, .purchase-account-prompt, .cart-item,
  .camera-browser-note, .camera-connect-card, .camera-identify-card,
  .camera-folder-guide, .camera-folder-found, .camera-folder-guide-image,
  .camera-connected-bar, .camera-connection-copy > span:last-child,
  .camera-slot-panel, .camera-preview-panel, .camera-filter-tools,
  .camera-panel-heading, .camera-slot-row, .camera-legend,
  .camera-filter-detail, .camera-filter-tool-card, .camera-filter-tool-history,
  .camera-original-active, .camera-loading-status, .camera-progress,
  .camera-filter-backups, .photo-desk, .photo-gallery, .photo-filter-control,
  .photo-output-actions, .photo-backup-panel, .editor-stage, .editor-tabs,
  .editor-detail, .editor-export, .ad-placement,
  .blog-card, .blog-search, .blog-cover img, .blog-body figure img,
  .blog-empty, .blog-follow, .blog-toc, .blog-tip, .blog-filter,
  .blog-comparison, .blog-resource
) { border-color: var(--room-line); }
html[data-theme=dark] :is(
  .control-panel, .photo-mount, .polaroid, .polaroid-shelf .polaroid,
  .catalog-grid .polaroid, .photo-options button, .button,
  .site-header nav a[aria-current=page], .primary, .sample-strip > .button,
  .polaroid-foot button, .auth, dialog, .blog-card
) { box-shadow: 2px 3px 0 var(--room-shadow); }
html[data-theme=dark] .header-stripe { background: var(--room-line); }
html[data-theme=dark] :is(.photo-mount > .titlebar, .camera-preview-panel .camera-panel-heading) {
  background: var(--room-raised);
  color: var(--ink);
}
html[data-theme=dark] :is(.camera-slot-copy small, .photo-thumb-loading,
  .editor-safety, .purchase-download-divider, .auth-alternative) { color: var(--room-muted); }
html[data-theme=dark] :is(.purchase-download-divider, .auth-alternative)::before,
html[data-theme=dark] :is(.purchase-download-divider, .auth-alternative)::after {
  background: var(--room-line);
}
html[data-theme=dark] :is(.camera-slot-state.built-in, .camera-legend i.built-in) {
  background: var(--room-raised);
}
html[data-theme=dark] .camera-slot-state.error { background: var(--pink); }
html[data-theme=dark] .camera-slot-row:hover { background: var(--mint); }
html[data-theme=dark] :is(.cs8-controls select, .video-view-controls select) { background:var(--paper); color:var(--ink); border-color:var(--room-line); color-scheme:dark; }
html[data-theme=dark] :is(.cs8-controls select, .video-view-controls select) option { background:var(--paper); color:var(--ink); }
html[data-theme=dark] .color-stamp { color: var(--accent); border-color: var(--accent); }
html[data-theme=dark] .auth .errorlist { color: #ffafc3; }
html[data-theme=dark] :is(button.primary:disabled, .panel-body > button.primary:disabled) {
  background: var(--room-raised);
  color: var(--room-muted);
  border-color: var(--room-line);
}
html[data-theme=dark] .control-panel .history button:disabled {
  color: var(--room-muted);
  border-color: var(--room-line);
}
html[data-theme=dark] :is(.camera-working i, .camera-loading-status i,
  .photo-thumb-loading i, .editor-loading i) {
  border-color: var(--room-line);
  border-top-color: var(--ink);
}

/* Neutral viewing areas and legible overlays, without filtering image pixels. */
html[data-theme=dark] :is(canvas, .preview-scroll, .camera-preview-scroll,
  .camera-preview-frame, .catalog-grid .catalog-split-preview,
  .photo-edit-stage) { background: var(--room-shadow); }
html[data-theme=dark] :is(.split-label, .photo-edit-loading) { color: var(--ink); }
html[data-theme=dark] .split-label { background: var(--room-surface); }
html[data-theme=dark] .photo-edit-loading { background: #181e26ed; }
html[data-theme=dark] .photo-edit-loading i {
  border-color: var(--room-line);
  border-top-color: var(--ink);
}
html[data-theme=dark] dialog::backdrop { background: #05090dcc; }