/* Neutral application chrome, shared by the library, player controls and Studio. */
:root {
  color-scheme: dark;
  --ink: #ededed;
  --muted: #b0b0b0;
  --night: #151515;
  --panel: #202020;
  --panel-strong: #2b2b2b;
  --panel-raised: #303030;
  --line: #494949;
  --control-line: #777777;
  --inset: #191919;
  --moss: #dedede;
  --moss-bright: #ffffff;
  --moss-dark: #858585;
  --on-accent: #191919;
  --ui-focus: #ffffff;
  --soft-highlight: #ffffff0d;
  --selected: #ffffff14;
  --selection-line: #888888;
  --danger: #ffaaa3;
  --red: #ffaaa3;
  --amber: #e4c07a;
  --blue: #a7c5ed;
  --violet: #cbb2e6;
  --ui-shadow: 0 12px 36px #0003;
  background: var(--night);
  color: var(--ink);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #242424;
  --muted: #606060;
  --night: #f5f5f5;
  --panel: #ffffff;
  --panel-strong: #eeeeee;
  --panel-raised: #e7e7e7;
  --line: #cdcdcd;
  --control-line: #858585;
  --inset: #fafafa;
  --moss: #303030;
  --moss-bright: #151515;
  --moss-dark: #737373;
  --on-accent: #ffffff;
  --ui-focus: #242424;
  --soft-highlight: #00000006;
  --selected: #0000000a;
  --selection-line: #777777;
  --danger: #a62c27;
  --red: #a62c27;
  --amber: #805800;
  --blue: #285d9d;
  --violet: #754399;
  --ui-shadow: 0 12px 36px #00000012;
}
body { --control-line: inherit; --inset: inherit; color: var(--ink); }
/* Softer stone surfaces keep a long play session from becoming a wall of white. */
:root[data-theme="light"] .player-app:has(#game:not(.hidden)) {
  --ink: #292824;
  --muted: #55534d;
  --night: #bdb9b0;
  --panel: #e4e1da;
  --panel-strong: #d2cec4;
  --panel-raised: #ccc8be;
  --line: #aba69b;
  --control-line: #79756c;
  --inset: #d4d0c7;
  --moss: #383a33;
  --moss-bright: #252720;
  --on-accent: #f0eee8;
  --ui-focus: #292824;
  --soft-highlight: #2928240a;
  --selected: #29282412;
  --selection-line: #79756c;
}
:root[data-theme="light"] .player-app .game > header {
  background: var(--panel-strong);
}
@media (min-width: 901px) {
  :root[data-theme="light"] .player-app .game > header {
    padding: .75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
  }
}
::selection { background: var(--moss); color: var(--on-accent); }
.skip-link { background: var(--moss); color: var(--on-accent); }

/* A native keyboard-operable switch; the accessible label stays the same in both modes. */
:is(.player-app, .studio-app) button.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .5rem .65rem; white-space: nowrap;
  color: var(--ink); background: var(--panel); border: 1px solid var(--control-line);
  border-radius: 6px; font: 500 .75rem/1.2 system-ui, sans-serif;
}
.theme-toggle::before {
  content: ""; width: 1.75rem; height: 1rem; flex: 0 0 auto; border-radius: 1rem;
  border: 1px solid var(--control-line);
  background: radial-gradient(circle at .45rem 50%, var(--muted) .28rem, transparent .3rem), var(--inset);
}
.theme-toggle[aria-checked="true"]::before {
  background: radial-gradient(circle at 1.2rem 50%, var(--on-accent) .28rem, transparent .3rem), var(--moss);
}
.theme-toggle:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }

/* Shared controls and dialogs use the same foreground/background pairs in either mode. */
:is(.player-app, .studio-app) :is(input, select, textarea) {
  color: var(--ink); background-color: var(--inset); border-color: var(--control-line);
}
:is(.player-app, .studio-app) :is(dialog, .dialog-card, .profile-dialog) {
  color: var(--ink); background: var(--panel); border-color: var(--line);
}
button, .button { color: var(--on-accent); }
:is(.player-app, .studio-app) :is(.error, .diagnostic.error, button.danger) { color: var(--danger); }
.player-app :is(.profile-summary, .credit-store, .credit-package, .game-menu-dialog) { background: var(--panel); }
.player-app :is(.class-copy, .credit-package p, .membership-terms, .store-note, .speech-context, .save-status) { color: var(--muted); }
.player-app .entry-primary, .studio-app .component-heading span { color: var(--on-accent); background: var(--moss); }
.studio-app .block-label { color: var(--on-accent); background: var(--moss); }
.studio-app .actor-overview { background: var(--panel); }
.studio-app :is(.modification-field > span, .modification-checkbox, .scope-options label) { color: var(--muted); }

/* Keep readable UI surfaces over adventure art, without recoloring the art itself. */
.player-app :is(.room-panel, .character-panel, .chat-panel),
.studio-app .room-preview-mode :is(.room-panel, .modification-panel, .room-board) {
  background: color-mix(in srgb, var(--panel) 96%, transparent); color: var(--ink);
}
@media (max-width: 900px) {
  .studio-app .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .studio-app .room-preview-game-header .theme-toggle { grid-column: 2; justify-self: start; }
}

.player-app :is(.dialogue, .subject-event-name, .summary-event-name, .prologue-text,
  .help-intro, .help-description, .character-item-summary, .character-spell-summary,
  .decision-panel p, .wild-shape-current, .check-consequence) { color: var(--ink); }
.player-app :is(.subject-event-detail, .summary-event-detail, .help-command-label) { color: var(--muted); }
:root[data-theme="light"] .player-app :is(.current-room-description, .character-list-item,
  .character-copy, .character-spell-description) { color: var(--ink); }
.player-app :is(.check-card, .combat-replay-event, .decision-panel, .study-lore-recap) {
  color: var(--ink); background: var(--panel); border-color: var(--line);
}
.player-app :is(.speech, .speech-portrait, .check-action, .check-action-badge) { border-color: var(--line); }
.player-app :is(.check-outcome.success, .check-outcome.rolled, .combat-outcome.hit, .combat-outcome.miss) {
  color: var(--ink); background: var(--selected); border-color: var(--line);
}
.player-app :is(.check-outcome.failure, .combat-damage, .check-consequence.damage .check-consequence-text) { color: var(--danger); }
.player-app :is(.check-consequence.alarm .check-consequence-text, .check-consequence-defeated, .combat-defeated) { color: var(--amber); }
.player-app .combat-replay-open { color: var(--on-accent); background: var(--moss); border-color: var(--control-line); }

/* The Blueprint editor can share these tokens when its feature PR lands. */
.studio-app .blueprint-map { background: var(--inset); border-color: var(--line); }
.studio-app .blueprint-map p { color: var(--muted); }
.studio-app .blueprint-wire { stroke: var(--muted); }
.studio-app .blueprint-node rect { fill: var(--panel-raised); stroke: var(--control-line); }
.studio-app .blueprint-node text, .studio-app .blueprint-port-label { fill: var(--ink); }
.studio-app .blueprint-node:focus rect, .studio-app .blueprint-node:hover rect { stroke: var(--ui-focus); }
.studio-app :is(.blueprint-condition, .blueprint-port) { border-color: var(--control-line); }