/* Shared appearance tokens. theme.js sets data-theme before stylesheets load. */
:root {
  --grid-line: #d9d9d2;
  --grid-major: #9ca4a0;
  --mark: #707c79;
  --marked-cell: #f1eee7;
  --on-ink: #ffffff;
  --shadow: #12232e24;
  --surface-soft: #fffaf0;
  --surface-muted: #faf7f0;
  --surface-accent: #fff9f2;
  --surface-alert: #fff6ef;
}
html[data-theme="dark"] {
  --ink: #f2eadf;
  --paper: #0f2029;
  --cream: #18333e;
  --orange: #ff7a50;
  --gold: #f2c15b;
  --muted: #9aa9aa;
  --line: #344a54;
  --grid-line: #49616b;
  --grid-major: #87999f;
  --mark: #c2cecd;
  --marked-cell: #122933;
  --on-ink: #10232c;
  --shadow: #050d1166;
  --surface-soft: #1b313b;
  --surface-muted: #182b34;
  --surface-accent: #26363a;
  --surface-alert: #342b29;
}
body.ui-ready,
body.ui-ready .modal-card,
body.ui-ready .cell,
body.ui-ready .rules-card,
body.ui-ready .rank-card { transition: background-color .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease; }
.brand-mark i { background: #fffdf8; }
.primary,
.account-button,
.auth-option,
.start-overlay button,
.pause-overlay button,
.precision-actions button:first-child,
.backend-status { color: var(--on-ink); }
input,
select { color: var(--ink); }
html[data-theme="dark"] .status-dot { box-shadow: 0 0 0 4px #24483a; }
html[data-theme="dark"] .rules-card,
html[data-theme="dark"] .rank-card { background: rgba(23, 44, 54, .72); }
html[data-theme="dark"] .rules-card,
html[data-theme="dark"] .rank-card,
html[data-theme="dark"] .help-modal p:not(.eyebrow),
html[data-theme="dark"] .clues { color: #b6c2c1; }
html[data-theme="dark"] .cell:not(.filled):hover { background: #213943; }
html[data-theme="dark"] .cell.marked::after { color: var(--mark); }
html[data-theme="dark"] .cell.wrong { background: #754437; }
html[data-theme="dark"] .track-picker a:hover,
html[data-theme="dark"] .track-picker a.active,
html[data-theme="dark"] .archive-shortcut { background: var(--surface-soft); }
html[data-theme="dark"] .start-overlay,
html[data-theme="dark"] .solved-overlay,
html[data-theme="dark"] .pause-overlay { border-color: var(--line); background: rgba(23, 44, 54, .96); box-shadow: 0 10px 28px var(--shadow); }
html[data-theme="dark"] .modal { background: rgba(3, 11, 15, .68); }
html[data-theme="dark"] .modal-card { border-color: var(--line); box-shadow: 0 24px 70px #03090d99; }
html[data-theme="dark"] .leaderboard-list .you { background: #3b382a; }
html[data-theme="dark"] .leaderboard-list .unranked-score { background: var(--surface-muted); }
html[data-theme="dark"] .result-milestone { border-color: #8e543f; background: var(--surface-alert); }
html[data-theme="dark"] .milestone { color: var(--muted); background: var(--surface-muted); }
html[data-theme="dark"] .milestone.achieved { color: var(--ink); border-color: #8e543f; background: var(--surface-accent); }
html[data-theme="dark"] .milestone-mark { background: #2a3c43; }
html[data-theme="dark"] .milestone-bar { background: #31454d; }
html[data-theme="dark"] #magic-email,
html[data-theme="dark"] #alias-input { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .account-button:hover:not(:disabled),
html[data-theme="dark"] .primary:hover,
html[data-theme="dark"] .start-overlay button:hover,
html[data-theme="dark"] .pause-overlay button:hover { background: #d9d1c6; }
html[data-theme="dark"] .info-page :is(p, li),
html[data-theme="dark"] .info-page .lede { color: #afbcbb; }
html[data-theme="dark"] .info-page .callout { background: var(--surface-soft); }
html[data-theme="dark"] .info-page .primary:hover { background: #d9d1c6; }
html[data-theme="dark"] .info-page .archive-sizes a:hover,
html[data-theme="dark"] .info-page .archive-sizes a:focus-visible { background: var(--surface-soft); }