/* Light-mode overrides. Dark mode is the default defined inline in each page. */
html[data-theme="light"] {
  --bg-deep: #f5f6f8;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #eef0f4;
  --border: #d8dbe2;
  --border-bright: #b8bcc6;
  --text-primary: #1a1d24;
  --text-secondary: #4a5060;
  --text-dim: #7a8090;
  --phosphor: #1a8a4a;
  --phosphor-dim: #b8e6c8;
  --phosphor-glow: rgba(26, 138, 74, 0.10);
  --amber: #c47410;
  --amber-dim: #f0d8a8;
  --amber-glow: rgba(196, 116, 16, 0.10);
  --red: #c43a3a;
  --red-dim: #f0c0c0;
  --cyan: #1a7896;
  --cyan-dim: #c0e0ec;
  --violet: #6a4ab8;
}

/* Suppress the CRT scanline overlay in light mode — it reads as dirt on white. */
html[data-theme="light"] body::before { display: none; }

/* Theme toggle button — neutral styling that works on both backgrounds. */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.theme-toggle:hover {
  color: var(--phosphor);
  border-color: var(--border-bright);
}
.theme-toggle .theme-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}