/* Shared demo theme layer — loaded by BOTH chromes (suite + panels).
   The shells paint everything off the :root palette below, so dark mode is
   mostly a variable swap; the handful of literal-colored elements get
   targeted overrides. The app iframes theme themselves (the fake bridges
   read plugio-demo:theme and pin html[data-color-mode]). */

.demo-theme {
  border: 1px solid rgba(255, 255, 255, .25); background: none; color: #cfd6dd;
  width: 30px; height: 27px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer; padding: 0; margin-right: 8px;
}
.demo-theme:hover { background: rgba(255, 255, 255, .08); color: #fff; }

html[data-theme="dark"] {
  --n900: #dee4ea; --n700: #b6c2cf; --n500: #8696a7; --n300: #3c444c;
  --n200: #2c333a; --n100: #282e33; --n0: #22272b;
  --b400: #579dff; --b300: #579dff; --b50: #1c2b41;
  --shell-bg: #1d2125; --shell-fg: var(--n900);
  --side-bg: #1d2125; --border: #3c444c;
  --content-bg: #161a1d; --card-bg: #22272b;
  --hover: #2c333a; --active-bg: #1c2b41; --active-fg: #579dff;
}
html[data-theme="dark"] body { background: var(--shell-bg); }

/* literal-colored bits that the palette swap doesn't reach */
html[data-theme="dark"] .lozenge.done { background: #1c3329; color: #7ee2b8; }
html[data-theme="dark"] .lozenge.indeterminate { background: #123263; color: #85b8ff; }
html[data-theme="dark"] .lozenge.new { background: #303a47; color: #b6c2cf; }
html[data-theme="dark"] .activity-tabs .atab.on,
html[data-theme="dark"] .ap-chip.on { border-color: #123f7a; }
html[data-theme="dark"] .edit-banner { background: #2b273f; }
html[data-theme="dark"] .edit-banner .eb-icon { color: #b8acf6; }
html[data-theme="dark"] .dh-btn.primary,
html[data-theme="dark"] .ap-add { color: #1d2125; }