:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #09090b;
  --muted: #71717a;
  --border: #e4e4e7;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --accent: #3b82f6;
  --radius: 8px;
  --control-h: 34px;
  --content-max: 780px;
  --lesson-content-max: 960px;
  --lesson-page-gutter: 16px;
  --lesson-page-top: 32px;
  --lesson-page-top-desktop: 48px;
  --lesson-page-bottom: 64px;
  --lesson-header-gap: 24px;
  --lesson-label-gap: 6px;
  --lesson-label-size: 0.75rem;
  --lesson-label-tracking: 0.08em;
  --lesson-title-size: clamp(1.5rem, 5vw, 2rem);
  --lesson-title-line-height: 1.25;
  --lesson-row-padding: 18px;
  --lesson-column-gap: 16px;
  --lesson-column-gap-desktop: 40px;
  --lesson-border-width: 1px;
  --lesson-primary-size: clamp(1rem, 3.8vw, 1.2rem);
  --lesson-primary-line-height: 1.65;
  --lesson-secondary-gap: 4px;
  --lesson-secondary-size: 0.875rem;
  --lesson-secondary-line-height: 1.5;
  --lesson-active-bg: #dbeafe;
  --lesson-active-text: #1d4ed8;
  --lesson-active-radius: 4px;
  --lesson-active-transition: 120ms ease;
  --lesson-play-bg: var(--text);
  --lesson-play-text: var(--bg);
  --lesson-play-height: 48px;
  --lesson-play-padding: 24px;
  --lesson-play-radius: 999px;
  --lesson-play-margin: 24px;
  --lesson-play-bottom: 16px;
  --lesson-play-z-index: 20;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09090b;
    --surface: #18181b;
    --card: #18181b;
    --text: #fafafa;
    --muted: #a1a1aa;
    --border: #27272a;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
}

/* 强制深色主题 class - 优先级高于媒体查询 */
html.dark-theme,
body.dark-theme {
  --bg: #09090b;
  --surface: #18181b;
  --card: #18181b;
  --text: #fafafa;
  --muted: #a1a1aa;
  --border: #27272a;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
  --lesson-active-bg: #1e3a5f;
  --lesson-active-text: #bfdbfe;
}

/* 强制浅色主题 class */
html.light-theme,
body.light-theme {
  --bg: #ffffff;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #09090b;
  --muted: #71717a;
  --border: #e4e4e7;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
}