:root {
  color-scheme: light;
  --color-page: #f7faf8;
  --color-surface: #ffffff;
  --color-elevated: #f0f5f1;
  --color-text: #16221b;
  --color-muted: #526259;
  --color-divider: #d6e1d9;
  --color-control-border: #6d8878;
  --color-primary: #087f8c;
  --color-primary-text: #ffffff;
  --color-focus: #9a6b00;
  --paper: var(--color-page);
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-divider);
  --teal: var(--color-primary);
  --shop-surface: var(--color-surface);
  --shop-muted: var(--color-muted);
  --shop-line: var(--color-divider);

  /* Classification foreground (text labels in move list, legend text) */
  --classification-blunder-fg: #a22f39;
  --classification-mistake-fg: #a05225;
  --classification-inaccuracy-fg: #826300;
  --classification-best-fg: #246c44;
  --classification-excellent-fg: #3a7a1e;
  --classification-okay-fg: #5a7a1e;
  --classification-opening-fg: #8a6d2e;
  --classification-splendid-fg: #16805c;
  --classification-perfect-fg: #167a9b;

  /* Classification fill (circular badge fills, legend badge dots) */
  --classification-blunder-fill: #c94b50;
  --classification-mistake-fill: #d87329;
  --classification-inaccuracy-fill: #e1a900;
  --classification-best-fill: #2d9d52;
  --classification-excellent-fill: #55a83b;
  --classification-okay-fill: #84b547;
  --classification-opening-fill: #bd9560;
  --classification-splendid-fill: #16805c;
  --classification-perfect-fill: #167a9b;

  /* Review-specific surfaces */
  --review-eval-bar-bg: #23332f;
  --review-eval-fill: #faf8ef;
  --review-chart-bg: #f4f5f0;
  --review-selected-bg: #dceae0;
  --review-nav-bg: #f0f3ed;
  --review-side-stat-bg: #f6f8f3;

  /* State colours */
  --state-selected-bg: #e2eee6;
  --state-selected-text: #20583e;
  --state-selected-border: #b7d0bf;
  --state-hover-bg: #f0f5f1;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #101815;
  --color-surface: #18231e;
  --color-elevated: #223128;
  --color-text: #edf4ed;
  --color-muted: #b1c1b5;
  --color-divider: #344b3d;
  --color-control-border: #668571;
  --color-primary: #8fd7b0;
  --color-primary-text: #102319;
  --color-focus: #e4c177;
  --paper: #101815;
  --ink: #edf4ed;
  --muted: #b1c1b5;
  --line: #344b3d;
  --teal: #8fd7b0;
  --brass: #e4c177;
  --shop-muted: #b1c1b5;
  --shop-line: #344b3d;
  --shop-surface: #18231e;

  /* Classification foreground — adjusted for dark backgrounds */
  --classification-blunder-fg: #e06a72;
  --classification-mistake-fg: #d4925a;
  --classification-inaccuracy-fg: #d4b35e;
  --classification-best-fg: #5cb87e;
  --classification-excellent-fg: #7cc85a;
  --classification-okay-fg: #9cc95a;
  --classification-opening-fg: #c4a76a;
  --classification-splendid-fg: #4dbf8a;
  --classification-perfect-fg: #5ab8d0;

  /* Classification fill — slightly brighter for dark backgrounds */
  --classification-blunder-fill: #d65d63;
  --classification-mistake-fill: #e08540;
  --classification-inaccuracy-fill: #ecbe3a;
  --classification-best-fill: #3fb86a;
  --classification-excellent-fill: #6bc848;
  --classification-okay-fill: #9fc950;
  --classification-opening-fill: #d0a86e;
  --classification-splendid-fill: #28a06e;
  --classification-perfect-fill: #3a9ab8;

  /* Review-specific surfaces */
  --review-eval-bar-bg: #0d1411;
  --review-eval-fill: #d4e8d0;
  --review-chart-bg: #1a2620;
  --review-selected-bg: #2a3d33;
  --review-nav-bg: #1a2620;
  --review-side-stat-bg: #1a2620;

  /* State colours */
  --state-selected-bg: #2a3d33;
  --state-selected-text: #8fd7b0;
  --state-selected-border: #3d5a48;
  --state-hover-bg: #223128;
}

html, body { background: var(--color-page); color: var(--color-text); }
body { accent-color: var(--color-primary); }
a { color: var(--color-primary); }
button, input, select, textarea { color: var(--color-text); }
input, select, textarea { background: var(--color-surface); border-color: var(--color-control-border); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-primary); color: var(--color-primary-text); }

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .stats,
html[data-theme="dark"] .notebook,
html[data-theme="dark"] .student-picker,
html[data-theme="dark"] .game-tile,
html[data-theme="dark"] .activate-card,
html[data-theme="dark"] .quote,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .shop .product-card,
html[data-theme="dark"] .shop .checkout-card,
html[data-theme="dark"] .shop .bag-item,
html[data-theme="dark"] .shop .order-card { background: var(--color-surface); color: var(--color-text); border-color: var(--color-divider); }
html[data-theme="dark"] .shop .hero-art,
html[data-theme="dark"] .shop .custom-preview { background: var(--color-elevated); }
html[data-theme="dark"] .game-review,
html[data-theme="dark"] .game-review .review-card,
html[data-theme="dark"] .game-review .opening-explorer,
html[data-theme="dark"] .game-review .move-list,
html[data-theme="dark"] .game-review .engine-panel { background: var(--color-surface); color: var(--color-text); border-color: var(--color-divider); }
html[data-theme="dark"] .game-review .cm-chessboard .board .square.white { fill: #d4d8cf; }
html[data-theme="dark"] .game-review .cm-chessboard .board .square.black { fill: #52705f; }
html[data-theme="dark"] .book-owner,
html[data-theme="dark"] .subtext,
html[data-theme="dark"] .section-meta,
html[data-theme="dark"] .shop .muted { color: var(--color-muted); }
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .icon-button { background: transparent; color: var(--color-text); border-color: var(--color-control-border); }
html[data-theme="dark"] .primary { background: var(--color-primary); color: var(--color-primary-text); }
html[data-theme="dark"] body { background: var(--color-page) !important; color: var(--color-text) !important; }
html[data-theme="dark"] body:not(:has(.shop)) .topbar,
html[data-theme="dark"] body:not(:has(.shop)) .bottom-nav { background: var(--color-surface) !important; color: var(--color-text); }
html[data-theme="dark"] .shop .topbar,
html[data-theme="dark"] body:has(.shop) .bottom-nav { background: var(--color-page) !important; }
html[data-theme="dark"] .shop .shop-button { background: var(--color-primary); color: var(--color-primary-text); }
html[data-theme="dark"] .shop .shop-link { color: var(--color-primary); border-color: var(--color-primary); }
html[data-theme="dark"] .shop .hero-art,
html[data-theme="dark"] .shop .custom-preview,
html[data-theme="dark"] .shop .activate-next { background: var(--color-elevated); }
html[data-theme="dark"] .shop .checkout-summary { background: var(--color-elevated); }
html[data-theme="dark"] .shop .count-pill,
html[data-theme="dark"] .shop .order-status { background: var(--color-elevated); color: var(--color-text); }
html[data-theme="dark"] .shop .spec-strip,
html[data-theme="dark"] .shop .shop-section { border-color: var(--color-divider); }
html[data-theme="dark"] .shop .shop-kicker,
html[data-theme="dark"] .shop h1,
html[data-theme="dark"] .shop h2,
html[data-theme="dark"] .shop h3 { color: var(--color-text); }
html[data-theme="dark"] .shop .score-preview,
html[data-theme="dark"] .shop .sheet-detail { background: #fff; color: #202524; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: var(--color-surface); color: var(--color-text); }
html[data-theme="dark"] .tabs { background: var(--color-elevated); border-color: var(--color-divider); }
html[data-theme="dark"] .tabs button { color: var(--color-muted); }
html[data-theme="dark"] .tabs button[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); }
html[data-theme="dark"] .game-content-photos,
html[data-theme="dark"] #board-preview,
html[data-theme="dark"] #moves-form,
html[data-theme="dark"] .details-form,
html[data-theme="dark"] .game-review .review-board-column,
html[data-theme="dark"] .game-review .review-panel,
html[data-theme="dark"] .game-review > .review-exercise,
html[data-theme="dark"] .game-review > .review-report { background: var(--color-surface) !important; color: var(--color-text); border-color: var(--color-divider); }
html[data-theme="dark"] .game-content-photos .photo-stage { background: var(--color-elevated); border-color: var(--color-divider); }
html[data-theme="dark"] .game-content-photos .upload-actions button,
html[data-theme="dark"] .game-content-photos .upload-actions label,
html[data-theme="dark"] .game-review button,
html[data-theme="dark"] .game-review select { background: var(--color-surface); color: var(--color-text); border-color: var(--color-control-border); }
html[data-theme="dark"] .game-review button.primary,
html[data-theme="dark"] .game-review .review-controls button.primary { background: var(--color-primary); color: var(--color-primary-text); }
html[data-theme="dark"] .game-review .review-chart { background: var(--color-elevated); }
html[data-theme="dark"] .game-review .review-nav { background: var(--color-elevated); }
html[data-theme="dark"] .game-review .review-nav [data-step="play"] { background: var(--color-surface); color: var(--color-text); }
html[data-theme="dark"] .game-review #review-flip { border-color: var(--color-divider); }
html[data-theme="dark"] .game-review .review-eval-label { background: var(--color-surface); color: var(--color-text); border-color: var(--color-divider); }
html[data-theme="dark"] .game-review .review-moves button[aria-current="true"] { background: var(--color-elevated); outline-color: var(--color-primary); }
html[data-theme="dark"] .game-review .review-summary span { background: var(--color-elevated); color: var(--color-text); }
html[data-theme="dark"] .game-review .review-side-stat { background: var(--color-elevated); color: var(--color-text); }
html[data-theme="dark"] .game-review .review-side-stat strong { color: var(--color-primary); }
html[data-theme="dark"] .game-review .review-side-stat small,
html[data-theme="dark"] .game-review .review-side-stat span { color: var(--color-muted); }
html[data-theme="dark"] .game-review .review-intro p,
html[data-theme="dark"] .game-review .review-status,
html[data-theme="dark"] .game-review .review-disclaimer { color: var(--color-muted); }
html[data-theme="dark"] .game-review .review-exercise > p:not(.eyebrow),
html[data-theme="dark"] .game-review .review-report > p:not(.eyebrow) { color: var(--color-muted); }
html[data-theme="dark"] .details-form label,
html[data-theme="dark"] #moves-form label { color: var(--color-text); }
html[data-theme="dark"] .details-form .panel-heading p,
html[data-theme="dark"] #moves-form .panel-heading p { color: var(--color-muted); }
html[data-theme="dark"] .form-actions { border-color: var(--color-divider); }

.appearance-control { position: relative; }
#appearance-control { position: relative; }
.appearance-button { min-height: 36px; padding: 0.45rem 0.7rem; border: 1px solid var(--color-control-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; }
.appearance-menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 0.5rem); min-width: 9rem; padding: 0.55rem; border: 1px solid var(--color-divider); border-radius: 0.75rem; background: var(--color-surface); box-shadow: 0 12px 30px rgb(0 0 0 / 18%); }
.appearance-menu p { margin: 0.25rem 0.5rem 0.4rem; color: var(--color-muted); font-size: 0.75rem; }
.appearance-menu label { display: flex; gap: 0.5rem; align-items: center; padding: 0.45rem 0.5rem; border-radius: 0.45rem; cursor: pointer; }
.appearance-menu label:hover { background: var(--color-elevated); }
@media (max-width: 600px) { .appearance-button { font-size: 0; width: 2.4rem; } .appearance-button::before { content: '◐'; font-size: 1rem; } }

@media print {
  :root, html[data-theme="dark"] { color-scheme: light; --color-page: #fff; --color-surface: #fff; --color-elevated: #f5f5f5; --color-text: #111; --color-muted: #444; --color-divider: #bbb; --color-primary: #075f67; --color-primary-text: #fff; }
  body { background: #fff !important; color: #111 !important; }
}