/* ═══════════════════════════════════════════════════════════════
   THEME.CSS — light/dark mode for atcooper.net
   Loaded sitewide AFTER each page's inline <style> block, so these
   rules win on cascade. Pages declare their colour variables in a
   :root block; this file overrides them under [data-theme="light"].

   Strategy: swap the semantic role of --dark and --bone (bg ↔ text)
   so that any page rule reading "background: var(--dark); color:
   var(--bone)" continues to work after the flip. Hardcoded raw-hex
   colours that appear across multiple pages are mopped up below.
   ═══════════════════════════════════════════════════════════════ */

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* Smooth flip */
html, body, * {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease;
}

/* ─── LIGHT MODE: invert the bg/text semantic pair ─────────────
   Core token overrides for light mode live in /css/styleguide.css.
   This file keeps an extra --bg alias used by older inline styles
   and any hardcoded-hex mop-ups below.
   ─────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg: #f6f0e7;
}

/* ─── Mop up hardcoded raw-hex colours that ignore CSS vars ── */
html[data-theme="light"] body {
  background-color: #f6f0e7 !important;
  color: #0a0a0a !important;
}
html[data-theme="light"] html { background-color: #f6f0e7; }

/* Pages that hardcode #fff (e.g. homepage .question) need a dark colour on cream */
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:white"],
html[data-theme="light"] [style*="color: white"] {
  color: #0a0a0a !important;
}
/* The homepage uses raw #fff in the .question class — catch it via class */
html[data-theme="light"] .question { color: #0a0a0a !important; }

/* Common inline-styled greys used on dark mode → re-pitch for light */
html[data-theme="light"] [style*="color:#ccc"],
html[data-theme="light"] [style*="color: #ccc"],
html[data-theme="light"] [style*="color:#999"],
html[data-theme="light"] [style*="color: #999"],
html[data-theme="light"] [style*="color:#666"],
html[data-theme="light"] [style*="color: #666"],
html[data-theme="light"] [style*="color:#555"],
html[data-theme="light"] [style*="color: #555"],
html[data-theme="light"] [style*="color:#333"],
html[data-theme="light"] [style*="color: #333"],
html[data-theme="light"] [style*="color:#222"],
html[data-theme="light"] [style*="color: #222"] {
  color: #555 !important;
}

html[data-theme="light"] [style*="background:#0a0a0a"],
html[data-theme="light"] [style*="background: #0a0a0a"],
html[data-theme="light"] [style*="background-color:#0a0a0a"],
html[data-theme="light"] [style*="background-color: #0a0a0a"],
html[data-theme="light"] [style*="background:#0c0c0c"],
html[data-theme="light"] [style*="background: #0c0c0c"] {
  background: #e8e2da !important;
}

/* The atcr green works on both, but lift it slightly when on cream */
html[data-theme="light"] [style*="color:#415443"],
html[data-theme="light"] [style*="color: #415443"] { color: #2f3e30 !important; }

/* ═══════════════════════════════════════════════════════════════
   TOGGLE BUTTON — top-right, every page
   Solid background so it covers any page content behind it (e.g.
   the /work year-filter "73 works" counter that sticks to the
   right edge). Pages with sticky top bars should reserve right
   padding so the counter doesn't slide under it (see .year-filter
   override at the bottom of this file).
   ═══════════════════════════════════════════════════════════════ */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bone, #e8e2da);
  background: var(--dark, #0a0a0a);
  border: 1px solid var(--mid, #666);
  padding: 6px 14px;
  cursor: pointer;
  user-select: none;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.theme-toggle:hover {
  color: var(--bright, #e0e0e0);
  border-color: var(--bone, #e8e2da);
}
html[data-theme="light"] .theme-toggle {
  color: #2f3e30;
  background: #f6f0e7;
  border-color: #2f3e30;
}
html[data-theme="light"] .theme-toggle:hover {
  background: #ebe4d7;
}

.theme-toggle .theme-sun  { display: none; }
.theme-toggle .theme-moon { display: inline; }
html[data-theme="light"] .theme-toggle .theme-sun  { display: inline; }
html[data-theme="light"] .theme-toggle .theme-moon { display: none; }

/* /work has a sticky filter bar with a "N works" counter floated
   to the right edge — reserve space so it doesn't sit under the
   theme toggle. */
.year-filter { padding-right: 110px !important; }
.year-filter-count { margin-right: 0 !important; }

/* ─── Tools page: lift cards above the page bg in light mode ── */
html[data-theme="light"] .tool-card,
html[data-theme="light"] .preview-card {
  background: #fdf8f0 !important;
  box-shadow: 0 1px 0 rgba(65,84,67,0.04);
}
html[data-theme="light"] .tool-card:hover,
html[data-theme="light"] .preview-card:hover {
  background: #fffaf2 !important;
}
html[data-theme="light"] .preview-frame {
  background: #ece6dc !important;
}
/* The page-bg "header" rule on tools.html doesn't carry — give it a
   subtle wash so the cards have something to lift off of. */
html[data-theme="light"] body { background: #f1ebe1 !important; }

/* ═══════════════════════════════════════════════════════════════
   CENTERED HOMEPAGE PICKER
   Two pill buttons. Sits in the homepage flow via .theme-picker
   ═══════════════════════════════════════════════════════════════ */
.theme-picker {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 2.5rem auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.theme-picker button {
  background: transparent;
  border: 1px solid var(--mid, #666);
  color: var(--mid, #888);
  padding: 8px 22px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all 0.25s;
}
.theme-picker button + button { border-left: 0; }
.theme-picker button:hover {
  color: var(--bone, #e8e2da);
  border-color: var(--bone, #e8e2da);
}
.theme-picker button[aria-pressed="true"] {
  color: var(--bone, #e8e2da);
  border-color: var(--bone, #e8e2da);
  background: rgba(65, 84, 67, 0.15);
}
html[data-theme="light"] .theme-picker button {
  color: #777;
  border-color: #777;
}
html[data-theme="light"] .theme-picker button:hover,
html[data-theme="light"] .theme-picker button[aria-pressed="true"] {
  color: #0a0a0a;
  border-color: #0a0a0a;
  background: rgba(65, 84, 67, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   SONIC PHENOMENOLOGY DIAGRAMS — light-mode SVG overrides
   The two /sonic-decomposition pages embed an inline SVG with
   hardcoded fills tuned for dark mode (#e8e2da text, rgba(255,255,
   255,0.02) box fills). On cream those go invisible. These class
   names (.lbl, .lbl-lg, .box-input, .box-soft, .phase, .panel) are
   only used inside that SVG so the sitewide selector is safe.
   Specificity (1,1,0) beats the SVG <style>'s (0,1,0) regardless of
   source order in the document.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .lbl,
html[data-theme="light"] .lbl-lg { fill: #1a1a1a; }
html[data-theme="light"] .sub    { fill: #5a544c; }
html[data-theme="light"] .tiny   { fill: #6a645a; }
html[data-theme="light"] .phase  { fill: #3a6470; }
html[data-theme="light"] .arrow      { stroke: #5a544c; }
html[data-theme="light"] .arrow-soft { stroke: #8a847a; }
html[data-theme="light"] .box        { fill: rgba(65, 84, 67, 0.04);  stroke: #415443; }
html[data-theme="light"] .box-input  { fill: rgba(58, 100, 112, 0.10); stroke: #3a6470; }
html[data-theme="light"] .box-soft   { fill: rgba(65, 84, 67, 0.025); stroke: #8a847a; }
html[data-theme="light"] .panel      { stroke: #c9c2b6; }
/* Arrowheads: override the inline fill="#666" / fill="#444" presentation
   attributes on the marker paths. */
html[data-theme="light"] #arrowhead path      { fill: #5a544c; }
html[data-theme="light"] #arrowhead-soft path { fill: #8a847a; }

/* No-flash: hide everything until JS has set the theme attribute.
   Without this, dark-default pages briefly flash dark before flipping
   to light for users who chose light previously. */
html:not([data-theme]) body { visibility: hidden; }