:root {
  color-scheme: light;
  --night-paper: #141a21;
  --night-surface: #202830;
  --night-inset: #1b232c;
  --night-hover: #33424a;
  --night-ink: #f1e9dd;
  --night-muted: #c7c4bd;
  --night-edge: #47525b;
  --night-control: #87929a;
  --night-accent: #ffba92;
  --night-action-hover: #ffcfb3;
  --night-prose: #d7cfc3;
  --night-backdrop: #080d12cc;
  --ink: var(--theme-ink, #202326);
  --paper: var(--theme-page, #f7f2e9);
  --muted: var(--theme-muted, #525b5d);
  --edge: var(--theme-edge, #dcd4c6);
  --rust: var(--theme-accent, #8c351e);
  --theme-action-ink: var(--theme-ink, #16212a);
  --theme-action-fill: var(--theme-accent, #16212a);
  --theme-action-text: var(--theme-page, #fffcf6);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: var(--night-paper);
  --theme-ink: var(--night-ink);
  --theme-muted: var(--night-muted);
  --theme-edge: var(--night-edge);
  --theme-surface: var(--night-surface);
  --theme-inset: var(--night-inset);
  --theme-hover: var(--night-hover);
  --theme-control-border: var(--night-control);
  --theme-accent: var(--night-accent);
  --theme-action-hover: var(--night-action-hover);
  --theme-prose: var(--night-prose);
  --theme-backdrop: var(--night-backdrop);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --theme-page: var(--night-paper);
    --theme-ink: var(--night-ink);
    --theme-muted: var(--night-muted);
    --theme-edge: var(--night-edge);
    --theme-surface: var(--night-surface);
    --theme-inset: var(--night-inset);
    --theme-hover: var(--night-hover);
    --theme-control-border: var(--night-control);
    --theme-accent: var(--night-accent);
    --theme-action-hover: var(--night-action-hover);
    --theme-prose: var(--night-prose);
    --theme-backdrop: var(--night-backdrop);
  }
}

.theme-control {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: #f4e9dc;
  font: inherit;
  letter-spacing: .02em;
  white-space: nowrap;
}

.theme-control select {
  min-height: 28px;
  padding: 2px 5px;
  border: 1px solid #998c80;
  border-radius: 2px;
  background: #19222b;
  color: #f4e9dc;
  color-scheme: dark;
  font: inherit;
  cursor: pointer;
}

:focus-visible { outline-color: var(--theme-accent, #ce552c); }
.motion-switch:focus-visible { outline-color: var(--cinema-copper); }
.theme-control select:hover { border-color: #df9c72; }
.theme-control select:focus-visible { outline: 2px solid #ffbd90; outline-offset: 2px; }

.brand { color: var(--theme-action-ink); }
.brand-inverse, .support-band { color: #f7f2e9; }
.search-open kbd {
  background: var(--theme-inset, #ece6db);
  border-color: var(--theme-control-border, #dcd3c3);
}
.icon-button:hover {
  background: var(--theme-hover, #eae8de);
  border-color: var(--theme-control-border, #dcd8cc);
}

.button-dark {
  background: var(--theme-action-fill);
  color: var(--theme-action-text);
}
.button-dark:hover { background: var(--theme-action-hover, #344a40); }
.button-outline:not(:where(.methods-band *)) {
  border-color: var(--theme-control-border, #a1a99b);
  color: var(--theme-action-ink);
}
.button-outline:not(:where(.methods-band *)):hover {
  background: var(--theme-action-fill);
  border-color: var(--theme-action-fill);
  color: var(--paper);
}

.desk-strip {
  background: var(--theme-inset, #efe9df);
  border-color: var(--theme-edge, #ded3c6);
}
.desk-strip-inner > a { border-color: var(--theme-edge, #d8ccbe); }
.desk-strip-inner .signal-dot { background: var(--theme-accent, #a44429); }
.network-band {
  background: var(--theme-inset, #eee6d9);
  border-color: var(--theme-edge, #dcd1c0);
}
.story-card:not(:where(.story-feature, .story-method)), .network-card {
  background: var(--theme-surface, #fffcf6);
}
.save-button:not(:where(.story-feature *, .story-method *)) {
  border-color: var(--theme-control-border, #cdd0c3);
  color: var(--theme-action-ink);
}
.save-button:not(:where(.story-feature *, .story-method *)):is(:hover, [aria-pressed="true"]) {
  background: var(--theme-hover, #e5ede1);
  border-color: var(--theme-accent, #8d9f8a);
}

.filters button {
  color: var(--theme-action-ink);
  border-color: var(--theme-control-border, #a19a8f);
}
.filters button:hover { background: var(--theme-hover, #e6e9de); }
.filters button[aria-pressed="true"] {
  color: var(--theme-action-text);
  background: var(--theme-action-fill);
  border-color: var(--theme-action-fill);
}
.library-empty { border-color: var(--theme-control-border, #a6b09e); }
.archive-note { background: var(--theme-inset, #e8e9df); }

.reading-copy p, .detail-section p { color: var(--theme-prose, #394c40); }
.source-box, .article-toc { background: var(--theme-inset, #efe8dd); }
.source-box {
  border-color: var(--theme-edge, #d8cbbe);
  border-top-color: var(--theme-accent, #a74428);
}
.article-toc { border-left-color: var(--theme-accent, #a74428); }
.source-box p { color: var(--theme-muted, #4b5d50); }
.source-box li + li, .detail-aside-nav { border-color: var(--theme-edge, #c9d1c2); }
.reading-progress { --progress-fill: var(--theme-accent, #a74428); color: var(--progress-fill); }
.reading-progress::-webkit-progress-value { background: var(--progress-fill); }
.reading-progress::-moz-progress-bar { background: var(--progress-fill); }

.search-dialog { border-top-color: var(--theme-accent, #ae4c2e); }
.search-dialog::backdrop { background: var(--theme-backdrop, #0b1813b5); }
.search-field {
  border-color: var(--theme-control-border, #849385);
  background: var(--theme-surface, #fffcf6);
}
.search-field:focus-within { outline-color: var(--theme-accent, #ad4a2a); }
.search-result:hover { background: var(--theme-hover, #e6e9dc); }

@media (max-width: 430px) {
  .utility-inner { justify-content: flex-end; }
  .utility-inner > span { display: none; }
}