/* Shared monochrome mode for every public route except the fixed dark homepage. */

html[data-theme='light'] body:not(.home-editorial) {
  background: #fff;
  color: #454545;
}

html[data-theme='dark'] body:not(.home-editorial) {
  --bg: #000;
  --surface: #0a0a0a;
  --elevated: #111;
  --elevated-2: #171717;
  --elevated-3: #1c1c1c;
  --text-primary: #f4f4f2;
  --text-secondary: #aaa;
  --text-muted: #858585;
  --text-faint: #6e6e6e;
  background: #000;
  color: var(--text-secondary);
}

html[data-theme='light'] body:not(.home-editorial) .btn-primary,
html[data-theme='light'] body:not(.home-editorial) .btn-brand {
  color: #fff;
  background: #111;
  box-shadow: none;
}

html[data-theme='light'] body:not(.home-editorial) .btn-primary:hover,
html[data-theme='light'] body:not(.home-editorial) .btn-brand:hover {
  color: #fff;
  background: #000;
  box-shadow: none;
}

html[data-theme='dark'] body:not(.home-editorial) .btn-primary,
html[data-theme='dark'] body:not(.home-editorial) .btn-brand {
  color: #090909;
  background: #f4f4f2;
  box-shadow: none;
}

html[data-theme='dark'] body:not(.home-editorial) .btn-primary:hover,
html[data-theme='dark'] body:not(.home-editorial) .btn-brand:hover {
  color: #000;
  background: #fff;
  box-shadow: none;
}

html[data-theme='light'] body:not(.home-editorial) .nav .theme-toggle {
  display: flex !important;
  color: #111;
}

html[data-theme='light']
  body:not(.home-editorial)
  .nav
  .nav-actions
  a.btn.btn-secondary.nav-reader-login {
  color: #111 !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.24) !important;
}

html[data-theme='light']
  body:not(.home-editorial)
  .nav
  .nav-actions
  a.btn.btn-secondary.nav-reader-login:hover {
  color: #111 !important;
  background: #f2f2ef !important;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.4) !important;
}

html[data-theme='dark'] body:not(.home-editorial) .nav .theme-toggle {
  display: flex !important;
  color: #f4f4f2;
}

html[data-theme='light'] body:not(.home-editorial) :focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

html[data-theme='dark'] body:not(.home-editorial) :focus-visible {
  outline: 2px solid #f4f4f2;
  outline-offset: 3px;
}

/* Podcast ships with a deliberately dark hero. Give its white mode an equally
   considered editorial canvas instead of leaving white copy on a dark surface. */
html[data-theme='light'] body.podcast-page .podcast-hero.section,
html[data-theme='light'] body.podcast-page .podcast-audience.section,
html[data-theme='light'] body.podcast-page .episodes-section.section,
html[data-theme='light'] body.podcast-page .podcast-latest {
  color: #454545;
  background: #fff !important;
}

html[data-theme='light'] body.podcast-page .podcast-hero :is(h1, h2, h3),
html[data-theme='light'] body.podcast-page .podcast-audience :is(h1, h2, h3),
html[data-theme='light'] body.podcast-page .episodes-section :is(h1, h2, h3),
html[data-theme='light'] body.podcast-page .podcast-latest :is(h1, h2, h3) {
  color: #111 !important;
}

html[data-theme='light'] body.podcast-page .podcast-hero :is(.podcast-hero-sub, .podcast-hero-badge, .podcast-platform-link) {
  color: #626262 !important;
}

html[data-theme='light'] body.podcast-page .podcast-hero .btn-secondary {
  color: #111;
  background: #fff;
  box-shadow: inset 0 0 0 1px #111;
}

html[data-theme='light'] body.podcast-page .podcast-hero .btn-secondary:hover {
  color: #111;
  background: #f1f1ef;
  box-shadow: inset 0 0 0 1px #111;
}

html[data-theme='light'] body.podcast-page .podcast-guest-stage::before {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.09), transparent 70%);
}

html[data-theme='light'] body.podcast-page .podcast-guest-orbit {
  border-color: rgba(0, 0, 0, 0.17);
}

html[data-theme='light'] body.podcast-page .podcast-guest-orbit--two {
  border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme='light'] body.podcast-page .podcast-proof.section,
html[data-theme='light'] body.podcast-page .podcast-footer {
  color: #454545;
  background: #fff !important;
}

html[data-theme='light'] body.podcast-page .podcast-proof :is(h2, h3),
html[data-theme='light'] body.podcast-page .podcast-footer :is(h2, h3, h4, strong, a) {
  color: #111 !important;
}

html[data-theme='light'] body.podcast-page .podcast-footer > .container::before {
  background: rgba(0, 0, 0, 0.12);
}