/* Light/dark theme — light palette + perpetual toggle.
   Dark is the default (styles.css :root). Light kicks in when the
   <html> element carries data-theme="light".
   Toggle UI is injected by theme.js as a fixed-position button. */

/* ─── Light-mode palette ───────────────────────────────────────── */
/* ── The light palette, brought onto the house values 2026-08-21 ──────
   Two changes, both already signed off on apex and carried here so the
   properties match:

   1. The ground is the old #E7D0F4 lilac diluted 50% toward white. The
      surfaces are diluted alongside it: if the page lightens and the cards
      do not, the cards stop reading as a gentle step up and start reading
      as heavy blocks.
   2. The accent is PINE, not the old olive. The olive was not too dark, it
      scored 8.4:1. It was YELLOW-green (hue 81 degrees), and the true
      color-wheel opposite of this lilac (hue 277) is yellow-green, so the
      two fought every time they touched. Pine is the same family rotated to
      hue 149, away from yellow. Every tier below is verified at or above
      4.5:1 on the new ground. */
html[data-theme="light"] {
  --bg-page:        #F3E8FA;
  --bg-raised:      #E8D7F1;
  --bg-sidebar:     #E8D7F1;
  --bg-card:        #E8D7F1;
  --bg-inset:       #E1CCEC;
  --bg-elevated:    #E1CCEC;
  --row-hover:      #E1CCEC;
  --border:         #C4A5D7;
  --border-dashed:  #B28DC9;

  --text-primary:   #1F2E26;   /* 12.01:1 */
  /* ⛔ These three were tuned against the PAGE ground only, where they scored
     6.38 / 5.14 / 4.72. On a card or an inset row (#E9D5F1, #E4CEED) they fell
     to 5.16 / 4.16 / 3.70 and two of the three stopped being readable. Retuned
     2026-08-25 against the DARKEST surface they can land on, so each ratio
     below is the worst case, not the best. */
  --text-secondary: #3F4C44;   /* 6.03:1 on inset, 7.62 on page */
  --text-tertiary:  #4D5952;   /* 4.90:1 on inset, 6.19 on page */
  --text-faint:     #525C56;   /* 4.65:1 on inset, 5.86 on page */

  --gold:           #28593F;   /* pine, 6.84:1 */
  --gold-hover:     #184A31;
  --gold-text-soft: #3A624B;
  --on-gold:        #F3E8FA;

  /* Category letter grades — light counterparts, also lifted verbatim from the
     Leagues app (`static_nba/theme.css`). See the note in styles.css. */
  --grade-anchor:      #6D4684;
  --grade-cornerstone: #1B6232;
  --grade-strong:      #575900;
  --grade-solid:       #6E5100;
  --grade-decent:      #844612;
  --grade-wrong:       #8B3E3E;

  /* Semantic colors — light counterparts. Mirror :root in styles.css
     so var(--success-text) etc. switch with the theme. */
  --success-text:   #2B5F39;
  --success-bg: rgba(43, 95, 57, 0.18);
  --success-border: rgba(43, 95, 57, 0.45);
  --warning-text:   #6B5110;
  --warning-bg: rgba(107, 81, 16, 0.16);
  --warning-border: rgba(107, 81, 16, 0.40);
  --danger-text:    #854040;
  --danger-bg: rgba(133, 64, 64, 0.15);
  --danger-border: rgba(133, 64, 64, 0.40);
}

/* ⛔ NOT NEEDED ANY MORE, AND IT WAS FIGHTING THE FIX. The bar used to be a
   hardcoded plum, so light mode had to paint over it. The bar now tints from
   --bg-page itself in styles.css, which means it follows the theme on its own
   and this override only served to make it a different lilac from the page. */

/* table hover/zebra — sage-tint equivalent on lilac */
html[data-theme="light"] {
  --gold-tint:        rgba(40, 89, 63, 0.12);
  --gold-tint-strong: rgba(40, 89, 63, 0.20);
}

/* ─── Toggle button.
   Default = in the bar's right corner (.bar-tools), injected by theme.js.
   Fallback = fixed top-right when a page has no bar to anchor to. */
.theme-toggle {
  background: transparent;
  border: 0;
  color: var(--gold);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .55;
  transition: opacity .15s, background .15s, color .15s;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  opacity: 1;
  outline: none;
  background: rgba(0, 0, 0, .12);
}
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible {
  background: rgba(0, 0, 0, .08);
}
.theme-toggle i { font-size: 16px; }

/* In the bar: theme.js puts the switch in the bar's right corner (.bar-tools),
   left of "log in"; bar3.css and bar-sports.css style it there. */

/* Fallback when injected straight onto <body> (no topbar present). */
body > .theme-toggle {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 1000;
}

@media (max-width: 720px) {
  body > .theme-toggle { top: 8px; right: 8px; padding: 4px 6px; }
  .theme-toggle i { font-size: 15px; }
}