/* Activity theme tokens (hub + shared chrome). Game modules may add more vars. */

:root,
:root[data-theme='light-slate'],
:root[data-theme='light'] {
  color-scheme: light;
  --ink: #1c2430;
  --muted: #5a6573;
  --panel: #e8eef5;
  --panel-edge: #9aa8b8;
  --line: #9aa8b8;
  --stage: #d7dde5;
  --stage-glow: #f4f7fb;
  --chip: #f4f7fb;
  --chip-hover: #ffffff;
  --accent: #3d6a96;
  --accent-fill: #5b8ec0;
  --accent-text: #2f5f8f;
  --accent-ink: #f4f7fb;
}

:root[data-theme='light-paper'] {
  color-scheme: light;
  --ink: #2a2a2a;
  --muted: #6e6a64;
  --panel: #f3f1ec;
  --panel-edge: #cfc8bc;
  --line: #cfc8bc;
  --stage: #e4e0d8;
  --stage-glow: #faf8f4;
  --chip: #faf8f4;
  --chip-hover: #ffffff;
  --accent: #5a6b4f;
  --accent-fill: #6f8262;
  --accent-text: #4a5a40;
  --accent-ink: #faf8f4;
}

:root[data-theme='light-mint'] {
  color-scheme: light;
  --ink: #1e2f2c;
  --muted: #5a736d;
  --panel: #e7f2ef;
  --panel-edge: #9bb8b0;
  --line: #9bb8b0;
  --stage: #d3e5e0;
  --stage-glow: #f2faf7;
  --chip: #f2faf7;
  --chip-hover: #ffffff;
  --accent: #2f7a6b;
  --accent-fill: #3d9583;
  --accent-text: #246457;
  --accent-ink: #f2faf7;
}

:root[data-theme='dark-slate'],
:root[data-theme='dark'] {
  color-scheme: dark;
  --ink: #e8eef5;
  --muted: #9aa8b8;
  --panel: #2a3340;
  --panel-edge: #4a5563;
  --line: #4a5563;
  --stage: #1a2028;
  --stage-glow: #2a3340;
  --chip: #343e4c;
  --chip-hover: #3e4a5a;
  --accent: #7eb0d8;
  --accent-fill: #4a7ab0;
  --accent-text: #9ec8ea;
  --accent-ink: #1a2028;
}

:root[data-theme='dark-midnight'] {
  color-scheme: dark;
  --ink: #e6eefc;
  --muted: #8fa0c0;
  --panel: #1b2438;
  --panel-edge: #3a4a6a;
  --line: #3a4a6a;
  --stage: #0f1524;
  --stage-glow: #1b2438;
  --chip: #243049;
  --chip-hover: #2d3b58;
  --accent: #8fb4ff;
  --accent-fill: #4d6fbf;
  --accent-text: #a8c4ff;
  --accent-ink: #0f1524;
}

:root[data-theme='dark-ember'] {
  color-scheme: dark;
  --ink: #f3ebe4;
  --muted: #b5a79c;
  --panel: #2c2622;
  --panel-edge: #56483e;
  --line: #56483e;
  --stage: #1a1613;
  --stage-glow: #2c2622;
  --chip: #3a322c;
  --chip-hover: #463c35;
  --accent: #e0a878;
  --accent-fill: #b07545;
  --accent-text: #e8b98a;
  --accent-ink: #1a1613;
}

body {
  background: var(--stage);
  color: var(--ink);
}

.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.theme-picker select {
  max-width: 11rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  background: var(--chip);
  color: var(--ink);
}