/* The Odds Gap — LIGHT theme (#164).
 *
 * Dark stays the default. Everything here activates only under
 * html[data-theme="light"], set pre-paint by the inline snippet in
 * _pwa_head.html. The site's templates share one :root palette (--gold,
 * --bg/--bg2/--bg3, --border, --text, --muted, ...), so the variable block
 * below flips ~85% of every page; the rest of this file patches the known
 * hard-coded dark spots (validated against the live-site preview, July 16).
 *
 * Gold is DARKENED in light mode: #B69862 on white fails contrast; #8A6D2F
 * keeps the brand hue at readable contrast.
 */

html[data-theme="light"] {
  color-scheme: light;
  --gold:    #8A6D2F;
  --gold-lt: #A5854A;
  --bg:      #F6F4EF;
  --bg2:     #FFFFFF;
  --bg3:     #ECE7DB;
  --border:  #D9D2C2;
  --text:    #17150F;
  --muted:   #6E6858;
  --green:   #0B8A66;
  --red:     #C43C34;
  --yellow:  #9A7B00;
}

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* ── Hard-coded dark strays the variable flip can't reach ────────────────── */

/* Hero / page-header gradients (templates hard-code near-black stops). */
html[data-theme="light"] .page-header,
html[data-theme="light"] .hero {
  background: linear-gradient(135deg, #F6F4EF 0%, #EDE6D4 100%) !important;
}

/* Header bar. */
html[data-theme="light"] header {
  background: var(--bg2);
  border-color: var(--border);
}

/* Nav links: index and friends hard-code near-white link colors and
   #242424 hover chips. */
html[data-theme="light"] .tab-nav a { color: #4A4436; }
html[data-theme="light"] .tab-nav a:hover,
html[data-theme="light"] .tab-nav a:active { color: var(--text); background: #ECE7DB; }
html[data-theme="light"] .tab-nav a.active { color: var(--gold); }
html[data-theme="light"] .tab-nav .nav-dropdown-btn { color: #4A4436; }
html[data-theme="light"] .site-menu-dropdown {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .site-menu-dropdown a { color: #4A4436 !important; }

/* Desktop left rail (site-chrome.css hard-codes the active chip #1c1810). */
@media (min-width: 1500px) {
  html[data-theme="light"] nav.tab-nav { background: #F1EDE3 !important; }
  html[data-theme="light"] nav.tab-nav a.active,
  html[data-theme="light"] nav.tab-nav .nav-dropdown-btn.active,
  html[data-theme="light"] nav.tab-nav .nav-dropdown.open .nav-dropdown-btn {
    background: #EFE7D2 !important;
  }
}

/* Affiliate chips — header ticker AND the in-content sign-up rows (Dan,
   July 16 round 2): plain outline, no dark fill, no gradient. Book names
   use each book's stronger accent color; CTA text goes muted ink. */
html[data-theme="light"] .tog-aff-tick,
html[data-theme="light"] .tog-aff-chip {
  background: transparent !important;
  border: 1px solid #17150F !important;
}
html[data-theme="light"] .tog-aff-tick .tog-aff-tick-book,
html[data-theme="light"] .tog-aff-chip .tog-aff-book {
  color: var(--acc, #8A6D2F) !important;
}
html[data-theme="light"] .tog-aff-tick .tog-aff-tick-cta,
html[data-theme="light"] .tog-aff-chip .tog-aff-cta {
  color: #6E6858 !important;
}

/* Header chrome: interactive controls go INK in light mode — gold on cream
   is too faint to read (Dan, July 16 round 2). The logo image keeps the
   brand mark but deepens toward bronze so it holds contrast. */
html[data-theme="light"] .site-menu-btn { color: #17150F; }
html[data-theme="light"] .og-beta-chip {
  color: #17150F;
  border-color: rgba(23, 21, 15, 0.55);
}
html[data-theme="light"] header [class*="bell"] { color: #17150F !important; }
html[data-theme="light"] .logo-img { filter: brightness(0.55) saturate(1.35); }

/* LIVE red: the dark theme's soft red (#e5484d / #ff8a8e) reads PINK on
   cream — use a true red in light mode (Dan, July 16 round 2). */
html[data-theme="light"] #lsLiveFilterBtn .live-dot { background: #C1170C !important; }
html[data-theme="light"] #lsLiveFilterBtn:hover,
html[data-theme="light"] #lsLiveFilterBtn.active {
  background: rgba(193, 23, 12, 0.08) !important;
  border-color: #C1170C !important;
  color: #A31009 !important;
}
html[data-theme="light"] #lsLiveFilterBtn.active .live-dot,
html[data-theme="light"] #lsLiveFilterBtn:hover .live-dot { background: #C1170C !important; }
html[data-theme="light"] .gc-live-chip { color: #A31009 !important; }

/* +EV Email signup card: no black fields on a white card (Dan, July 16
   round 2) — white input, parchment checkbox chips, white-on-gold button. */
html[data-theme="light"] .email-signup input[type=email] {
  background: #FFFFFF;
  color: var(--text);
}
html[data-theme="light"] .email-signup .es-grid label {
  background: #F1EDE3;
  color: #4A4436;
}
html[data-theme="light"] .email-signup button { color: #FFFFFF; }

/* Generic dark-chip hovers that templates hard-code (#242424 / #1A1A1A). */
html[data-theme="light"] .day-pill:hover,
html[data-theme="light"] .filter-pill:hover { background: #E5DFD0; }

/* ── The toggle control (styled for BOTH themes) ─────────────────────────
   Segmented pill, deliberately identical to the AM/DEC odds-format toggle
   (.tog-fmt in odds-format.js): both options always visible, active side
   filled gold. Sun and moon rendered large enough to read at a glance. */

.tog-theme {
  display: inline-flex;
  background: #151515;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: 2px;
  font-family: inherit;
  flex-shrink: 0;
  align-self: center;
}
.tog-theme button {
  background: transparent;
  border: 0;
  color: #8a8a8a;
  font-weight: 700;
  font-size: 15px;              /* bigger glyphs than the AM/DEC text */
  line-height: 1;
  letter-spacing: 0;
  padding: 3px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tog-theme button:hover  { color: #DDBC84; }
.tog-theme button.active { background: #B69862; color: #0A0A0A; }
html[data-theme="light"] .tog-theme { background: var(--bg3); border-color: var(--border); }
html[data-theme="light"] .tog-theme button        { color: var(--muted); }
html[data-theme="light"] .tog-theme button:hover  { color: var(--gold); }
html[data-theme="light"] .tog-theme button.active { background: var(--gold); color: #FFFFFF; }

/* Desktop rail (>=1500px): sits UNDER All States (DOM order), indented to
   line up with the rail controls. */
@media (min-width: 1500px) {
  nav.tab-nav .tog-theme { margin: 8px 14px 0; align-self: flex-start; }
}

/* Mobile: small and ALL THE WAY LEFT on the same wrapped bar as the AM/DEC
   and All States controls (flex order pulls it ahead of both; the tab links
   keep order 0 so the bar itself stays after the tabs). */
@media (max-width: 600px) {
  nav.tab-nav .tog-theme          { order: 1; margin-left: 8px; }
  nav.tab-nav .tog-theme button   { font-size: 13px; padding: 2px 9px; }
  nav.tab-nav .odds-toggle-mount  { order: 2; }
  nav.tab-nav .state-filter-mount { order: 3; }
}