/* =========================================================
   CaveCode — Light mode page surfaces (not dark insets)
   Problem: --accent-surface stays dark in light mode, so
   available path cards / chrome get black text on dark green.
   ========================================================= */

html[data-mode="light"] {
  /* Page text stays dark */
  /* Accent surfaces must become LIGHT tints of the accent */
  --accent-surface: color-mix(in srgb, var(--accent, #73e59b) 16%, #ffffff);
  --accent-border: color-mix(in srgb, var(--accent, #73e59b) 40%, #c7d0d7);
  --accent-soft: color-mix(in srgb, var(--accent, #73e59b) 55%, #0a2018);

  /* Keep true dark wells for code/terminals only */
  --code-bg: #111820;
  --dark-panel-bg: var(--code-bg);
  --dark-panel-text: #eef4f8;
  --dark-panel-muted: #aab7c4;
  --dark-panel-strong: #ffffff;
}

/* Path cards: always use page text on page surfaces */
html[data-mode="light"] .path-card,
html[data-mode="light"] .path-card.available,
html[data-mode="light"] .path-card.locked {
  color: var(--text) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

html[data-mode="light"] .path-card.available {
  background: linear-gradient(
    145deg,
    var(--accent-surface),
    var(--surface) 62%
  ) !important;
  border-color: var(--accent-border) !important;
}

html[data-mode="light"] .path-card h3,
html[data-mode="light"] .path-card p,
html[data-mode="light"] .path-card .skill-tags span,
html[data-mode="light"] .path-card .status,
html[data-mode="light"] .static-language-panel,
html[data-mode="light"] .static-language-panel__title,
html[data-mode="light"] .static-language-panel__item,
html[data-mode="light"] .static-language-panel__examples {
  color: var(--text) !important;
}

html[data-mode="light"] .path-card p,
html[data-mode="light"] .path-card .skill-tags span,
html[data-mode="light"] .static-language-panel__item span,
html[data-mode="light"] .static-language-panel__examples {
  color: var(--text-muted) !important;
}

html[data-mode="light"] .path-section-label {
  color: var(--text) !important;
}

/* Course shells: main lesson chrome uses page tokens in light mode */
html[data-mode="light"] .jsforge-academy,
html[data-mode="light"] .jsforge-lesson-main,
html[data-mode="light"] .jsforge-stage-card,
html[data-mode="light"] [class*="-academy"],
html[data-mode="light"] [class*="-lesson-main"],
html[data-mode="light"] [class*="-stage-card"] {
  color: var(--text);
}

html[data-mode="light"] .jsforge-lesson-button,
html[data-mode="light"] [class*="-lesson-button"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

html[data-mode="light"] .jsforge-lesson-button small,
html[data-mode="light"] [class*="-lesson-button"] small {
  color: var(--text-muted) !important;
}

html[data-mode="light"] .jsforge-lesson-button.active,
html[data-mode="light"] [class*="-lesson-button"].active {
  background: var(--accent-surface) !important;
  border-color: var(--accent-border) !important;
  color: var(--text) !important;
}

/* Reference examples + terminals STAY dark (readable light text) */
html[data-mode="light"] .jsforge-reference-example,
html[data-mode="light"] .jsforge-terminal,
html[data-mode="light"] [class*="-reference-example"],
html[data-mode="light"] [class*="-terminal"],
html[data-mode="light"] .course-resume {
  background: var(--dark-panel-bg) !important;
  color: var(--dark-panel-text) !important;
}

html[data-mode="light"] .course-resume strong {
  color: var(--dark-panel-strong) !important;
}

html[data-mode="light"] .course-resume p,
html[data-mode="light"] .course-resume small,
html[data-mode="light"] .course-resume .resume-label {
  color: var(--dark-panel-muted) !important;
}

/* Leaderboard / profile: dark wells */
html[data-mode="light"] .leaderboard-table,
html[data-mode="light"] .leaderboard-row,
html[data-mode="light"] .profile-preview,
html[data-mode="light"] .emblem-choice {
  background: var(--dark-panel-bg) !important;
  color: var(--dark-panel-text) !important;
}

html[data-mode="light"] .leaderboard-row strong,
html[data-mode="light"] .profile-preview strong,
html[data-mode="light"] .emblem-choice strong {
  color: var(--dark-panel-strong) !important;
}

html[data-mode="light"] .leaderboard-row .level-colored-name {
  color: var(--dark-panel-text) !important;
}