:root,
html[data-bc-appearance="dark"] {
  --bc-bg: #080b10;
  --bc-panel: #111720;
  --bc-surface: #0d151e;
  --bc-raised: #17222d;
  --bc-text: #f4f6fb;
  --bc-muted: #a9b9cb;
  --bc-border: #344454;
  --bc-field: #101b27;
  --bc-focus: #4ae1f2;
  --bc-cyan: #4ae1f2;
  --bc-magenta: #ed53da;
  color-scheme: dark;
}

html[data-bc-appearance="light"] {
  --bc-bg: #f5f8fc;
  --bc-panel: #ffffff;
  --bc-surface: #eaf0f7;
  --bc-raised: #dce8f2;
  --bc-text: #152434;
  --bc-muted: #475e72;
  --bc-border: #b7c9d7;
  --bc-field: #ffffff;
  --bc-focus: #006b87;
  --bc-cyan: #006d86;
  --bc-magenta: #a51c91;
  color-scheme: light;
}

.bc-appearance-toggle {
  border: 1px solid var(--bc-border);
  border-radius: 999px;
  background: var(--bc-raised);
  color: var(--bc-text);
  min-height: 36px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.bc-appearance-toggle:hover { border-color: var(--bc-cyan); }
.bc-appearance-toggle:focus-visible { outline: 2px solid var(--bc-focus); outline-offset: 3px; }
.bc-nav { gap: clamp(12px, 1.5vw, 25px); }
@media (max-width: 920px) { .bc-appearance-toggle { width: 100%; margin-block: 8px; } }
@media (max-width: 920px) {
  html[data-bc-appearance="light"] .bc-nav.is-open { background: #f7faff; border-color: var(--bc-border); box-shadow: 0 18px 40px #21426020; }
  html[data-bc-appearance="light"] .bc-nav.is-open > a:not(.bc-button) { color: var(--bc-text); }
  html[data-bc-appearance="light"] .bc-nav.is-open > a:not(.bc-button):hover { color: var(--bc-cyan); }
}

html[data-bc-appearance="light"] body,
html[data-bc-appearance="light"] .bc-page-body { background: var(--bc-bg); color: var(--bc-text); }
html[data-bc-appearance="light"] p,
html[data-bc-appearance="light"] .bc-prose li { color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-header { background: #f5f8fcee; border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-nav { color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-nav>a:hover,
html[data-bc-appearance="light"] .bc-nav>a[aria-current] { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-menu-toggle>span:not(.screen-reader-text) { background: var(--bc-text); }
html[data-bc-appearance="light"] .bc-footer { background: #e8f0f7; color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-footer-top>div>a,
html[data-bc-appearance="light"] .bc-footer-bottom { color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-footer-bottom { border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-hero h1>span { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-principles { background: var(--bc-surface); }
html[data-bc-appearance="light"] .bc-principles span,
html[data-bc-appearance="light"] .bc-lab-caption,
html[data-bc-appearance="light"] .bc-lab-caption a { color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-lab,
html[data-bc-appearance="light"] .bc-learn-banner { background: var(--bc-panel); border-color: var(--bc-border); box-shadow: 0 18px 45px #32485a15; }
html[data-bc-appearance="light"] .bc-lab-controls,
html[data-bc-appearance="light"] .bc-lab-toolbar,
html[data-bc-appearance="light"] .bc-lab-caption { border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-lab-controls>label,
html[data-bc-appearance="light"] .bc-learn-banner h2 { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-ruler,
html[data-bc-appearance="light"] .bc-row-label,
html[data-bc-appearance="light"] .bc-grid-legend { color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-cell:not(.active) { background: var(--bc-surface); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-segmented button { background: var(--bc-panel); color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-segmented button[aria-pressed=true] { background: #d8f0f5; color: #005c74; }
html[data-bc-appearance="light"] .bc-play { background: var(--bc-field); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-button-ghost { background: transparent; color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-button-ghost:hover { background: var(--bc-raised); }
html[data-bc-appearance="light"] .bc-callout,
html[data-bc-appearance="light"] .bc-support-aside,
html[data-bc-appearance="light"] .bc-notice { background: var(--bc-panel); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-form label { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-form input:not([type=radio]):not([type=checkbox]):not([type=submit]),
html[data-bc-appearance="light"] .bc-form select,
html[data-bc-appearance="light"] .bc-form textarea,
html[data-bc-appearance="light"] .bc-site .bc-input { background: var(--bc-field); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-form input::placeholder,
html[data-bc-appearance="light"] .bc-form textarea::placeholder { color: #64798d; }
html[data-bc-appearance="light"] .bc-form fieldset,
html[data-bc-appearance="light"] .bc-faq-item { border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-skip,
html[data-bc-appearance="light"] .bc-button:not(.bc-button-ghost),
html[data-bc-appearance="light"] .bc-form button[type=submit],
html[data-bc-appearance="light"] .bc-form input[type=submit] { background: #006d86; color: #fff; }
html[data-bc-appearance="light"] :is(button,a,input,select,textarea,summary):focus-visible { outline-color: var(--bc-focus); }

/* Existing member and lesson components carry their own dark fills. */
html[data-bc-appearance="light"] :is(.tutor-wrap,.tutor-container,.tutor-dashboard,.tutor-course-details-page,.tutor-lesson-wrapper,.bc-account-panel,.bc-member-card,.bc-community-panel,.bc-lesson-card,.bc-studio-panel) { color: var(--bc-text); }
html[data-bc-appearance="light"] .tutor-dashboard-sidebar,
html[data-bc-appearance="light"] .tutor-dashboard-sidebar-nav { background: var(--bc-panel); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .tutor-dashboard-sidebar-nav a { color: var(--bc-text); }
html[data-bc-appearance="light"] .tutor-dashboard-sidebar-nav a.active,
html[data-bc-appearance="light"] .tutor-dashboard-sidebar-nav a:hover { background: var(--bc-raised); color: #005c74; }
html[data-bc-appearance="light"] :is(.tutor-card,.tutor-dashboard-content,.tutor-lesson-content,.tutor-profile-settings-tab,.bc-account-card,.bc-community-card,.bc-lesson-card,.bc-studio-card) { background: var(--bc-panel); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] :is(.tutor-wrap,.tutor-dashboard,.tutor-course-details-page,.bc-community-panel,.bc-studio-panel) :is(input,select,textarea) { background: var(--bc-field); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] :is(.tutor-wrap,.tutor-dashboard,.tutor-course-details-page,.bc-community-panel,.bc-studio-panel) :is(a,button):focus-visible { outline-color: var(--bc-focus); }
html[data-bc-appearance="light"] .bc-member-locale { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-member-locale select,
html[data-bc-appearance="light"] .bc-member-locale button { background: var(--bc-field); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-avatar-settings,
html[data-bc-appearance="light"] .bc-cover-details,
html[data-bc-appearance="light"] .bc-narration-preference { background: var(--bc-panel); color: var(--bc-text); border-color: var(--bc-border); box-shadow: 0 12px 35px #21426012; }
html[data-bc-appearance="light"] .bc-avatar-settings p,
html[data-bc-appearance="light"] .bc-narration-preference p,
html[data-bc-appearance="light"] .bc-narration-preference .bc-narration-preference-note,
html[data-bc-appearance="light"] .bc-cover-current { color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-narration-preference h2,
html[data-bc-appearance="light"] .bc-cover-details > summary { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-narration-preference .bc-narration-invitation,
html[data-bc-appearance="light"] .bc-narration-preference label,
html[data-bc-appearance="light"] .bc-avatar-settings a { color: var(--bc-cyan); }
html[data-bc-appearance="light"] .bc-narration-preference select { background: var(--bc-field); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-community-hero h1 span { color: #006d86; }
html[data-bc-appearance="light"] .bc-community-access { background: var(--bc-surface); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-community-nav { border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-community-nav a,
html[data-bc-appearance="light"] .bc-community-resources a { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-community-guide,
html[data-bc-appearance="light"] .bc-community-private { background: var(--bc-panel); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-community-principles li { color: var(--bc-muted); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-software-intro,
html[data-bc-appearance="light"] .bc-software-tagline { color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-software-card,
html[data-bc-appearance="light"] .bc-software-planned,
html[data-bc-appearance="light"] .bc-feature-invite { background: var(--bc-panel); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-software-card { --bc-software-accent: #006d86; }
html[data-bc-appearance="light"] .bc-software-ableton { --bc-software-accent: #a51c91; }
html[data-bc-appearance="light"] .bc-software-card :is(h2,p),
html[data-bc-appearance="light"] .bc-software-planned :is(h2,p),
html[data-bc-appearance="light"] .bc-feature-invite :is(h2,p) { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-software-card :is(.bc-software-description,.bc-software-detail,.bc-software-legacy-note),
html[data-bc-appearance="light"] .bc-feature-invite-copy p { color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-software-secondary a,
html[data-bc-appearance="light"] .bc-feature-invite-permanent a { color: var(--bc-cyan); }

/* Tutor's learning area defines its own dark token set. */
html[data-bc-appearance="light"] body.bc-site :is(.tutor-learning-page, .tutor-learning-area) {
  --tutor-surface-base: var(--bc-bg);
  --tutor-surface-l1: var(--bc-panel);
  --tutor-surface-l1-hover: var(--bc-surface);
  --tutor-surface-l2: var(--bc-surface);
  --tutor-surface-l2-hover: var(--bc-raised);
  --tutor-surface-l3: var(--bc-panel);
  --tutor-surface-sidebar-l1: var(--bc-panel);
  --tutor-text-primary: var(--bc-text);
  --tutor-text-secondary: var(--bc-muted);
  --tutor-text-subdued: var(--bc-muted);
  --tutor-text-disabled: #697b8b;
  --tutor-text-brand: var(--bc-cyan);
  --tutor-icon-idle: var(--bc-text);
  --tutor-icon-secondary: var(--bc-muted);
  --tutor-icon-subdued: var(--bc-muted);
  --tutor-icon-hover: var(--bc-text);
  --tutor-border-idle: var(--bc-border);
  --tutor-border-idle2: var(--bc-border);
  --tutor-border-hover: var(--bc-cyan);
  --tutor-button-secondary: var(--bc-surface);
  --tutor-button-ghost-hover: var(--bc-surface);
  --tutor-tab-l3-active: var(--bc-surface);
  --tutor-tab-sidebar-l4-hover: var(--bc-surface);
  --tutor-tab-sidebar-l4-active: var(--bc-raised);
  color-scheme: light;
}
html[data-bc-appearance="light"] .bc-lesson-video,
html[data-bc-appearance="light"] .bc-lesson-narration,
html[data-bc-appearance="light"] .bc-lesson-visual { background: var(--bc-panel); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-lesson-video h2,
html[data-bc-appearance="light"] .bc-lesson-narration-intro strong { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-lesson-video p,
html[data-bc-appearance="light"] .bc-lesson-video-controls p,
html[data-bc-appearance="light"] .bc-lesson-narration-intro span,
html[data-bc-appearance="light"] .bc-lesson-narration-status,
html[data-bc-appearance="light"] .bc-recorded-status,
html[data-bc-appearance="light"] .bc-lesson-visual figcaption { color: var(--bc-muted); }
html[data-bc-appearance="light"] .bc-lesson-video-controls label,
html[data-bc-appearance="light"] .bc-browser-fallback summary { color: var(--bc-cyan); }
html[data-bc-appearance="light"] .bc-lesson-video-controls select,
html[data-bc-appearance="light"] .bc-lesson-narration-controls :is(button,select),
html[data-bc-appearance="light"] .bc-section-play { background: var(--bc-field); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-lesson-narration-controls label { color: var(--bc-muted); }
html[data-bc-appearance="light"] body.bc-site .tutor-learning-area .tutor-lesson-wrapper { color: var(--bc-text); }
html[data-bc-appearance="light"] body.bc-site .tutor-learning-area .tutor-lesson-wrapper :is(h1,h2,h3,h4,h5,h6) { color: var(--bc-text); }

/* Course overview is styled by a later Tutor-specific stylesheet. */
html[data-bc-appearance="light"] body.bc-site .tutor-course-details-page {
  --tutor-body-color: var(--bc-text);
  --tutor-body-color-rgb: 21, 36, 52;
  --tutor-color-black: var(--bc-text);
  --tutor-color-white: var(--bc-panel);
  --tutor-color-secondary: var(--bc-muted);
  --tutor-color-subdued: var(--bc-muted);
  --tutor-color-hints: var(--bc-muted);
  --tutor-color-muted: var(--bc-muted);
  --tutor-color-gray: var(--bc-border);
  --tutor-color-gray-10: var(--bc-surface);
  --tutor-border-color: var(--bc-border);
  color: var(--bc-text);
  color-scheme: light;
}
html[data-bc-appearance="light"] body.bc-site .tutor-course-details-page .tutor-course-thumbnail { background-color: var(--bc-surface); }
html[data-bc-appearance="light"] body.bc-site .tutor-course-details-page .tutor-card-footer { background: var(--bc-surface); }

/* Page-specific cards and copy should follow the site palette too. */
html[data-bc-appearance="light"] .bc-ableton-tagline,
html[data-bc-appearance="light"] .bc-ableton-flow strong,
html[data-bc-appearance="light"] .bc-ableton-target strong { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-ableton-tested,
html[data-bc-appearance="light"] .bc-ableton-control { color: var(--bc-muted); }
html[data-bc-appearance="light"] :is(.bc-ableton-flow,.bc-ableton-preview,.bc-ableton-preview-main,.bc-ableton-features article,.bc-ableton-support,.bc-ableton-requirements) { background: var(--bc-panel); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-ableton-section,
html[data-bc-appearance="light"] .bc-ableton-flow li,
html[data-bc-appearance="light"] .bc-ableton-steps li { border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-ableton-preview > a { border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-ableton-features { border-color: var(--bc-border); }

html[data-bc-appearance="light"] .bc-policy-nav a { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-prose.bc-policy { background: var(--bc-panel); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-prose.bc-policy :is(p,li) { color: var(--bc-muted); }

html[data-bc-appearance="light"] :is(.bc-donation-value,.bc-donation-option) { background: var(--bc-panel); color: var(--bc-text); border-color: var(--bc-border); }
html[data-bc-appearance="light"] .bc-donation-option h3 { color: var(--bc-text); }
html[data-bc-appearance="light"] .bc-donation-option .bc-donation-link-note { color: var(--bc-muted); }

@media (prefers-reduced-motion: reduce) {
  .bc-appearance-toggle { transition: none; }
}