/* Chrome theme tokens for the site shells (homepage, group pages, brand pages).
   Three states: an explicit choice stamps data-theme="light" | "dark" on <html>
   (theme.js, persisted in localStorage); "system" stamps nothing and follows
   prefers-color-scheme. Only the app chrome changes — brand samples (swatches,
   logo tiles, combos, component scenes) keep the brand's own grounds.
   The <design-system> embed carries the same palette inside its shadow root
   (embed.js STYLES) and mirrors <html data-theme> onto its host, so shell and
   embed always agree. Keep the two palettes in sync. */
:root {
  color-scheme: light;
  --ds-page: #fafafa;
  --ds-panel: #ffffff;
  --ds-panel-2: #f5f5f5;
  --ds-text: #111111;
  --ds-text-2: #444444;
  --ds-text-3: #666666;
  --ds-text-4: #999999;
  --ds-line: #eeeeee;
  --ds-line-2: #e2e2e2;
  --ds-accent: #6f45f4;
  --ds-accent-soft: #efeafe;
  --ds-accent-line: #c8c0f2;
  --ds-ok: #0a7d33;
  --ds-ok-bg: #e3f6e9;
  --ds-warn: #9a6b00;
  --ds-warn-bg: #fdf0d0;
  --ds-bad: #b42323;
  --ds-bad-bg: #fdecec;
  --ds-bad-line: #f2b8b8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ds-page: #121316;
    --ds-panel: #1b1c21;
    --ds-panel-2: #23242b;
    --ds-text: #ececf1;
    --ds-text-2: #c9cad2;
    --ds-text-3: #9a9ba6;
    --ds-text-4: #6f707b;
    --ds-line: #2a2b33;
    --ds-line-2: #33343d;
    --ds-accent: #a68cff;
    --ds-accent-soft: #2a2350;
    --ds-accent-line: #4a3f8a;
    --ds-ok: #6fd39a;
    --ds-ok-bg: #143323;
    --ds-warn: #e8c46a;
    --ds-warn-bg: #3a2e10;
    --ds-bad: #ff8a8a;
    --ds-bad-bg: #3d1a1a;
    --ds-bad-line: #6b2b2b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-page: #121316;
  --ds-panel: #1b1c21;
  --ds-panel-2: #23242b;
  --ds-text: #ececf1;
  --ds-text-2: #c9cad2;
  --ds-text-3: #9a9ba6;
  --ds-text-4: #6f707b;
  --ds-line: #2a2b33;
  --ds-line-2: #33343d;
  --ds-accent: #a68cff;
  --ds-accent-soft: #2a2350;
  --ds-accent-line: #4a3f8a;
  --ds-ok: #6fd39a;
  --ds-ok-bg: #143323;
  --ds-warn: #e8c46a;
  --ds-warn-bg: #3a2e10;
  --ds-bad: #ff8a8a;
  --ds-bad-bg: #3d1a1a;
  --ds-bad-line: #6b2b2b;
}

/* The three-way switch rendered by theme.js; sits in every page header. */
theme-toggle { float: right; margin-left: 16px; }