/* Theme compatibility for the beginner-course banner and popup.
 * Loaded after article and popup CSS so the scoped overrides can safely beat
 * the site's legacy light-mode rules without changing markup or bot behavior.
 */

html[data-theme="light"] .beginner-course-banner {
  --course-accent: #075fa6;
  --course-border: #bfd5e6;
  --course-body: #34495e;
  --course-cta: #075fa6;
  --course-cta-hover: #064f8a;
  --course-focus: #075fa6;
  --course-note: #52677d;
  --course-surface: #f7fbff;
  --course-title: #102033;
  color-scheme: light;
}

html[data-theme="dark"] .beginner-course-banner {
  --course-accent: #79b8ff;
  --course-border: rgba(96, 118, 156, .52);
  --course-body: #d6deec;
  --course-cta: #075fa6;
  --course-cta-hover: #064f8a;
  --course-focus: #8ebcff;
  --course-note: #aeb9ca;
  --course-surface: #0d111a;
  --course-title: #f7f9ff;
  color-scheme: dark;
}

html[data-theme] .beginner-course-banner {
  background: var(--course-surface) !important;
  border-color: var(--course-border) !important;
  color: var(--course-title) !important;
}

html[data-theme] .beginner-course-banner__content {
  background: var(--course-surface) !important;
  color: var(--course-body) !important;
}

html[data-theme] .beginner-course-banner__eyebrow {
  color: var(--course-accent) !important;
}

html[data-theme] .beginner-course-banner__title {
  color: var(--course-title) !important;
}

html[data-theme] .beginner-course-banner__body {
  color: var(--course-body) !important;
}

html[data-theme] .beginner-course-banner__note {
  color: var(--course-note) !important;
}

html[data-theme] .beginner-course-banner__cta,
html[data-theme] .beginner-course-banner__cta:link,
html[data-theme] .beginner-course-banner__cta:visited {
  background: var(--course-cta) !important;
  color: #fff !important;
}

html[data-theme] .beginner-course-banner__cta span {
  color: inherit !important;
}

html[data-theme] .beginner-course-banner__cta:hover {
  background: var(--course-cta-hover) !important;
  color: #fff !important;
}

html[data-theme] .beginner-course-banner__cta:focus-visible {
  outline-color: var(--course-focus) !important;
}

/* Popup tokens share the page's persisted data-theme state. */
html[data-theme="light"] .rcp-root,
html[data-theme="light"] .rcp-dialog {
  --course-popup-accent: #075fa6;
  --course-popup-border: rgba(7, 95, 166, .25);
  --course-popup-close: #52677d;
  --course-popup-ink: #102033;
  --course-popup-muted: #42566b;
  --course-popup-soft: #f1f8fc;
  --course-popup-surface: #fff;
  color-scheme: light;
}

html[data-theme="dark"] .rcp-root,
html[data-theme="dark"] .rcp-dialog {
  --course-popup-accent: #79b8ff;
  --course-popup-border: rgba(148, 163, 184, .36);
  --course-popup-close: #cbd5e1;
  --course-popup-ink: #f8fafc;
  --course-popup-muted: #cbd5e1;
  --course-popup-soft: #1e293b;
  --course-popup-surface: #111827;
  color-scheme: dark;
}

html[data-theme] .rcp-root,
html[data-theme] .rcp-dialog {
  color: var(--course-popup-ink) !important;
}

html[data-theme] .rcp-teaser,
html[data-theme] .rcp-dialog__card {
  background: var(--course-popup-surface) !important;
  border-color: var(--course-popup-border) !important;
  color: var(--course-popup-ink) !important;
}

html[data-theme] .rcp-teaser__open,
html[data-theme] .rcp-teaser__open:link,
html[data-theme] .rcp-teaser__open:visited,
html[data-theme] .rcp-teaser__open strong,
html[data-theme] .rcp-dialog__content h2 {
  color: var(--course-popup-ink) !important;
}

html[data-theme] .rcp-teaser__eyebrow,
html[data-theme] .rcp-dialog__eyebrow,
html[data-theme] .rcp-teaser__open > span:last-child,
html[data-theme] .rcp-dialog__content li::before {
  color: var(--course-popup-accent) !important;
}

html[data-theme] .rcp-dialog__content p,
html[data-theme] .rcp-dialog__content li,
html[data-theme] .rcp-dialog__note {
  color: var(--course-popup-muted) !important;
}

html[data-theme] .rcp-teaser__dismiss,
html[data-theme] .rcp-dialog__close {
  color: var(--course-popup-close) !important;
}

html[data-theme] .rcp-teaser__open:hover,
html[data-theme] .rcp-teaser__dismiss:hover,
html[data-theme] .rcp-dialog__close:hover {
  background: var(--course-popup-soft) !important;
  color: var(--course-popup-ink) !important;
}

html[data-theme] .rcp-dialog__cta,
html[data-theme] .rcp-dialog__cta:link,
html[data-theme] .rcp-dialog__cta:visited {
  background: #075fa6 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme] .rcp-dialog__cta * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme] .rcp-dialog__cta:hover {
  background: #064f8a !important;
  color: #fff !important;
}

html[data-theme="light"] .rcp-dialog__media {
  background: linear-gradient(145deg, #e8f7ff, #b9e8ff) !important;
}

html[data-theme="dark"] .rcp-dialog__media {
  background: linear-gradient(145deg, #17324a, #0f2235) !important;
}

html[data-theme="dark"] .rcp-dialog__close {
  background: rgba(17, 24, 39, .96) !important;
}

html[data-theme] .rcp-dialog::backdrop {
  background: rgba(5, 18, 31, .76) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .beginner-course-banner__cta,
  html[data-theme] .rcp-teaser,
  html[data-theme] .rcp-dialog__cta {
    transition: none !important;
  }
}