/* Light-mode readability contract. Load after the component styles.
   Scope every rule to light/default only: dark mode, artwork, syntax themes,
   fixed dark image viewers, motion and reader preferences remain independent.
   Supporting text is an opaque ink, never a low-opacity primary color. */
:root:not([data-theme="dark"]) {
  --ink-1: #1a1613;
  --ink-2: #302a25;
  --ink-3: #4f4740;
  --ink-4: #62584f;
  --text-body: var(--ink-2);
  --text-heading: var(--ink-1);
  --text-muted: var(--ink-3);
  --text-faint: var(--ink-4);
  --text-accent: #9a3412;
  --link: #9a3412;
  --link-hover: #7c280d;
  --text-on-accent: #211207;
  --nav-ink: var(--ink-1);
  --nav-muted: var(--ink-3);
  --nav-accent: var(--text-accent);
  --nav-control-line: #897d72;
  --cc-ink: var(--ink-1);
  --cc-muted: var(--ink-3);
  --cc-accent: var(--text-accent);
}

/* Component-owned palettes must opt in too; changing the root alone does
   not reach the lesson, music or teaching-lab tokens declared on elements. */
:root:not([data-theme="dark"]) :is(.reader-page, .reader-code-dialog, .reader-copy-fallback) {
  --reader-muted: #4c535e;
  --reader-icon: #4c535e;
  --reader-control-border: #7d8793;
}
:root:not([data-theme="dark"]) .music-room {
  --music-muted: var(--ink-3);
  --music-accent: var(--text-accent);
}
:root:not([data-theme="dark"]) .motion-lab {
  --lab-muted: #514a44;
  --lab-orange: #9a3412;
  --lab-blue: #146778;
}

/* Explanatory prose deserves body ink, not metadata ink. Keep the existing
   responsive sizes, layout and font families; strengthen only the hierarchy. */
:root:not([data-theme="dark"]) :is(
  .home-hero__intro, .home-path__description, .home-lesson__description,
  .home-sectionhead > p, .home-sound__copy > p:last-child,
  .path-description, .path-section-title > p, .path-lesson__copy > span
) { color: var(--ink-2); }
:root:not([data-theme="dark"]) .home-hero__intro { font-weight: 450; }
:root:not([data-theme="dark"]) :is(
  .home-hero__facts, .home-desk__context, .home-desk__progress,
  .home-path__footer, .home-resultsbar, .home-footer, .home-lesson__meta
) { font-weight: 500; }
:root:not([data-theme="dark"]) :is(.home-kicker, .home-curriculum__title) {
  /* Space Mono ships 400/700; 500 silently used the thinner 400 face. */
  font-weight: 700;
}

/* Preserve component-specific hover colors. Only replace the unsafe generic
   orange hover for ordinary links, then explicitly protect filled actions. */
:where(:root:not([data-theme="dark"])) a:hover { color: var(--link-hover); }
:root:not([data-theme="dark"]) .home-action--primary:is(:link, :visited, :hover, :focus-visible, :active) {
  color: var(--text-on-accent);
  text-decoration: none;
}
:root:not([data-theme="dark"]) .home-action--quiet:is(:hover, :focus-visible) {
  color: var(--ink-1);
}
:root:not([data-theme="dark"]) :is(.btn--primary, .player__btn--primary, .tag--selected, .tag[aria-pressed="true"]) {
  color: var(--text-on-accent);
}
:root:not([data-theme="dark"]) :is(.btn--primary, .player__btn--primary):active {
  /* The darker pressed fill needs a different paired ink. */
  color: #ffffff;
}
:root:not([data-theme="dark"]) .badge--orange { color: var(--text-on-accent); }
/* Catalogue actions use the same flat orange/ink pair as workbook actions. */
:root:not([data-theme="dark"]) .catalog-page .btn--primary:active { color: var(--study-action-ink); }
:root:not([data-theme="dark"]) .badge--haze { background: var(--haze-lo); }
:root:not([data-theme="dark"]) .badge--moss { background: var(--moss-lo); }
:root:not([data-theme="dark"]) .finish[data-done="true"] .finish__box {
  background: var(--moss-lo);
}
:root:not([data-theme="dark"]) .track__art--soundcloud { color: var(--text-on-accent); }

/* Small explanations cannot be both muted and faded. Scope this narrowly:
   do not undo visibility/transition opacity, skeletons or disabled controls. */
:root:not([data-theme="dark"]) :is(
  .motion-preference small, .motion-lab-link small, .lab-source,
  .motion-lab-disclosure .lab-disclosure-hint
) { color: var(--text-muted); opacity: 1; }
:root:not([data-theme="dark"]) .motion-lab-link > span { color: var(--text-accent); }
:root:not([data-theme="dark"]) .reader-copy[data-state="copied"] { color: var(--reader-success, #216442); }
:root:not([data-theme="dark"]) .home-filter--unread:not([aria-pressed="true"]) svg {
  opacity: 1;
  color: var(--ink-3);
}

:root:not([data-theme="dark"]) :is(.home-path, .home-lesson):is(:hover, :focus-visible) {
  color: var(--ink-1);
}

/* Error explanations remain readable even when the station cannot play. */
:root:not([data-theme="dark"]) .music-room .track[data-dead="true"] { opacity: 1; }
:root:not([data-theme="dark"]) .music-room .track[data-dead="true"] .track__tag {
  color: #a12d1c;
}
:root:not([data-theme="dark"]) :is(.home-search input, .nav-search__input, .nav-filter input, .tuner__input)::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
:root:not([data-theme="dark"]) .cc-button--primary {
  background: #9a3412;
  border-color: #9a3412;
  color: #ffffff;
}
@media (hover: hover) {
  :root:not([data-theme="dark"]) .cc-button--primary:not(:disabled):hover {
    background: #7c280d;
    border-color: #7c280d;
    color: #ffffff;
    filter: none;
  }
}