/* ETTI semantic theme tokens.
 *
 * This layer contains declarations only. Component geometry and media/game
 * paint remain in their owning stylesheets so a theme change cannot alter
 * content pixels or selector specificity.
 */

:root {
  color-scheme: dark;
  --bg: #0f1115;
  --bg-raised: #171a21;
  --bg-inset: #0b0d11;
  --border: #262b36;
  --text: #e8eaf0;
  --text-muted: #9aa3b2;
  --muted: #9aa3b2;
  --fg: #e8eaf0;
  --surface: #1a1d24;
  --syntax-keyword: #c792ea;
  --syntax-string: #a8d88a;
  --syntax-comment: #9aa3b2;
  --syntax-heading: #66b3ff;
  --player-one: #63a9ff;
  --player-two: #df925d;
  --player-three: #70c999;
  --player-four: #c49afa;
  --player-five: #ef91bb;
  --accent: #4f8cff;
  --on-accent: #071426;
  --danger: #ff5d5d;
  --danger-surface: #241417;
  --danger-text: #ffd7d7;
  --ok: #3ecf8e;
  --warn: #ffb454;
  --warn-surface: #1f1a0e;
  --warn-text: #ffe7a8;
  --perform: #f28c28;
  --state-neutral-surface: #2a3040;
  --state-neutral-text: #c5cedc;
  --state-info-surface: #16324f;
  --state-info-text: #7ab8ff;
  --state-warn-surface: #46351a;
  --state-warn-text: #ffcf72;
  --state-success-surface: #143528;
  --state-success-text: #8bf0bd;
  --state-danger-surface: #3c1d1d;
  --state-danger-text: #ff9a9a;
  --feedback-active-surface: #1e3a5f;
  --feedback-active-text: #dbeafe;
  --proc-text: #9fd48a;
  --proc-done: #6ea8fe;
  --proc-failed: #ff8484;
  --health-ok: #9fd48a;
  --surface-2: rgba(255, 255, 255, 0.08);
  --viewer-stage-bg: #07090e;
  --viewer-rail-bg: #0e121c;
  --viewer-rail-label-bg: rgba(0, 0, 0, 0.62);
  --viewer-control-bg: rgba(0, 0, 0, 0.55);
  --viewer-control-text: #fff;
  --viewer-placeholder: #a5afbf;
  --viewer-badge-bg: rgba(10, 12, 18, 0.72);
  --viewer-badge-text: #e8eaf0;
}

/* Palette accents preserve semantic warning/error/success meaning. Media and
   emulator pixels remain untouched; only application chrome is themed. */
:root[data-palette="red"] {
  --bg: #210b12; --bg-raised: #32121c; --bg-inset: #18070d;
  --surface: #3b1522; --surface-2: #ffbbc111; --border: #763447;
  --text: #fff0f3; --fg: #fff0f3; --text-muted: #deb9c3; --muted: #deb9c3;
  --accent: #ff8399; --on-accent: #30000d;
  --feedback-active-surface: #661d33; --feedback-active-text: #fff0f3;
  --viewer-stage-bg: #14060b; --viewer-rail-bg: #250c14;
  --syntax-heading: #ffafc0;
}
:root[data-palette="republic"] {
  --bg: #100d10; --bg-raised: #20191d; --bg-inset: #080709;
  --surface: #2b2027; --surface-2: #ffffff0e; --border: #72505c;
  --text: #ffffff; --fg: #ffffff; --text-muted: #d1bbc5; --muted: #d1bbc5;
  --accent: #ff667b; --on-accent: #210008;
  --feedback-active-surface: #611426; --feedback-active-text: #ffffff;
  --viewer-stage-bg: #080709; --viewer-rail-bg: #1c1117;
  --syntax-heading: #ffabb7;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --bg-raised: #ffffff;
  --bg-inset: #e8e8ed;
  --border: #c7c7cc;
  --text: #1d1d1f;
  --text-muted: #5f6368;
  --muted: #5f6368;
  --fg: #1d1d1f;
  --surface: #f0f1f4;
  --syntax-keyword: #6b21a8;
  --syntax-string: #216b30;
  --syntax-comment: #58616d;
  --syntax-heading: #175bba;
  --player-one: #175bba;
  --player-two: #96411a;
  --player-three: #1a6b3f;
  --player-four: #762fb0;
  --player-five: #aa265d;
  --accent: #2563eb;
  --on-accent: #fff;
  --danger: #b42318;
  --danger-surface: #fff1f2;
  --danger-text: #7f1d1d;
  --ok: #15803d;
  --warn: #a16207;
  --warn-surface: #fff7d6;
  --warn-text: #4a3200;
  --perform: #c2410c;
  --state-neutral-surface: #e5e7eb;
  --state-neutral-text: #374151;
  --state-info-surface: #dbeafe;
  --state-info-text: #1d4ed8;
  --state-warn-surface: #fef3c7;
  --state-warn-text: #92400e;
  --state-success-surface: #dcfce7;
  --state-success-text: #166534;
  --state-danger-surface: #fee2e2;
  --state-danger-text: #991b1b;
  --feedback-active-surface: #eff6ff;
  --feedback-active-text: #1d4ed8;
  --proc-text: #166534;
  --proc-done: #2563eb;
  --proc-failed: #dc2626;
  --health-ok: #166534;
  --surface-2: rgba(0, 0, 0, 0.06);
  --viewer-stage-bg: #eef0f4;
  --viewer-rail-bg: #ffffff;
  --viewer-rail-label-bg: rgba(255, 255, 255, 0.9);
  --viewer-control-bg: rgba(255, 255, 255, 0.94);
  --viewer-control-text: #1d1d1f;
  --viewer-placeholder: #5f6878;
  --viewer-badge-bg: rgba(255, 255, 255, 0.94);
  --viewer-badge-text: #1d1d1f;
}