.appearance-picker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}
.appearance-picker select { padding: 7px 9px; }

html[data-theme='light'] {
  color-scheme: light;
  --bg: #f2f6f4;
  --panel: #ffffff;
  --line: #d5dfda;
  --accent: #28784f;
  --accent-dark: #226443;
  --accent-glow: #28784f22;
  --muted: #34453b;
  --paper: #e9efeb;
  --ink: #101a14;
  --green: #44795b;
  --red: #b43c35;
  --card: #ffffff;
  --card-2: #edf3ef;
  --card-line: #cbd8d0;
  --text-strong: #0f1a13;
  --review: #b43c35;
  --text: #16231b;
}
html[data-theme='beige'] {
  color-scheme: light;
  --bg: #f1ecdf;
  --panel: #faf7ed;
  --line: #ddd4c2;
  --accent: #587447;
  --accent-dark: #47613a;
  --accent-glow: #58744724;
  --muted: #45412f;
  --paper: #eee7d7;
  --ink: #1d1c15;
  --green: #65794e;
  --red: #a9443c;
  --card: #fbf8ef;
  --card-2: #f2eddf;
  --card-line: #d8cfbc;
  --text-strong: #1a1912;
  --review: #a9443c;
  --text: #23221a;
}

html[data-theme='light'] body,
html[data-theme='beige'] body {
  background: var(--bg);
  color: var(--text);
}
html[data-theme='light'] body > header,
html[data-theme='beige'] body > header {
  background: var(--panel);
  border-color: var(--line);
}
html[data-theme='light'] nav a,
html[data-theme='beige'] nav a,
html[data-theme='light'] .brand small,
html[data-theme='beige'] .brand small,
html[data-theme='light'] .muted,
html[data-theme='beige'] .muted,
html[data-theme='light'] .eyebrow,
html[data-theme='beige'] .eyebrow {
  color: var(--muted);
}
html[data-theme='light'] .brand-product,
html[data-theme='beige'] .brand-product,
html[data-theme='light'] h1,
html[data-theme='beige'] h1,
html[data-theme='light'] h2,
html[data-theme='beige'] h2,
html[data-theme='light'] h3,
html[data-theme='beige'] h3,
html[data-theme='light'] .page,
html[data-theme='beige'] .page,
html[data-theme='light'] main,
html[data-theme='beige'] main {
  color: var(--text-strong);
}
html[data-theme='light'] input,
html[data-theme='beige'] input,
html[data-theme='light'] select,
html[data-theme='beige'] select,
html[data-theme='light'] textarea,
html[data-theme='beige'] textarea,
html[data-theme='light'] .note-editor,
html[data-theme='beige'] .note-editor {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme='light'] .secondary,
html[data-theme='beige'] .secondary {
  background: var(--card-2);
  color: var(--accent);
  border-color: var(--line);
}
html[data-theme='light'] .secondary:hover,
html[data-theme='beige'] .secondary:hover { background: var(--paper); }
html[data-theme='light'] .primary,
html[data-theme='beige'] .primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
  box-shadow: none;
}
html[data-theme='light'] .mission-card,
html[data-theme='beige'] .mission-card,
html[data-theme='light'] .sim-card,
html[data-theme='beige'] .sim-card,
html[data-theme='light'] .sim-mode,
html[data-theme='beige'] .sim-mode,
html[data-theme='light'] .sim-career-drawer,
html[data-theme='beige'] .sim-career-drawer,
html[data-theme='light'] .sim-note-review,
html[data-theme='beige'] .sim-note-review,
html[data-theme='light'] .sim-focus,
html[data-theme='beige'] .sim-focus,
html[data-theme='light'] .sim-note-box,
html[data-theme='beige'] .sim-note-box,
html[data-theme='light'] .panel,
html[data-theme='beige'] .panel,
html[data-theme='light'] .home-path,
html[data-theme='beige'] .home-path,
html[data-theme='light'] .home-practice,
html[data-theme='beige'] .home-practice,
html[data-theme='light'] .home-compass,
html[data-theme='beige'] .home-compass,
html[data-theme='light'] .home-next,
html[data-theme='beige'] .home-next {
  background: var(--card);
  color: var(--text);
  border-color: var(--card-line);
  box-shadow: 0 3px 14px #26362c0b;
}
html[data-theme='light'] aside,
html[data-theme='beige'] aside,
html[data-theme='light'] .reading,
html[data-theme='beige'] .reading,
html[data-theme='light'] .journey-game,
html[data-theme='beige'] .journey-game,
html[data-theme='light'] .map-viewport,
html[data-theme='beige'] .map-viewport,
html[data-theme='light'] .sim-actions,
html[data-theme='beige'] .sim-actions,
html[data-theme='light'] .answer-option,
html[data-theme='beige'] .answer-option,
html[data-theme='light'] .sim-alt,
html[data-theme='beige'] .sim-alt,
html[data-theme='light'] .subnav,
html[data-theme='beige'] .subnav {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme='light'] .reading,
html[data-theme='beige'] .reading,
html[data-theme='light'] .answer-option,
html[data-theme='beige'] .answer-option,
html[data-theme='light'] .sim-alt,
html[data-theme='beige'] .sim-alt {
  color: var(--text);
}
html[data-theme='light'] .answer-option b,
html[data-theme='beige'] .answer-option b,
html[data-theme='light'] .sim-alt b,
html[data-theme='beige'] .sim-alt b { color: var(--accent); }
html[data-theme='light'] .journey-game,
html[data-theme='beige'] .journey-game {
  background: var(--bg);
}
html[data-theme='light'] .map-viewport,
html[data-theme='beige'] .map-viewport { scrollbar-color: var(--muted) var(--paper); }
html[data-theme='light'] .literal-dock,
html[data-theme='beige'] .literal-dock,
html[data-theme='light'] .dock,
html[data-theme='beige'] .dock {
  background: var(--card-2);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme='light'] .literal-dock .q-feedback,
html[data-theme='beige'] .literal-dock .q-feedback,
html[data-theme='light'] .literal-dock .lens-panel,
html[data-theme='beige'] .literal-dock .lens-panel,
html[data-theme='light'] .literal-dock .lens-panel small,
html[data-theme='beige'] .literal-dock .lens-panel small { color: var(--text); }
html[data-theme='light'] .sim-actions,
html[data-theme='beige'] .sim-actions { box-shadow: 0 -5px 18px #26362c0c; }
html[data-theme='light'] .sim-career-subdrawer,
html[data-theme='beige'] .sim-career-subdrawer,
html[data-theme='light'] .sim-chips .chip,
html[data-theme='beige'] .sim-chips .chip,
html[data-theme='light'] .note-toolbar,
html[data-theme='beige'] .note-toolbar,
html[data-theme='light'] .corr-tabs button,
html[data-theme='beige'] .corr-tabs button,
html[data-theme='light'] .sim-alt-list li,
html[data-theme='beige'] .sim-alt-list li,
html[data-theme='light'] .sim-notebook-strip span,
html[data-theme='beige'] .sim-notebook-strip span,
html[data-theme='light'] .sim-clock,
html[data-theme='beige'] .sim-clock {
  background: var(--card-2);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme='light'] .home-intro > p,
html[data-theme='beige'] .home-intro > p,
html[data-theme='light'] .home-compass li span,
html[data-theme='beige'] .home-compass li span,
html[data-theme='light'] .home-next p,
html[data-theme='beige'] .home-next p,
html[data-theme='light'] .home-path p,
html[data-theme='beige'] .home-path p,
html[data-theme='light'] .home-stats span,
html[data-theme='beige'] .home-stats span,
html[data-theme='light'] .sim-note-question,
html[data-theme='beige'] .sim-note-question,
html[data-theme='light'] .sim-note-review > header small,
html[data-theme='beige'] .sim-note-review > header small,
html[data-theme='light'] .sim-note-review > header span,
html[data-theme='beige'] .sim-note-review > header span,
html[data-theme='light'] .sim-mode small,
html[data-theme='beige'] .sim-mode small,
html[data-theme='light'] .sim-clock small,
html[data-theme='beige'] .sim-clock small {
  color: var(--muted);
}
html[data-theme='light'] .sim-learning-tools,
html[data-theme='beige'] .sim-learning-tools,
html[data-theme='light'] .sim-public-comments,
html[data-theme='beige'] .sim-public-comments {
  border-color: var(--line);
}
html[data-theme='light'] .note-editor,
html[data-theme='beige'] .note-editor { color: var(--text); }
html[data-theme='light'] .note-editor:empty::before,
html[data-theme='beige'] .note-editor:empty::before { color: var(--muted); }
html[data-theme='light'] .history-table th,
html[data-theme='beige'] .history-table th { background: var(--card-2); color: var(--text-strong); }
html[data-theme='light'] .history-table td,
html[data-theme='beige'] .history-table td,
html[data-theme='light'] .table-wrap,
html[data-theme='beige'] .table-wrap { border-color: var(--line); }
html[data-theme='light'] dialog,
html[data-theme='beige'] dialog { background: var(--panel); color: var(--text); border-color: var(--line); }
html[data-theme='light'] footer,
html[data-theme='beige'] footer { color: var(--muted); }

html[data-theme='beige'] .home-path,
html[data-theme='beige'] .home-practice,
html[data-theme='beige'] .home-compass,
html[data-theme='beige'] .home-next {
  background: #f6f1e5;
}
html[data-theme='beige'] .journey-game { background: #f1ecdf; }
html[data-theme='beige'] .sim-alt.selected,
html[data-theme='beige'] .corr-tabs button.on,
html[data-theme='beige'] .sim-rewards {
  background: #e6eddc;
  color: #3e5e38;
}

html[data-theme='light'] .ficha-chapter,
html[data-theme='beige'] .ficha-chapter,
html[data-theme='light'] .continue-card,
html[data-theme='beige'] .continue-card {
  background: var(--card);
  color: var(--text-strong);
  border-color: var(--card-line);
}
html[data-theme='light'] .continue-card small,
html[data-theme='beige'] .continue-card small,
html[data-theme='light'] .continue-card strong,
html[data-theme='beige'] .continue-card strong,
html[data-theme='light'] .ficha-chapter summary,
html[data-theme='beige'] .ficha-chapter summary {
  color: var(--text-strong);
}


/* Leitura nos temas claros (08/10/2026): letras mais escuras e um pouco mais encorpadas. */
html[data-theme='light'] body,
html[data-theme='beige'] body {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
html[data-theme='light'] .muted,
html[data-theme='beige'] .muted,
html[data-theme='light'] small,
html[data-theme='beige'] small,
html[data-theme='light'] nav a,
html[data-theme='beige'] nav a,
html[data-theme='light'] .eyebrow,
html[data-theme='beige'] .eyebrow {
  font-weight: 500;
}
html[data-theme='light'] strong, html[data-theme='beige'] strong,
html[data-theme='light'] b, html[data-theme='beige'] b,
html[data-theme='light'] h1, html[data-theme='beige'] h1,
html[data-theme='light'] h2, html[data-theme='beige'] h2,
html[data-theme='light'] h3, html[data-theme='beige'] h3 {
  font-weight: 700;
}
html[data-theme='light'] nav a[aria-current='page'],
html[data-theme='beige'] nav a[aria-current='page'],
html[data-theme='light'] nav a.active,
html[data-theme='beige'] nav a.active {
  color: var(--text-strong);
}
/* Botões secundários e links verdes: tom mais escuro do verde para ler melhor sobre o bege. */
html[data-theme='light'] .secondary, html[data-theme='beige'] .secondary,
html[data-theme='light'] .er-text, html[data-theme='beige'] .er-text { color: var(--accent-dark); font-weight: 600; }