:root {
  color-scheme: light;
  --theme-paper: #f4f7f6;
  --theme-surface: #ffffff;
  --theme-elevated: #edf3f4;
  --theme-text: #10232f;
  --theme-muted: #566873;
  --theme-line: #ccd6da;
  --theme-ink: #082a3f;
  --theme-accent: #c9a227;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-paper: #061821;
  --theme-surface: #0d2734;
  --theme-elevated: #123343;
  --theme-text: #eaf2f4;
  --theme-muted: #b4c5cc;
  --theme-line: #365462;
  --theme-ink: #071f2e;
  --theme-accent: #e2bd45;
}

body { background: var(--theme-paper); color: var(--theme-text); }
.brand-icon { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: transparent; color: #fff; }
.managed-logo-reference { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 { color: var(--theme-text); }
html[data-theme="dark"] .hero-shell,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .membership-panel,
html[data-theme="dark"] footer { background: var(--theme-ink); }
html[data-theme="dark"] .public-strip,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .reader-paper,
html[data-theme="dark"] .focus-item,
html[data-theme="dark"] .workflow-step,
html[data-theme="dark"] .workflow-step button,
html[data-theme="dark"] .quiz-stage,
html[data-theme="dark"] .user-row,
html[data-theme="dark"] .row-actions button,
html[data-theme="dark"] .auth-dialog,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .filter-row button { background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-line); }
html[data-theme="dark"] .section-heading > p,
html[data-theme="dark"] .guide-card p,
html[data-theme="dark"] .guide-card .card-footer span,
html[data-theme="dark"] .workflow-detail,
html[data-theme="dark"] .auth-dialog p,
html[data-theme="dark"] .user-meta small,
html[data-theme="dark"] .user-row > span { color: var(--theme-muted); }
html[data-theme="dark"] .next-panel,
html[data-theme="dark"] .lead-rule { background: var(--theme-elevated); }
html[data-theme="dark"] .button-outline-dark,
html[data-theme="dark"] .text-button { color: var(--theme-text); border-color: var(--theme-line); }
html[data-theme="dark"] .tab-label { background: #4e4115; color: #ffe999; }