/* Dark theme. theme.js sets data-theme before first paint, from the saved
   choice or the device setting; every color in app.css reads these tokens. */
:root[data-theme="dark"] {
  /* Warm graphite and paper-white ink: no blue-tinted greys, no glow. */
  color-scheme: dark;
  --ink: #ece8e0; --ink-soft: #d2cdc3; --text-2: #b1aa9e; --muted: #948e83; --muted-2: #948e83; --faint: #736e65; --axis: #5e5951;
  --blue: #74a0f4; --blue-dark: #94b6f7; --accent: #2f6ad9; --accent-hover: #3b78e8; --on-accent: #fff;
  --inverse: #ece8e0; --inverse-hover: #fff; --on-inverse: #161513;
  --line: #2b2926; --line-soft: #22201e; --line-strong: #3a3732;
  --paper: #121110; --surface: #1a1917; --surface-soft: #1f1e1b; --tint: #211f1c; --tint-strong: #2b2925; --tint-line: #34312c; --tint-line-strong: #45413a;
  --grid: #201e1c; --dot-used: #6b6559; --focus: #74a0f4;
  --green: #66c29a; --green-strong: #82cfac; --green-tint: #16221c; --green-line: #284234;
  --rose: #dc9ea6; --rose-strong: #eea3ae; --rose-tint: #291c1d;
  --backdrop: #000000b3;
}
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); }
dialog { background: var(--surface); }
input { background: var(--surface); }
[data-theme="dark"] .drawing-card,
[data-theme="dark"] .clues-card,
[data-theme="dark"] .button-primary { box-shadow: none; }
[data-theme="dark"] .button-outline:hover { background: var(--tint); }
[data-theme="dark"] .archive-row:hover { background: var(--surface-soft); }
[data-theme="dark"] .toast { box-shadow: 0 8px 30px #0008; }
[data-theme="dark"] .cookie-banner { box-shadow: 0 10px 50px #0009; }
[data-theme="dark"] input::placeholder { color: var(--faint); }

/* Short cross-fade only when the visitor switches themes, never on load. */
@media (prefers-reduced-motion: no-preference) {
  .theme-switching, .theme-switching * { transition: background-color .2s, border-color .2s, color .2s, fill .2s, stroke .2s !important; }
}