/* ============================================================
   Centreforce — Light mode (MVP, Option B override layer)
   Toggled by `html.light-mode`. Strategy: keep the "chrome"
   (nav, hero banner, footer, audio player) dark — they're a
   deliberate dark frame — and flip the CONTENT to light.
   Fully removable: delete this file + its <link> + the toggle.
   Nothing here applies unless html.light-mode is set.
   ============================================================ */

/* ---- Toggle button (lives in the dark nav, so styled light always) ---- */
.cf-theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cf-theme-toggle:hover {
  border-color: var(--cf-primary);
  color: var(--cf-primary);
}
.cf-icon-moon { display: none; }
html.light-mode .cf-icon-sun { display: none; }
html.light-mode .cf-icon-moon { display: inline; }

/* =================== LIGHT MODE OVERRIDES =================== */

html.light-mode {
  /* Flip the semantic tokens — anything using var(--cf-*) follows */
  --cf-bg: #eef1f5;
  --cf-bg-muted: #e6eaef;
  --cf-surface: #ffffff;
  --cf-surface-strong: #f3f5f8;
  --cf-panel: #ffffff;
  --cf-panel-alt: #eef1f5;
  --cf-text: #0e1620;
  --cf-text-soft: #46535f;
  --cf-text-muted: #6b7886;
  --cf-border: #dde2e8;
  --cf-border-strong: #c8cfd6;
  --cf-shadow-sm: 0 10px 20px rgba(0, 0, 0, 0.06);
  --cf-shadow: 0 22px 50px rgba(0, 0, 0, 0.10);
  color-scheme: light;
}

/* Page background (body has a hardcoded dark gradient) */
html.light-mode body {
  background:
    radial-gradient(circle at top right, rgba(0, 202, 231, 0.07), transparent 26%),
    radial-gradient(circle at 12% 18%, rgba(110, 246, 212, 0.07), transparent 30%),
    linear-gradient(180deg, #f7f9fc 0%, #eef1f5 100%) !important;
  color: var(--cf-text) !important;
}

/* ---- Content cards / surfaces ---- */
html.light-mode .listen-card,
html.light-mode .hot-pick-card,
html.light-mode .cf-show-grid .listen-card,
html.light-mode .show-item,
html.light-mode .cf-event-card,
html.light-mode .cf-merch-card,
html.light-mode .video-tile,
html.light-mode .cf-presenter-page .presenter-box,
html.light-mode .cf-listen-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}
html.light-mode .schedule-container .show-item:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

/* ---- Text that was hardcoded white ---- */
html.light-mode .show-name,
html.light-mode .show-presenter,
html.light-mode .show-presenter a,
html.light-mode .cf-homepage .show-name,
html.light-mode .cf-homepage .show-presenter,
html.light-mode .section-header h2,
html.light-mode .cf-homepage .section-header h2,
html.light-mode .hot-picks-heading,
html.light-mode .show-count-title,
html.light-mode .cf-card-title,
html.light-mode .sticky-heading {
  color: #0e1620 !important;
}
html.light-mode .show-date,
html.light-mode .cf-homepage .show-date,
html.light-mode .cf-card-meta { color: #6b7886 !important; }

/* Section-header underline (was solid #fff) */
html.light-mode .cf-homepage .section-header h2,
html.light-mode .cf-homepage .hot-picks-heading {
  border-bottom-color: rgba(0, 0, 0, 0.16) !important;
}

/* "See all" pill outline */
html.light-mode .cf-homepage .see-all {
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: #0e1620 !important;
}

/* Genre tags / pills */
html.light-mode .genre-tag,
html.light-mode .genre-pill,
html.light-mode .cf-homepage .genre-pill {
  background: #eef1f5 !important;
  color: #0e1620 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ---- Search + genre filter inputs/buttons ---- */
html.light-mode #listenSearch,
html.light-mode #presenterSearch {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
  color: #0e1620 !important;
}
html.light-mode #listenSearch::placeholder,
html.light-mode #presenterSearch::placeholder { color: rgba(0, 0, 0, 0.4) !important; }
html.light-mode .genre-filter button {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
  color: #0e1620 !important;
}
/* active genre / neon-filled controls keep the neon */
html.light-mode .genre-filter button.active {
  background: linear-gradient(135deg, var(--cf-primary), var(--cf-secondary)) !important;
  color: #04232a !important;
  border-color: transparent !important;
}

/* ---- Inline-style content pages (contact / book-dj / advertise / ad-enquiry) ---- */
html.light-mode .cf-contact,
html.light-mode .cf-book,
html.light-mode .cf-ad,
html.light-mode .cf-enq { color: #0e1620; }
html.light-mode .cf-contact-intro,
html.light-mode .cf-contact-note,
html.light-mode .cf-book-intro,
html.light-mode .cf-ad p,
html.light-mode .cf-enq-intro p { color: #46535f; }
html.light-mode .cf-contact-block h3,
html.light-mode .cf-field label { color: #0e1620; }
html.light-mode .cf-contact-form-card,
html.light-mode .cf-book-card,
html.light-mode .cf-enq-card,
html.light-mode .cf-ad-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
html.light-mode .cf-field input,
html.light-mode .cf-field select,
html.light-mode .cf-field textarea {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  color: #0e1620;
}
html.light-mode .cf-field input::placeholder,
html.light-mode .cf-field textarea::placeholder { color: rgba(0, 0, 0, 0.4); }
html.light-mode .cf-ad-stat {
  background: linear-gradient(180deg, rgba(0, 202, 231, 0.08), rgba(0, 0, 0, 0.02));
  border-color: rgba(0, 202, 231, 0.3);
}
html.light-mode .cf-ad-list li { color: rgba(0, 0, 0, 0.78); border-bottom-color: rgba(0, 0, 0, 0.08); }

/* Prose pages (privacy / terms) generally use var(--cf-text*) so they follow the tokens. */

/* ===================== CHROME → LIGHT ===================== */

/* ---- Top nav ---- */
html.light-mode .cf-shell .sticky-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10) !important;
}
html.light-mode .cf-shell .sticky-nav.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 202, 231, 0.28) !important;
}
html.light-mode .cf-shell .nav-link { color: #0e1620 !important; }
html.light-mode .cf-shell .nav-link:hover,
html.light-mode .cf-shell .nav-link:focus {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0e1620 !important;
}
/* active pill + live pill keep their neon gradient (dark text already) */

/* White logos → dark (nav + footer) */
html.light-mode .cf-brand-mark,
html.light-mode .cf-footer-logo { filter: invert(1); }

/* mobile hamburger + favourites heart + theme toggle on the light nav */
html.light-mode .menu-icon-stroke { stroke: #0e1620 !important; }
html.light-mode #favourites-heart-desktop,
html.light-mode .heart-icon-container i { color: #0e1620 !important; }
html.light-mode .cf-theme-toggle { color: #0e1620; border-color: rgba(0, 0, 0, 0.2); }
html.light-mode .cf-theme-toggle:hover { color: var(--cf-primary); border-color: var(--cf-primary); }

/* ---- Footer ---- */
html.light-mode .cf-footer {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html.light-mode .cf-footer-copy,
html.light-mode .cf-footer-avail,
html.light-mode .cf-footer-label,
html.light-mode .cf-footer-mini-label { color: #46535f !important; }
html.light-mode .footer-link { color: #0e1620 !important; }
html.light-mode .footer-link:hover { color: var(--cf-primary) !important; }

/* ===================== SCHEDULE PAGE BODY ===================== */
/* show cards already flip white above; fix the white-on-white text */
html.light-mode .schedule-day h2 { color: #0e1620 !important; }
html.light-mode .schedule-container .show-time,
html.light-mode .schedule-container .show-name,
html.light-mode .schedule-container .presenter-name,
html.light-mode .schedule-container .show-details,
html.light-mode .schedule-container .show-details strong { color: #0e1620 !important; }

/* day picker — inactive days readable; active day keeps neon */
html.light-mode .day-nav button,
html.light-mode .day-nav-btn,
html.light-mode #page-content[data-page="show-schedule"] .day-label,
html.light-mode .day-nav .day-num { color: #46535f !important; }
html.light-mode .day-nav button.active,
html.light-mode .day-nav button.active .day-label,
html.light-mode .day-nav button.active .day-num { color: #04232a !important; }

/* the live row stays neon (dark text on it already) */
html.light-mode .schedule-container .live-show .show-name,
html.light-mode .schedule-container .live-show .presenter-name,
html.light-mode .schedule-container .live-show .show-time { color: #04232a !important; }

/* ===================== ARTIST PROFILE PAGE ===================== */
/* Grid card names sit on a dark photo scrim → they stay WHITE (handled by not
   overriding .presenter-name). These are the PROFILE page's own text. */
html.light-mode .cf-presenter-name,
html.light-mode .cf-presenter-section-title { color: #0e1620 !important; }
html.light-mode .cf-presenter-bio { color: #46535f !important; }
html.light-mode .cf-presenter-socials a,
html.light-mode .cf-presenter-socials i { color: #0e1620 !important; }
/* (Past Shows / Videos cards use var(--cf-text-soft), so they follow the tokens.) */