/* Theme choices are local to this browser; the original dark palette remains the no-JavaScript default. */
:root {
  --button-text: #191713;
  --media-bg: #0b0e10;
  --viewer-bg: #090c0e;
  --tag-bg: #244038;
  --tag-text: #b8e6d7;
  --tag-source-bg: #483923;
  --tag-source-text: #f4cf9b;
  --notice-bg: #1e3029;
  --notice-border: #4b635b;
  --notice-error-bg: #422727;
  --notice-error-border: #805555;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2ea;
  --surface: #ffffff;
  --raised: #ece8df;
  --border: #c9c1b4;
  --text: #202522;
  --muted: #5c665f;
  --accent: #805715;
  --mint: #216653;
  --red: #a63d3d;
  --button-text: #ffffff;
  --media-bg: #e5e4de;
  --viewer-bg: #e2e1db;
  --tag-bg: #d9eee5;
  --tag-text: #164d3e;
  --tag-source-bg: #f5e7c9;
  --tag-source-text: #70470b;
  --notice-bg: #e0f1e8;
  --notice-border: #78a391;
  --notice-error-bg: #f8e1df;
  --notice-error-border: #bd7670;
}

html[data-theme="slate"] {
  color-scheme: dark;
  --bg: #18212b;
  --surface: #222e39;
  --raised: #2d3b47;
  --border: #485968;
  --text: #edf3f6;
  --muted: #b2c0c9;
  --accent: #e6b96a;
  --mint: #9ed1c5;
  --red: #f0a2a2;
  --media-bg: #121a21;
  --viewer-bg: #10171d;
}

html[data-theme="olive"] {
  color-scheme: dark;
  --bg: #1b2117;
  --surface: #272e20;
  --raised: #333d2a;
  --border: #526047;
  --text: #f0f2e8;
  --muted: #bdc4ad;
  --accent: #dfba64;
  --mint: #b1d6a4;
  --red: #f0a8a0;
  --media-bg: #12170f;
  --viewer-bg: #10140d;
  --tag-bg: #30452e;
  --tag-text: #c9e8ba;
  --tag-source-bg: #514423;
  --tag-source-text: #f6d99c;
  --notice-bg: #293c2c;
  --notice-border: #5f7e64;
  --notice-error-bg: #4a2b29;
  --notice-error-border: #8f5b55;
}

/* Two optional cyber/retro palettes; photographs retain their original colors. */
html[data-theme="phosphor"] {
  color-scheme: dark;
  --bg: #090e0b; --surface: #121d16; --raised: #1d2d21;
  --border: #435e47; --text: #d4edcc; --muted: #a2b99d;
  --accent: #9ae66e; --mint: #a4e9c5; --red: #ffb1a6;
  --button-text: #10190c; --media-bg: #080c09; --viewer-bg: #080c09;
  --tag-bg: #223a27; --tag-text: #c4efa5;
  --tag-source-bg: #37331c; --tag-source-text: #e9d591;
  --notice-bg: #1d3023; --notice-border: #638768;
  --notice-error-bg: #3e2622; --notice-error-border: #ae7167;
}

html[data-theme="wired"] {
  color-scheme: dark;
  --bg: #100f1a; --surface: #1b1829; --raised: #29233c;
  --border: #5b4c76; --text: #e6e0f2; --muted: #b6abc9;
  --accent: #81e1e6; --mint: #c8aeff; --red: #ffadc6;
  --button-text: #10191f; --media-bg: #0b0a12; --viewer-bg: #0b0a12;
  --tag-bg: #282844; --tag-text: #b6edf1;
  --tag-source-bg: #3b2943; --tag-source-text: #ecc3ee;
  --notice-bg: #1c303c; --notice-border: #548692;
  --notice-error-bg: #402332; --notice-error-border: #a96584;
}

html:is([data-theme="phosphor"], [data-theme="wired"]) {
  --line: var(--border);
}
html:is([data-theme="phosphor"], [data-theme="wired"]) body {
  font-family: "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 15px;
}
html:is([data-theme="phosphor"], [data-theme="wired"]) :is(.panel, .image-card, .viewer, .button, button, input, select, textarea, .badge, .tag) {
  border-radius: 0;
}
html:is([data-theme="phosphor"], [data-theme="wired"]) .topbar {
  border-top: 2px solid var(--accent);
  background: var(--surface);
}
html:is([data-theme="phosphor"], [data-theme="wired"]) .brand {
  letter-spacing: .11em;
}
html:is([data-theme="phosphor"], [data-theme="wired"]) .eyebrow::before {
  content: "> ";
}
html:is([data-theme="phosphor"], [data-theme="wired"]) .image-card:hover {
  border-color: var(--accent);
}

/* System follows the operating-system color preference after the user selects it. */
html[data-theme="system"] { color-scheme: dark; }
@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --bg: #f5f2ea;
    --surface: #ffffff;
    --raised: #ece8df;
    --border: #c9c1b4;
    --text: #202522;
    --muted: #5c665f;
    --accent: #805715;
    --mint: #216653;
    --red: #a63d3d;
    --button-text: #ffffff;
    --media-bg: #e5e4de;
    --viewer-bg: #e2e1db;
    --tag-bg: #d9eee5;
    --tag-text: #164d3e;
    --tag-source-bg: #f5e7c9;
    --tag-source-text: #70470b;
    --notice-bg: #e0f1e8;
    --notice-border: #78a391;
    --notice-error-bg: #f8e1df;
    --notice-error-border: #bd7670;
  }
}

button, .button { color: var(--button-text); }
button:hover, .button:hover { color: var(--button-text); }
.button.secondary, button.secondary, .button.secondary:hover, button.secondary:hover { color: var(--text); }
button.quiet { color: var(--muted); }
button.quiet:hover { color: var(--accent); }
.mark, .skip { color: var(--button-text); }
input:not([type=checkbox]), select, textarea { background: var(--surface); }
.image-link, .pair img, .family-member img, .review-picture img { background: var(--media-bg); }
.viewer { background: var(--viewer-bg); }
.related-grid img { background: var(--bg); }
.tag { background: var(--tag-bg); color: var(--tag-text); }
.tag.source, .tag.suggested, .card-tags .ai-match { background: var(--tag-source-bg); color: var(--tag-source-text); }
.notice { background: var(--notice-bg); border-color: var(--notice-border); }
.notice.error { background: var(--notice-error-bg); border-color: var(--notice-error-border); }

.theme-picker { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.topbar nav + .theme-picker { margin-left: 0; }
.theme-picker label { color: var(--muted); font-size: .8rem; }
.theme-picker select { width: auto; min-height: 36px; padding: .3rem 1.8rem .3rem .5rem; font-size: .85rem; }
.no-js .theme-picker { display: none; }

@media (max-width: 800px) {
  .theme-picker { order: 2; }
  .topbar nav + .theme-picker { margin-left: auto; }
  .theme-picker label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}