/* Themes: Normal (the site's default look), Light and Dark. Only colour tokens change. */
:root { color-scheme: light; --result-bg: #14213d; --result-ink: #fbfcfd; --result-sub: #9db0cf; }
:root[data-theme="light"] {
  --bg: #ffffff; --surface: #f5f7fa; --ink: #101828; --muted: #667085; --line: #e4e7ec;
  --accent: #2f5bea; --accent-soft: #e6ecff; --untyped: #b8c1d0;
  --result-bg: #101828; --result-ink: #ffffff; --result-sub: #9aa6bd;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1424; --surface: #161e33; --ink: #e8edf7; --muted: #93a1ba; --line: #26314d;
  --accent: #5f81f5; --accent-soft: #222f57; --error: #ff6b94; --untyped: #4b5a78;
  --result-bg: #1f2c52; --result-ink: #f2f5fb; --result-sub: #9db0cf;
}
.test-result { background: var(--result-bg); color: var(--result-ink); }
.result-grid span { color: var(--result-sub); }
:root[data-theme="dark"] .typing-panel { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7); }
body, .typing-panel, .test-settings, .restart-button, .history-table, .simple-list { transition: background-color .25s, border-color .25s, color .25s; }

/* Theme switcher */
.header-tools { display: flex; align-items: center; gap: 6px; }
.theme-wrap { position: relative; }
.theme-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.theme-button:hover { border-color: var(--ink); }
.theme-button svg, .theme-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 172px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(20, 33, 61, .5); }
.theme-menu[hidden] { display: none; }
.theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: transparent; border: 0; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--muted); text-align: left; cursor: pointer; }
.theme-option:hover { background: var(--accent-soft); color: var(--ink); }
.theme-option[aria-checked="true"] { color: var(--ink); }
.theme-option .check { margin-left: auto; color: var(--accent); opacity: 0; }
.theme-option[aria-checked="true"] .check { opacity: 1; }
.theme-icon { display: grid; place-items: center; }