/* Light-mode variable overrides + shared theme toggle button.
   Works by overriding the same CSS variables defined in each page's :root block.
   Activated via <html data-theme="light"> — set by theme.js from localStorage. */

/* NOTE: selectors use `html[data-theme="light"]` rather than `[data-theme="light"]`
   to win specificity against each page's inline `<style>` block which contains
   `:root { --bg: ... }`. Both `:root` and `[data-theme="light"]` have specificity
   (0,0,1,0), so source order decides — and the inline <style> comes later, so it
   wins. Adding `html` bumps us to (0,0,1,1) and we beat :root regardless of order. */
html[data-theme="light"] {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface2: #f0f2f5;
  --surface3: #e6e9ed;
  --border: rgba(0, 0, 0, 0.08);
  --border2: rgba(0, 0, 0, 0.15);
  --text: #1a1d24;
  --muted: #5c6370;
  --muted2: #8a8f99;
  --accent: #2563eb;
  --accent-dim: rgba(37, 99, 235, 0.1);
  --green: #16a34a;
  --green-dim: rgba(22, 163, 74, 0.12);
  --amber: #d97706;
  --amber-dim: rgba(217, 119, 6, 0.12);
  --red: #dc2626;
  --red-dim: rgba(220, 38, 38, 0.1);
  --purple: #7c3aed;
  --purple-dim: rgba(124, 58, 237, 0.1);
  --teal: #0d9488;
}

/* The grid background pattern is hardcoded in each page's body::before.
   Override it in light mode so the blue/purple dots are visible on white. */
html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px) !important;
}

/* A few small spots in the pages use hardcoded rgba text/bg colors that don't
   pick up the theme via CSS variables. Nudge them here for readability. */
html[data-theme="light"] input[type="range"] {
  background: var(--surface2) !important;
}
html[data-theme="light"] .bar-wrap {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* FLOATING TOGGLE BUTTON (injected by theme.js) */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 300;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  font-family: inherit;
}
.theme-toggle:hover {
  border-color: var(--accent);
  transform: scale(1.06);
}
.theme-toggle:active {
  transform: scale(0.96);
}
[data-theme="light"] .theme-toggle {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
