/* The light palette is the existing default. Dark mode is opt-in and shared across pages. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f0ecf8;
  --muted: #b5aec4;
  --paper: #111018;
  --white: #1b1923;
  --lav: #292338;
  --line: #373241;
}

html[data-theme="dark"] body { background: #111018; color: #f0ecf8; }
html[data-theme="dark"] .site-header { background: rgba(20,18,27,.92); border-color: #302c39; }
html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .language-button,
html[data-theme="dark"] .watch-link,
html[data-theme="dark"] .hero-proof,
html[data-theme="dark"] .hero-proof b { color: #d0c9dc; }
html[data-theme="dark"] .button-dark { background: #eee9fa; color: #201832; }
html[data-theme="dark"] .button-light { background: #292338; color: #e8dcff; }
html[data-theme="dark"] .proof-avatars span { border-color: #111018; }
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .auth-modal,
html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .auth-form,
html[data-theme="dark"] .auth-side,
html[data-theme="dark"] .faq-item { background-color: #1b1923; color: #f0ecf8; border-color: #373241; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background-color: #211e2a; color: #f0ecf8; border-color: #484252; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #a59db4; }
html[data-theme="dark"] .dashboard-body { background: #111018; color: #f0ecf8; }
html[data-theme="dark"] .app-sidebar,
html[data-theme="dark"] .dashboard-topbar,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .focus-card,
html[data-theme="dark"] .dash-course-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .octo-drawer { background: #1b1923; color: #f0ecf8; border-color: #373241; }
html[data-theme="dark"] .settings-heading h2,
html[data-theme="dark"] .settings-card-heading h3,
html[data-theme="dark"] .settings-sidecard h3,
html[data-theme="dark"] .dash-course-card h3 { color: #f0ecf8; }
html[data-theme="dark"] .settings-card-heading p,
html[data-theme="dark"] .settings-field>span,
html[data-theme="dark"] .settings-provider-row>span,
html[data-theme="dark"] .settings-note,
html[data-theme="dark"] .settings-sidecard p,
html[data-theme="dark"] .settings-sidecard { color: #b5aec4; }
html[data-theme="dark"] .settings-sidecard { background: linear-gradient(145deg,#272137,#1b1923 75%); border-color: #373241; }
html[data-theme="dark"] .settings-field input,
html[data-theme="dark"] .settings-field select,
html[data-theme="dark"] .search-box input { background: #211e2a; color: #f0ecf8; border-color: #484252; }
html[data-theme="dark"] .settings-field input[readonly] { background: #24212d; color: #c0b9ce; }
html[data-theme="dark"] .settings-divider { background: #373241; }
html[data-theme="dark"] .settings-icon { background: #302744; }
html[data-theme="dark"] .date-chip,
html[data-theme="dark"] .period-select,
html[data-theme="dark"] .course-more { background: #292534; color: #e6dff1; border-color: #403a4b; }
html[data-theme="dark"] .focus-copy p,
html[data-theme="dark"] .stat-note,
html[data-theme="dark"] .dash-course-card>p,
html[data-theme="dark"] .activity-total span { color: #b5aec4; }
html[data-theme="dark"] .drawer-content,
html[data-theme="dark"] .drawer-input,
html[data-theme="dark"] .octo-tip-card { background-color: #211e2a; color: #f0ecf8; }
html[data-theme="dark"] .dashboard-footer { color: #aaa2b8; }
html[data-theme="dark"] .auth-backdrop,
html[data-theme="dark"] .modal-backdrop { background: rgba(7,6,11,.78); }
/* Dashboard surfaces that use their own light colors in the base stylesheet. */
html[data-theme="dark"] .sidebar-plan { background: linear-gradient(145deg,#29243a,#211e2c); border-color: #3b3549; }
html[data-theme="dark"] .sidebar-plan p { color: #e5ddf4; }
html[data-theme="dark"] .plan-top,
html[data-theme="dark"] .user-meta small { color: #aaa2b8; }
html[data-theme="dark"] .plan-meter { background: #393247; }
html[data-theme="dark"] .sidebar-user { background: #191720; border-top-color: #373241; color: #e9e4f1; }
html[data-theme="dark"] .side-count { background: #292534; border-color: #403a4b; color: #c5bdd2; }
html[data-theme="dark"] .side-link.active { background: #332847; color: #d6c5ff; }
html[data-theme="dark"] .dashboard-topbar { background: rgba(25,23,32,.92); border-color: #373241; }
html[data-theme="dark"] .dash-search,
html[data-theme="dark"] .dash-search.expanded { background: #25222e; border-color: #403a4b; }
html[data-theme="dark"] .dash-search input { background: transparent; color: #f0ecf8; }
html[data-theme="dark"] .dash-search kbd { background: #302b3a; border-color: #484252; color: #c3bbd0; }
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .date-chip,
html[data-theme="dark"] .period-select,
html[data-theme="dark"] .course-continue { background: #292534; border-color: #403a4b; color: #eee8f7; }
html[data-theme="dark"] .stat-card { background: linear-gradient(145deg,#211e2a,#1b1923); border-color: #373241; }
html[data-theme="dark"] .stat-purple { background: linear-gradient(145deg,#302647,#24202f); }
html[data-theme="dark"] .stat-mint { background: linear-gradient(145deg,#20332f,#1d2728); }
html[data-theme="dark"] .stat-peach { background: linear-gradient(145deg,#382d29,#272129); }
html[data-theme="dark"] .dash-course-icon { background: #34294a; }
html[data-theme="dark"] .ap-course .dash-course-icon { background: #243932; }
html[data-theme="dark"] .ib-course .dash-course-icon { background: #403126; }
html[data-theme="dark"] .course-progress { background: #393345; }
html[data-theme="dark"] .octo-tip-card { background: linear-gradient(145deg,#2a233a,#211e2a); border-color: #3b3549; }
html[data-theme="dark"] .tip-octo { background: #342b45; }
html[data-theme="dark"] .focus-button,
html[data-theme="dark"] .focus-speech { background: #f0eaff; color: #35264f; }
html[data-theme="dark"] .drawer-close,
html[data-theme="dark"] .drawer-message { background: #302a3e; color: #eee8f7; }
html[data-theme="dark"] .dashboard-body.auth-loading .auth-gate { background: #111018; color: #c4bdd1; }
@media (prefers-reduced-motion: no-preference) {
  body, .site-header, .app-sidebar, .dashboard-topbar, .stat-card, .focus-card,
  .dash-course-card, .activity-card, .settings-card, .settings-sidecard { transition: background-color .22s ease, color .22s ease, border-color .22s ease; }
}