/* ── Theme overrides — shared across all timelapse pages ─────────────────────── */

html[data-theme="one-dark"] {
  --bg: #282c34; --surface: #21252b; --border: #3e4451;
  --accent: #61afef; --accent2: #e06c75; --text: #abb2bf;
  --muted: #5c6370; --green: #98c379; --gold: #e5c07b; --purple: #c678dd;
}
html[data-theme="tokyo-night"] {
  --bg: #1a1b2e; --surface: #1f2335; --border: #2a2b3d;
  --accent: #7aa2f7; --accent2: #f7768e; --text: #c0caf5;
  --muted: #565f89; --green: #9ece6a; --gold: #e0af68; --purple: #bb9af7;
}
html[data-theme="tokyo-night-day"] {
  --bg: #e1e2e7; --surface: #ffffff; --border: #c8cadb;
  --accent: #2e7de9; --accent2: #f52a65; --text: #3760bf;
  --muted: #6172b0; --green: #587539; --gold: #8c6c3e; --purple: #9854f1;
}
html[data-theme="things3"] {
  --bg: #f5f4f0; --surface: #ffffff; --border: #e0dbd2;
  --accent: #007aff; --accent2: #e84040; --text: #1a1814;
  --muted: #908880; --green: #28a745; --gold: #e8890c; --purple: #7c3aed;
}

/* Hide pinstripes on all non-dark themes */
html:not([data-theme="dark"]) body::before { display: none; }

/* Light theme grid lines */
html[data-theme="tokyo-night-day"] body::after,
html[data-theme="things3"] body::after {
  background-image: linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
}

/* Button overrides for light themes */
html[data-theme="tokyo-night-day"] .btn-hdr { background: #d0d2e0; border-color: #a0a5c0; color: #3760bf; }
html[data-theme="things3"] .btn-hdr { background: #ede9e3; border-color: #c8c2b8; color: #4a4540; }

/* Theme selector */
#themeSelect {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  padding: 4px 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); cursor: pointer;
  outline: none; transition: border-color .12s, color .12s;
}
#themeSelect:hover, #themeSelect:focus { border-color: var(--accent); color: var(--accent); }
html[data-theme="tokyo-night-day"] #themeSelect { background: #d0d2e0; border-color: #a0a5c0; color: #3760bf; }
html[data-theme="things3"] #themeSelect { background: #ede9e3; border-color: #c8c2b8; color: #4a4540; }