/* aiftbl.com day/night theme.
   Default (no data-theme attribute) = NIGHT — the original navy palette baked
   into every page's inline styles. data-theme="light" re-maps the shared CSS
   custom properties and patches the few spots that hardcode dark colors.
   Loaded AFTER each page's inline <style> so these overrides win. */

:root[data-theme="light"] {
  --navy:  #EEF2F9;
  --navy2: #FFFFFF;
  --navy3: #FFFFFF;
  --navy4: #F1F4FB;
  --navy5: #DDE5F3;
  --cyan:  #0083B8;
  --gold:  #B2730A;
  --red:   #D32F4D;
  --green: #0B9468;
  --purple:#6E4FC4;
  --white: #101729;   /* "ink" — most text uses var(--white) */
  --gray:  #5E6880;
  --gray-l:#414C66;
  --border: rgba(16, 35, 76, 0.16);
  --border2: rgba(16, 35, 76, 0.34);
}

/* Header/backdrop hardcodes a dark rgba in every page's inline CSS. */
:root[data-theme="light"] header {
  background: rgba(238, 242, 249, 0.92);
}
:root[data-theme="light"] .logo img {
  box-shadow: 0 0 14px rgba(0, 131, 184, 0.35);
}

/* Text that sits on top of imagery / dark overlays must stay white. */
:root[data-theme="light"] .poster-title { color: #FFFFFF; }
:root[data-theme="light"] .duration { color: #FFFFFF; }
:root[data-theme="light"] .play svg { fill: #0A0E1A; }

/* Branded dark bands keep the night palette inside, in both themes:
   re-scope the custom properties for everything within them. */
:root[data-theme="light"] .live-strip-inner,
:root[data-theme="light"] .ai-engine,
:root[data-theme="light"] .cta-band {
  --navy:  #0A0E1A;
  --navy2: #12182B;
  --navy3: #1A2240;
  --navy4: #243157;
  --navy5: #2F3E70;
  --cyan:  #00D4FF;
  --gold:  #F5A623;
  --red:   #E94560;
  --green: #10B981;
  --purple:#A78BFA;
  --white: #FFFFFF;
  --gray:  #8892A4;
  --gray-l:#B8C2D4;
  --border: rgba(0, 212, 255, 0.18);
  --border2: rgba(0, 212, 255, 0.35);
}

/* Match-poster edge fade on the predictions cards blends into the card. */
:root[data-theme="light"] .mc-poster::after {
  background: linear-gradient(90deg, rgba(255,255,255,0) 55%, rgba(255,255,255,0.55) 100%);
}

/* ------------------------------------------------------------------ */
/* Shared nav consistency — this sheet loads on every page after the   */
/* inline styles, so the header behaves identically site-wide.         */
/* ------------------------------------------------------------------ */
.nav a { white-space: nowrap; }
.nav a[aria-current="page"] {
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.08);
  border-color: var(--border);
  text-decoration: none;
}
/* 8 links need a little less air before the nav collapses at 860px. */
@media (max-width: 1180px) {
  .nav a { padding: 8px 9px; letter-spacing: 1.5px; font-size: 12px; }
}

/* ------------------------------------------------------------------ */
/* Theme toggle button (markup injected into every page header).       */
/* ------------------------------------------------------------------ */
.theme-toggle {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--gray-l);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.theme-toggle:hover {
  color: var(--cyan);
  border-color: var(--border2);
  background: rgba(0, 212, 255, 0.08);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
/* Night shows the sun (click to brighten); day shows the moon. */
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: block; }