/* Shared colors only: component geometry and measurement patterns stay intact. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface2: #f5f6f8;
  --surface3: #e9edf2;
  --ink: #15191f;
  --text: #15191f;
  --muted: #59616d;
  --muted-strong: #414b59;
  --line: #dce1e7;
  --control-border: #838d9c;
  --accent: #f05b35;
  --accent-text: #c74320;
  --action: #c74320;
  --action-hover: #a93417;
  --on-action: #ffffff;
  --primary: #c74320;
  --accent-soft: #fff0eb;
  --accent-wash: #fff8f5;
  --blue: #2c64ba;
  --focus: #c74320;
  --success-text: #176c3a;
  --danger-text: #b42318;
  --chart-grid: #d9dfe7;
  --chart-empty: #e9edf2;
  --art-orange: #fff1eb;
  --art-blue: #edf3fc;
  --art-green: #edf6f1;
  --art-purple: #f5f0fa;
  --key-bg: #ffffff;
  --key-edge: #adb5c1;
  --backdrop: #10172566;
  --toast-bg: #17202c;
  --toast-text: #ffffff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d10;
  --paper: #13161c;
  --surface: #13161c;
  --surface2: #1a1f27;
  --surface3: #252d38;
  --ink: #f3f5f8;
  --text: #f3f5f8;
  --muted: #abb3bf;
  --muted-strong: #c7ced8;
  --line: #343d4a;
  --control-border: #687486;
  --accent: #ff8059;
  --accent-text: #ff9a79;
  --action: #ff8059;
  --action-hover: #ff9a79;
  --on-action: #17100d;
  --primary: #ff8059;
  --accent-soft: #35231c;
  --accent-wash: #211914;
  --blue: #8eb9ff;
  --focus: #ff9a79;
  --success-text: #96dfaf;
  --danger-text: #ffaaa3;
  --chart-grid: #3b4655;
  --chart-empty: #2b3441;
  --art-orange: #2b1e19;
  --art-blue: #172235;
  --art-green: #162720;
  --art-purple: #261d31;
  --key-bg: #292f39;
  --key-edge: #556171;
  --backdrop: #000000a6;
  --toast-bg: #e9edf5;
  --toast-text: #141a22;
}

html[data-theme] body {
  background: var(--bg);
  color: var(--ink);
}

html[data-theme] :is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline-color: var(--focus);
}

html[data-theme] :is(input[type="range"], input[type="checkbox"]) {
  accent-color: var(--action);
}

html[data-theme] :is(input, textarea, select)::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Shared navigation, buttons, fields, and small explanatory labels. */
html[data-theme] :is(.site-header, .site-footer, .home-intro, .collection-bar, .recommendations) {
  border-color: var(--line);
}

html[data-theme] :is(.site-header nav > a, .footer-links a, .site-footer > a:last-child,
  .header-status, .eyebrow, .edition, .page-breadcrumb, .collection-caption,
  .card-en, .card-footer, .hero-copy > p, .card-copy p, .page-heading p,
  .section-title p, .hint, .measurement-note, .status, .stat-label,
  .field, .controls label, .filter, .rating-reference, .measurement-info) {
  color: var(--muted);
}

html[data-theme] :is(.site-header nav > a[aria-current], .site-header nav > a:hover,
  .page-breadcrumb > a, .filter.active, .filter:hover, .hero-copy h1,
  .page-heading h1, .stat-value, .record-info h3, .empty h2, .empty h3) {
  color: var(--ink);
}

html[data-theme] .hero-copy h1 > span {
  color: var(--muted-strong);
}

html[data-theme] :is(.btn, .header-cta, .toolbar-button, .test-back,
  .carousel-controls button, .site-preferences .theme-toggle, .language-setting) {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--control-border);
}

html[data-theme] :is(.btn:hover, .header-cta:hover, .toolbar-button:hover,
  .test-back:hover, .carousel-controls button:hover,
  .site-preferences .theme-toggle:hover) {
  background: var(--surface2);
  border-color: var(--muted);
}

html[data-theme] .btn-primary {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action);
}

html[data-theme] .btn-primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--on-action);
}

html[data-theme] .btn-dark {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

html[data-theme] .btn-dark:hover {
  background: var(--muted-strong);
  color: var(--bg);
}

html[data-theme] :is(.btn-ghost, .text-button) {
  background: transparent;
}

html[data-theme] :is(.text-button:hover, .footer-links a:hover, .record-score,
  .favorite-btn[aria-pressed="true"], .filter.active span) {
  color: var(--accent-text);
}

html[data-theme] :is(.toolbar-button[aria-pressed="true"], .best-pill) {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent-text);
}

html[data-theme] :is(.controls select, .field select, select.field,
  .switch-test select, .typing-controls select, .language-select, .language-select select,
  .controls input:not([type="range"]), input.field, .typing-input, .search) {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--control-border);
}

html[data-theme] :is(.search input, .search > .icon, .search > span) {
  color: var(--muted);
}

html[data-theme] .search input {
  color: var(--ink);
}

html[data-theme] .search > span {
  border-color: var(--line);
}

html[data-theme] :is(.stat-value small, .stat-value > span:not([data-speed]):not([data-accuracy]),
  .performance-stats .stat-value span, .result-number span) {
  color: var(--muted);
}

html[data-theme] :is(.pill, .record-grade, .click-analysis-tag) {
  background: var(--surface2);
  color: var(--muted-strong);
  border-color: var(--line);
}

html[data-theme] :is(.panel, .stat, .experiment-card, .record-row,
  .information-card, .guide-index, .insight-panel, .result,
  .recommend-card, .typing-analysis) {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme] :is(.experiment-card:hover, .record-row:hover, .information-card:hover) {
  border-color: var(--accent-text);
  box-shadow: 0 10px 25px #0000000a;
}

html[data-theme] :is(.recommend-card:hover, .information-card:hover, .empty,
  .page-symbol, .recommend-icon, .record-icon, .result-side) {
  background: var(--surface2);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme] :is(.favorite-btn, .card-copy h3 span, .recommend-arrow,
  .record-row > span:last-child, .preview-arrow) {
  color: var(--muted);
}

html[data-theme] :is(.card-footer, .rank-track span, .rank-note, .history-toolbar) {
  border-color: var(--line);
}

html[data-theme] :is(.record-info > small, .record-info p, .record-info h3 > span,
  .record-score small, .history-toolbar, .result-main p, .rank-note,
  .result-label, .previous-record span, .empty p,
  .test-page .recommendations .section-title h2) {
  color: var(--muted);
}

html[data-theme] :is(.result-number, .previous-record b, .result-heading h2) {
  color: var(--ink);
}

html[data-theme] .rank-track span { background: var(--surface3); }
html[data-theme] .rank-track span.lit { background: var(--accent); }

html[data-theme] #toast {
  background: var(--toast-bg);
  color: var(--toast-text);
}

/* The carousel keeps its colored illustrations, on neutral themed surfaces. */
html[data-theme] :is(.feature-preview, .card-art) {
  background-color: var(--surface2);
  border-color: var(--line);
}

html[data-theme] :is(.preview-clicks, .preview-aim, .art-clicks, .art-aim) {
  background-color: var(--art-orange);
}

html[data-theme] :is(.preview-display, .art-display, .art-reaction) {
  background-color: var(--art-blue);
}

html[data-theme] :is(.preview-mouse, .preview-microphone, .preview-reaction,
  .art-mouse, .art-microphone) {
  background-color: var(--art-green);
}

html[data-theme] :is(.preview-headphones, .art-headphones) {
  background-color: var(--art-purple);
}

html[data-theme] .feature-art {
  background-image: radial-gradient(var(--line) .8px, transparent 1px);
}

html[data-theme] :is(.feature-rings i, .preview-mouse .feature-rings i, .art-circle) {
  border-color: var(--control-border);
}

html[data-theme] :is(.feature-big-icon .icon, .preview-mouse .feature-big-icon .icon) {
  fill: var(--paper);
  stroke: var(--accent-text);
}

html[data-theme] .card-art > .icon {
  color: var(--muted-strong);
}

html[data-theme] :is(.hero-keyboard, .hero-lights) {
  background: var(--surface3);
  border-color: var(--control-border);
  box-shadow: 0 6px 0 var(--line), 0 20px 30px #0000000a;
}

html[data-theme] .hero-key {
  background: var(--key-bg);
  border-color: var(--key-edge);
  color: var(--muted-strong);
}

html[data-theme] .hero-key.pressed {
  background: var(--action);
  border-color: var(--action-hover);
  color: var(--on-action);
}

html[data-theme] :is(.hero-headphones, .hero-headphones > span) {
  color: var(--accent-text);
}

html[data-theme] :is(.carousel-controls > [data-slide-count], .card-meta > span) {
  color: var(--muted);
}

/* Dialogs inherit the active theme, including results and moved detail tables. */
html[data-theme] .workspace-dialog {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 30px 100px #00000055;
}

html[data-theme] .workspace-dialog::backdrop { background: var(--backdrop); }
html[data-theme] .dialog-heading { background: var(--paper); border-color: var(--line); }
html[data-theme] .dialog-close { background: var(--surface2); color: var(--ink); }
html[data-theme] .dialog-close:hover { background: var(--surface3); }
html[data-theme] .dialog-content > [data-details-empty] { color: var(--muted); }

/* SVG chart colors must be set independently from ordinary text colors. */
html[data-theme] :is(.insight-kicker, .insight-legend, .insight-summary,
  .insight-spark-label, .insight-table summary, .insight-table th,
  .aim-path-key, .aim-path-key b, .aim-trace.miss) {
  color: var(--muted);
}

html[data-theme] :is(.insight-summary strong, .insight-heading h3) {
  color: var(--ink);
}

html[data-theme] :is(.insight-summary, .insight-table th, .insight-table td) {
  border-color: var(--line);
}

html[data-theme] .insight-grid { stroke: var(--chart-grid); }
html[data-theme] :is(.insight-label, .insight-empty) { fill: var(--muted); }
html[data-theme] .insight-value { fill: var(--ink); }
html[data-theme] :is(.insight-slot, .insight-bar.is-future) { fill: var(--chart-empty); }
html[data-theme] :is(.insight-point, .insight-bar:not(.is-future)) { fill: var(--accent); }
html[data-theme] .insight-line { stroke: var(--accent); }
html[data-theme] .insight-area { fill: var(--accent-soft); }
html[data-theme] .insight-average { stroke: var(--blue); }
html[data-theme] .insight-summary .accuracy-key { background: var(--blue); }

/* Clicks declare their own local palette in the original component. */
html[data-theme] .click-workbench {
  --click-orange: var(--accent);
  --click-ink: var(--ink);
  --click-blue: var(--blue);
  --click-border: var(--line);
  --click-muted: var(--muted);
}

html[data-theme] :is(.click-settings > .btn, .click-telemetry, .click-arena-panel,
  .click-chart-panel, .click-analysis, .click-settings select) {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme] .click-settings select { border-color: var(--control-border); }
html[data-theme] .click-note { background: var(--surface2); border-color: var(--line); }

html[data-theme] :is(.click-reading, .click-panel-title, .click-arena-footer,
  .click-analysis-grid > div, .click-data-table, .click-data-table th, .click-data-table td) {
  border-color: var(--line);
}

html[data-theme] :is(.click-settings .field, .click-label, .click-note,
  .click-panel-title, .click-timer strong small, .click-reading small,
  .click-center-kicker, .click-center-unit, .click-center p, .click-coordinate,
  .click-arena-footer, .click-chart-readout, .click-chart-bottom,
  .click-analysis-grid span, .click-analysis-grid small, .click-data-table summary,
  .click-data-table thead, .click-method) {
  color: var(--muted);
}

html[data-theme] :is(.click-panel-title b, .click-big-number,
  .click-analysis-grid strong, .click-chart-heading h2) {
  color: var(--ink);
}

html[data-theme] :is(.primary-reading > strong, .click-live-tag,
  .is-running .click-big-number) {
  color: var(--accent-text);
}

html[data-theme] .click-workbench .click-pad {
  background-color: var(--surface2);
  background-image: radial-gradient(var(--line) .9px, transparent 1px);
  color: var(--ink);
}

html[data-theme] .click-workbench .click-pad.is-running {
  background-color: var(--accent-wash);
}

html[data-theme] .click-corners i { border-color: var(--control-border); }
html[data-theme] :is(.click-live-meter, .click-time-rail) { background: var(--surface3); }
html[data-theme] .click-timer svg { stroke: var(--muted); }
html[data-theme] .click-timer .timer-base { stroke: var(--line); }
html[data-theme] .click-timer .timer-progress { stroke: var(--accent); }
html[data-theme] .click-chart text { fill: var(--muted); }
html[data-theme] .click-chart g[data-chart-grid] > line { stroke: var(--chart-grid); }
html[data-theme] .click-chart g[data-chart-bars] > rect { fill: var(--chart-empty); }
html[data-theme] .click-chart g[data-chart-bars] > rect.current { fill: var(--accent-soft); }
html[data-theme] .click-chart g[data-chart-bars] > circle { stroke: var(--paper); }
html[data-theme] .click-chart-area { fill: var(--accent-soft); }
html[data-theme] .click-table-bar { background: var(--accent); }

/* Typing keeps its green correct and red incorrect character backgrounds. */
html[data-theme] :is(.typing-mode-tabs, .test-page .typing-controls) {
  background: var(--surface2);
  border-color: var(--line);
}

html[data-theme] .typing-mode-tabs button { color: var(--muted); }
html[data-theme] .typing-mode-tabs button:is([aria-selected="true"], [aria-pressed="true"], .active) {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 6px #00000012;
}

html[data-theme] .typing-passage {
  color: var(--muted);
  scrollbar-color: var(--control-border) var(--surface2);
}

html[data-theme] :is(.typing-word-header, [data-word-header], .typing-word-preview,
  [data-word-preview], .typing-word-preview .next-word,
  .typing-analysis > summary, .typing-mode-help, .typing-recap p) {
  color: var(--muted);
}

html[data-theme] .typing-passage .typing-caret {
  border-left-color: var(--accent-text);
  color: var(--accent-text);
}

html[data-theme] .typing-match-count { color: var(--success-text); }
html[data-theme] .typing-error-count { color: var(--danger-text); }
html[data-theme] .typing-feedback [data-composition-note] { color: var(--blue); }
html[data-theme] .typing-progress { background: var(--surface3); }

/* Physical keys keep independent seen/held states on either background. */
html[data-theme] .test-workspace .keyboard-stage {
  background: var(--surface2) !important;
  border-color: var(--line) !important;
}

html[data-theme] .keyboard-board {
  background: var(--surface3);
  border-color: var(--line);
  box-shadow: 0 5px 0 var(--line), 0 13px 20px #0000000a;
}

html[data-theme] .keyboard-key {
  background: var(--key-bg);
  color: var(--ink);
  border-color: var(--key-edge);
  box-shadow: inset 0 1px 0 #ffffff12;
}

html[data-theme] .keyboard-key.seen {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent-text);
}

html[data-theme] .keyboard-key.pressed {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action-hover);
}

html[data-theme] :is(.keyboard-coverage > div:first-child, .keyboard-legend) { color: var(--muted); }
html[data-theme] .keyboard-coverage strong { color: var(--accent-text); }
html[data-theme] .keyboard-coverage-track { background: var(--surface3); }
html[data-theme] .key-dot.seen { background: var(--accent-soft); border-color: var(--accent-text); }
html[data-theme] .key-dot.pressed { background: var(--action); border-color: var(--action); }
html[data-theme] .is-listening .keyboard-status > .status { color: var(--accent-text); }

/* Only the neutral reaction states change theme; signal colors remain fixed. */
html[data-theme] .reaction-pad:is([data-state="idle"], [data-state="done"]) {
  background: var(--surface2);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme] .reaction-pad:is([data-state="idle"], [data-state="done"]) > span:not(.reaction-orb):not(.pill) {
  color: var(--muted);
}

html[data-theme] .reaction-pad[data-state="waiting"] > span:not(.reaction-orb) { color: #6a482b; }
html[data-theme] .reaction-pad[data-state="ready"] > span:not(.reaction-orb) { color: #365526; }
html[data-theme] .reaction-pad[data-state="early"] > span:not(.reaction-orb) { color: #754437; }
html[data-theme] .reaction-pad:is([data-state="waiting"], [data-state="ready"], [data-state="early"]) .pill {
  background: #ffffff80;
  border-color: #00000030;
}

html[data-theme] .reaction-trial { background: var(--surface2); border-color: var(--line); }
html[data-theme] .reaction-trial > span { color: var(--muted); }
html[data-theme] .reaction-trial strong { color: var(--ink); }
html[data-theme] .reaction-trial.is-complete { background: var(--accent-soft); border-color: var(--accent-text); }
html[data-theme] .reaction-trial.is-complete strong { color: var(--accent-text); }

html[data-theme] .aim-stage {
  background-color: var(--surface2);
  border-color: var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
}

html[data-theme] .aim-idle { color: var(--ink); }
html[data-theme] .aim-idle > span:last-child { color: var(--muted); }

/* The charcoal mouse silhouette stays unchanged; only its surroundings adapt. */
html[data-theme] main.test-page[data-page="mouse"] .test-workspace .mouse-inspector {
  background: var(--surface2) !important;
  border-color: var(--line) !important;
}

html[data-theme] :is(.mouse-inspector-top, .mouse-inspector-footer p,
  .mouse-readings-title > span, .mouse-readout small,
  .mouse-drag-heading [data-drag], .mouse-side-note,
  .mouse-events-heading > span, .mouse-events li, .mouse-events time,
  .mouse-events .mouse-event-empty) {
  color: var(--muted);
}

html[data-theme] :is(.mouse-coverage strong, .mouse-inspector .mouse-side span,
  .mouse-inspector .mouse-side b, .mouse-readings-title h3) {
  color: var(--ink);
}

html[data-theme] :is(.mouse-readout strong, .mouse-events li b) { color: var(--accent-text); }
html[data-theme] :is(.mouse-readout, .mouse-events li) { border-color: var(--line); }
html[data-theme] .mouse-inspector .mouse-side:before { border-color: var(--control-border); }
html[data-theme] .mouse-inspector .mouse-side:after { background: var(--muted); }
html[data-theme] .mouse-inspector .mouse-side:is(.seen, .pressed) :is(span, b) { color: var(--accent-text); }

html[data-theme] .mouse-inspector-footer .pill {
  background: var(--paper);
  color: var(--muted-strong);
  border-color: var(--line);
}

html[data-theme] main.test-page[data-page="mouse"] .test-workspace .drag-track {
  background: var(--surface2);
  border-color: var(--control-border);
}

html[data-theme] .drag-track-label { color: var(--muted); }
html[data-theme] .drag-handle { background: var(--action); color: var(--on-action); border-color: var(--action-hover); }
html[data-theme] .drag-handle.dragging { background: var(--action-hover); }

html[data-theme="dark"] .mouse-inspector .mouse-outline {
  border-color: #73808b;
  box-shadow: inset 1px 1px 1px #ffffff20, inset -1px -2px 2px #131b2033,
    0 3px 0 #242b30, 0 7px 12px #00000033;
}

html[data-theme] .mouse-inspector .mouse-part.pressed:not(.mouse-side):not(.mouse-middle) :is(span, b) {
  color: #25130d;
}

/* Audio meters and playback controls, without changing signal values. */
html[data-theme] :is(.audio-stage, .microphone-stage, .recording-slot) {
  background: var(--surface2);
  border-color: var(--line);
}

html[data-theme] :is(.media-state, .recording-slot p, .mic-signal-values b,
  .mic-signal-heading > span:first-child) {
  color: var(--ink);
}

html[data-theme] :is(.recording-heading, .mic-signal-heading, .mic-signal-values, .mic-readouts) {
  color: var(--muted);
}

html[data-theme] .mic-readouts b { color: var(--accent-text); }
html[data-theme] .mic-signal-panel { background: var(--paper); border-color: var(--line); }
html[data-theme] .mic-wave-grid { stroke: var(--chart-grid); }
html[data-theme] .mic-wave-line { stroke: var(--accent); }
html[data-theme] .mic-meter { background: var(--surface3); }
html[data-theme] .mic-meter span { background: linear-gradient(90deg, var(--blue), var(--accent)); }
html[data-theme] .is-warning { color: var(--danger-text) !important; }
html[data-theme] .recording-slot audio { color-scheme: inherit; }
html[data-theme] .volume-field input { accent-color: var(--action); }

html[data-theme="dark"] .headphone-band {
  border-color: #a5afbb;
  box-shadow: inset 0 3px 0 #e7ebf1;
}

html[data-theme="dark"] .headphone-visual:not(.is-playing) .ear-cup {
  border-color: var(--control-border);
}

html[data-theme] :is(.sound-left .ear-left, .sound-right .ear-right,
  .sound-both .ear-cup, .sound-pan .ear-cup) {
  background: var(--action);
  border-color: var(--action-hover);
  color: var(--on-action);
}

/* No selectors alter display-pattern, color-chip fills or grid-guide colors. */
html[data-theme] .display-swatch {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--control-border);
}

html[data-theme] .display-swatch.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent-text);
}

html[data-theme] .display-swatch > span { border-color: var(--control-border); }
html[data-theme] .display-preview { border-color: var(--control-border); }
html[data-theme] .display-preview:fullscreen .display-fullscreen-toolbar {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--control-border);
}

/* The standalone guide, about, privacy and terms pages use the same tokens. */
html[data-theme] :is(.information-heading p, .information-section p,
  .information-section li, .information-card p, .information-table td,
  .no-script p, .site-footer .footer-links a) {
  color: var(--muted);
}

html[data-theme] .information-updated { color: var(--muted) !important; }
html[data-theme] .information-table th { background: var(--surface2); color: var(--ink); }
html[data-theme] :is(.information-section a:not(.btn), .information-page .guide-index a) {
  color: var(--accent-text);
  text-decoration-color: var(--accent-text);
}

html[data-theme] :is(.information-section a:not(.btn):hover, .information-page .guide-index a:hover) {
  color: var(--ink);
}