/* The dark theme, without changing the existing light design. `theme.js` stamps `data-theme` before
   paint from the system setting, or from the footer dot once it has been used (Jan, 2026-09-23). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f7f6f1;
  --body: #e7e5df;
  --muted: #c7c5bf;
  --line: #8d8e89;
  --hair: #40403f;
  --surface-rest: #252525;
  --paper: #2b2b2a;
  --surface-hover: #3a3a39;
  --green: #8aa03d;
  --amber: #deb624;
  --hover: #fff;
  background: #1a1a19;
  scrollbar-color: var(--green) #1a1a19;
}
[data-theme="dark"] ::selection { background: var(--green); color: #1a1a19; }
[data-theme="dark"] :is(.subhead, .subsection-title) { color: #e1dfd9; }
[data-theme="dark"] .logo-box img { filter: brightness(0) invert(1); }
[data-theme="dark"] .btn { --arrow-color: #fff; color: #fff; }
[data-theme="dark"] .btn.outline { background: #1a1a19; color: var(--ink); }
[data-theme="dark"] .btn.neutral { background: var(--line); border-color: var(--line); color: #1a1a19; --arrow-color: #1a1a19; }
[data-theme="dark"] .btn:is(:hover, :focus-visible),
[data-theme="dark"] .btn:is(.outline, .neutral):is(:hover, :focus-visible) {
  --arrow-color: #1a1a19;
  border-color: #fff;
  color: #1a1a19;
}

/* The pale map artwork should barely register against charcoal. */
[data-theme="dark"] .cursor-ground { opacity: .06; }
[data-theme="dark"] .cf-field { opacity: .08; }
[data-theme="dark"] .cf-pin circle { fill: var(--paper); }
[data-theme="dark"] .dot { box-shadow: 0 0 0 2px #1a1a19; }
[data-theme="dark"] :is(.curve-switch, .skip-link) { background: #1a1a19; color: var(--ink); }
[data-theme="dark"] :is(.field input, .field textarea)::placeholder { color: var(--muted); }
[data-theme="dark"] .form-note.is-error { color: #ef9e90; }