/*
 * Design tokens. Every colour, radius and type family in the game resolves
 * to one of these, in both themes. Add a token before adding a literal.
 *
 * The game is printed on thermal receipts: --paper is the counter, --surface
 * is the receipt, and the accent is ink itself, so "highlighted" means
 * printed in reverse rather than tinted.
 */
:root {
  color-scheme: light;
  --font-sans: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --track-caps: .06em;
  --track-tight: -.02em;
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;

  --paper: #e2ded3;
  --surface: #fbf9f2;
  --surface-2: #f1eee5;
  --ink: #191815;
  --ink-2: #47453e;
  --ink-3: #625f56;
  --line: #d3cec1;
  --line-strong: #a19c8f;

  --accent: #191815;
  --accent-soft: #ebe7dc;
  --accent-line: #191815;
  --accent-strong: #191815;
  --accent-ink: #fbf9f2;

  --purple-soft: #eeebee; --purple-line: #d5d0d6; --purple-text: #5a4a66;
  --warm-soft: #f3ece1;   --warm-line: #ddd0bd;   --warm-text: #6e5130;
  --teal-soft: #e8ede9;   --teal-line: #ccd6cf;   --teal-text: #35584f;
  --red-soft: #f6e4de;    --red-line: #e2b9ad;    --red-text: #a3301c;

  --shadow-sm: 0 1px 2px #19181514;
  --shadow-md: 0 10px 30px #1918151f;
  --scrim: #19181566;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --paper: #0d0d0c;
  --surface: #1c1b18;
  --surface-2: #25241f;
  --ink: #ece7da;
  --ink-2: #b8b3a6;
  --ink-3: #928d81;
  --line: #34322c;
  --line-strong: #4d4a42;

  --accent: #ece7da;
  --accent-soft: #2c2a25;
  --accent-line: #ece7da;
  --accent-strong: #ece7da;
  --accent-ink: #1c1b18;

  --purple-soft: #26232a; --purple-line: #463f4d; --purple-text: #c6b9d4;
  --warm-soft: #2a241c;   --warm-line: #54452f;   --warm-text: #dcbf98;
  --teal-soft: #1d2522;   --teal-line: #384a43;   --teal-text: #a6c6bc;
  --red-soft: #33201b;    --red-line: #6a3426;    --red-text: #f09a85;

  --shadow-sm: 0 1px 2px #00000059;
  --shadow-md: 0 12px 34px #00000080;
  --scrim: #050504c4;
}
/* Older names, still read by the static guide and About page. */
:root {
  --theme-paper: var(--paper);
  --theme-surface: var(--surface);
  --theme-text: var(--ink);
  --theme-muted: var(--ink-2);
  --theme-border: var(--line-strong);
  --theme-accent: var(--accent);
  background: var(--paper);
  color: var(--ink);
}
.appearance-setting { margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);min-inline-size:0; }
.appearance-setting legend { font-size:12px;padding:0 5px; }
.theme-choices { display:flex;flex-wrap:wrap;gap:7px; }
.theme-choices button { flex:1;min-height:44px;min-width:75px;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;background:var(--surface);font-size:13px; }
.theme-choices button[aria-pressed=true] { border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent-line); }
.appearance-setting p { margin:10px 0 0;font-size:12px;line-height:1.7;color:var(--ink-2); }
@media(prefers-reduced-motion:no-preference) { .theme-choices button { transition:background-color .15s; } }