/* ==========================================================================
   LIGHT THEME — global chrome (nav, ticker, side rail, menus).
   html.si-light is set by the nav toggle (base.html head script) and
   persisted in localStorage. Rules are scoped to body.si-themed while the
   rollout runs — pages opt in by adding si-themed to their body class.
   Page-content overrides live with their pages (explore-front.css).
   Tokens: canvas #eceef1 · ink #101418 · ink-2 rgba(16,20,24,.72) ·
   ink-3 rgba(16,20,24,.65) · hairline rgba(16,20,24,.18) · frost
   rgba(244,245,247,.75).
   ========================================================================== */

html.si-light body.si-themed { background: #eceef1; color: #101418; }

/* ---- top nav ---------------------------------------------------------------- */
html.si-light body.si-themed .top-nav-bar { border-bottom-color: rgba(16, 20, 24, 0.3); }
html.si-light body.si-themed.nav-scrolled .top-nav-bar {
  background: rgba(236, 238, 241, 0.75);
}
html.si-light body.si-themed .nav-brand-text { color: #101418; }
html.si-light body.si-themed .nav-global-search-input {
  border-color: rgba(16, 20, 24, 0.3) !important;
  color: #101418;
}
html.si-light body.si-themed .nav-global-search-input::placeholder { color: rgba(16, 20, 24, 0.65); }
html.si-light body.si-themed .nav-global-search-input:hover {
  background: rgba(16, 20, 24, 0.03) !important;
  border-color: rgba(16, 20, 24, 0.38) !important;
}
html.si-light body.si-themed .nav-global-search-results {
  background: #fff !important;
  border: 1px solid rgba(16, 20, 24, 0.3) !important;
  color: #101418;
}
html.si-light body.si-themed .nav-auth-login {
  color: rgba(16, 20, 24, 0.82);
  background: rgba(16, 20, 24, 0.04);
  border-color: rgba(16, 20, 24, 0.3);
}
html.si-light body.si-themed .nav-auth-login:hover {
  color: #101418;
  background: rgba(16, 20, 24, 0.08);
}
html.si-light body.si-themed .nav-auth-signup {
  color: #fff;
  background: #101418;
  border-color: #101418;
}
html.si-light body.si-themed .nav-auth-signup:hover { background: #000; }
html.si-light body.si-themed .nav-docs-btn,
html.si-light body.si-themed button.nav-docs-btn,
html.si-light body.si-themed .nav-create-btn,
html.si-light body.si-themed .nav-account-btn {
  color: rgba(16, 20, 24, 0.78) !important;
}
html.si-light body.si-themed .nav-docs-btn:hover,
html.si-light body.si-themed button.nav-docs-btn:hover,
html.si-light body.si-themed .nav-create-btn:hover,
html.si-light body.si-themed .nav-account-btn:hover {
  color: #101418 !important;
  background: rgba(16, 20, 24, 0.06) !important;
}
html.si-light body.si-themed .nav-dropdown-menu {
  background: #fff !important;
  border-color: rgba(16, 20, 24, 0.3) !important;
  color: #101418;
}

/* ---- ticker strip ------------------------------------------------------------ */
html.si-light body.si-themed .tk-ticker {
  border-bottom-color: rgba(16, 20, 24, 0.3);
  background: rgba(236, 238, 241, 0.75);
}
html.si-light body.si-themed .tk-label {
  color: rgba(16, 20, 24, 0.8);
  border-right-color: rgba(16, 20, 24, 0.3);
}
html.si-light body.si-themed .tk-name { color: rgba(16, 20, 24, 0.92); }
html.si-light body.si-themed .tk-val { color: rgba(16, 20, 24, 0.78); }
html.si-light body.si-themed .tk-val.up { color: #16a34a; }
html.si-light body.si-themed .tk-val.down { color: #dc2626; }
html.si-light body.si-themed .tk-sep { color: rgba(16, 20, 24, 0.6); }
html.si-light body.si-themed .tk-sk-item { background: rgba(16, 20, 24, 0.08); }

/* ---- side rail ---------------------------------------------------------------- */
html.si-light body.si-themed .site-rail::after { background: rgba(16, 20, 24, 0.3); }
html.si-light body.si-themed .site-rail-btn { color: rgba(16, 20, 24, 0.75); }
html.si-light body.si-themed .site-rail-btn:hover { color: rgba(16, 20, 24, 0.92); }
html.si-light body.si-themed .site-rail-btn:hover .site-rail-ico { background: rgba(16, 20, 24, 0.05); }
html.si-light body.si-themed.rail-explore .site-rail-btn[data-rail="explore"],
html.si-light body.si-themed.rail-ranks .site-rail-btn[data-rail="ranks"],
html.si-light body.si-themed.rail-stats .site-rail-btn[data-rail="stats"],
html.si-light body.si-themed.rail-news .site-rail-btn[data-rail="news"],
html.si-light body.si-themed.rail-discuss .site-rail-btn[data-rail="discuss"],
html.si-light body.si-themed.rail-content .site-rail-btn[data-rail="content"],
html.si-light body.si-themed.rail-about .site-rail-btn[data-rail="about"] {
  color: #101418;
}
html.si-light body.si-themed .site-rail-btn.is-active .site-rail-ico,
html.si-light body.si-themed.rail-explore .site-rail-btn[data-rail="explore"] .site-rail-ico {
  border-color: rgba(16, 20, 24, 0.3);
  background: rgba(16, 20, 24, 0.05);
}

/* Solar-storm ambient canvas fights a light canvas — hide it. */
html.si-light body.si-themed .global-ambient-container { display: none; }

/* ---- global search results (light) -------------------------------------------
   The panel is white; its contents were still wearing dark-theme text. Team
   logo chips lose their slate background per design — note the DB stores
   ESPN's dark-variant marks, so all-white logos will read faint here. */
html.si-light body.si-themed .nav-global-search-results .search-result-name { color: #101418; }
html.si-light body.si-themed .nav-global-search-results .search-result-sub,
html.si-light body.si-themed .nav-global-search-results .search-result-detail { color: rgba(16, 20, 24, 0.78); }
html.si-light body.si-themed .nav-global-search-results .search-result-item:hover { background: rgba(16, 20, 24, 0.05); }
html.si-light body.si-themed .nav-global-search-results .search-result-item.active {
  background: rgba(16, 20, 24, 0.07);
  outline-color: rgba(16, 20, 24, 0.3);
}
html.si-light body.si-themed .nav-global-search-results .search-result-preview,
html.si-light body.si-themed .nav-global-search-results .search-result-preview-placeholder {
  background: rgba(16, 20, 24, 0.05);
  color: rgba(16, 20, 24, 0.75);
}
html.si-light body.si-themed .nav-global-search-results img.search-result-preview--team,
html.si-light body.si-themed .nav-global-search-results .search-result-preview--team {
  background: transparent;
  border: 0;
}
html.si-light body.si-themed .nav-global-search-results .search-tab { color: rgba(16, 20, 24, 0.78); }
html.si-light body.si-themed .nav-global-search-results .search-tab.active { color: #101418; }

/* ---- footer -------------------------------------------------------------------- */
html.si-light body.si-themed .site-footer {
  background: #eceef1;   /* canvas — the hairline is the separator */
  border-top-color: rgba(16, 20, 24, 0.3);
}
html.si-light body.si-themed .footer-brand-mark { color: #101418; }
html.si-light body.si-themed .footer-tagline { color: rgba(16, 20, 24, 0.78); }
html.si-light body.si-themed .footer-social-chip {
  border-color: rgba(16, 20, 24, 0.4);
  color: rgba(16, 20, 24, 0.85);
}
html.si-light body.si-themed .footer-social-chip:hover {
  border-color: rgba(16, 20, 24, 0.72);
  color: #101418;
}
html.si-light body.si-themed .footer-heading { color: rgba(16, 20, 24, 0.75); }
html.si-light body.si-themed .footer-links a { color: rgba(16, 20, 24, 0.78); }
html.si-light body.si-themed .footer-links a:hover { color: #101418; }
html.si-light body.si-themed .footer-bottom { border-top-color: rgba(16, 20, 24, 0.28); }
html.si-light body.si-themed .footer-copyright,
html.si-light body.si-themed .footer-disclaimer { color: rgba(16, 20, 24, 0.65); }