/* KCL-AI theme tokens. One variable set per theme.
   html/body.ui-theme-* switches the set; surfaces consume only these names. */

:root,
html.ui-theme-black-red,
body.ui-theme-black-red {
  --bg-body: #141414;
  --bg-sidebar: #0a0a0a;
  --bg-topnav: #101010;
  --bg-panel: #1c1c1c;
  --bg-panel-2: #181818;
  --bg-grid: #121212;
  --bg-grid-alt: #1a1a1a;
  --bg-grid-head: #0a0a0a;
  --bg-card: #1a1a1a;
  --bg-input: #141414;
  --bg-hover: #1a0608;
  --bg-button: #DF141A;
  --bg-button-hover: #A01016;
  --bg-filter: #121212;
  --text-primary: #e8edf2;
  --text-muted: #9aa3ad;
  --text-link: #e8edf2;
  --text-button: #111111;
  --accent: #DF141A;
  --accent-red: #DF141A;
  --accent-dim: #A01016;
  --border: #DF141A;
  --border-grid: #2a1214;
}

html.ui-theme-two-tone-blue,
body.ui-theme-two-tone-blue,
html.ui-theme-blue-gray,
body.ui-theme-blue-gray {
  --bg-body: #293b4d;
  --bg-sidebar: #1c2c3d;
  --bg-topnav: #182432;
  --bg-panel: #182432;
  --bg-panel-2: #16202a;
  --bg-grid: #1d2c3d;
  --bg-grid-alt: #243549;
  --bg-grid-head: #16202a;
  --bg-card: #75cfcf;
  --bg-input: #182432;
  --bg-hover: #243549;
  --bg-button: #4c96e0;
  --bg-button-hover: #3a80c7;
  --bg-filter: #1c2c3d;
  --text-primary: #ffffff;
  --text-muted: #b8d4ea;
  --text-link: #ffffff;
  --text-button: #ffffff;
  --accent: #4c96e0;
  --accent-red: #4c96e0;
  --accent-dim: #3a80c7;
  --border: #2a3c4e;
  --border-grid: #182432;
}

html.ui-theme-dark,
body.ui-theme-dark {
  --bg-body: #050505;
  --bg-sidebar: #000000;
  --bg-topnav: #000000;
  --bg-panel: #0e0e0e;
  --bg-panel-2: #0a0a0a;
  --bg-grid: #0a0a0a;
  --bg-grid-alt: #101010;
  --bg-grid-head: #000000;
  --bg-card: #0e0e0e;
  --bg-input: #0a0a0a;
  --bg-hover: #141414;
  --bg-button: #141414;
  --bg-button-hover: #1c1c1c;
  --bg-filter: #0a0a0a;
  --text-primary: #e6e6e6;
  --text-muted: #8a8a8a;
  --text-link: #e6e6e6;
  --text-button: #eeeeee;
  --accent: #3a3a3a;
  --accent-red: #DF141A;
  --accent-dim: #6B0B0E;
  --border: #1c1c1c;
  --border-grid: #1c1c1c;
}

/* Back-compat aliases used by kcl-ai-theme.css / Watchtower */
html[class*="ui-theme-"],
body[class*="ui-theme-"],
:root {
  --kcl-bg: var(--bg-body);
  --kcl-bg-2: var(--bg-topnav);
  --kcl-panel: var(--bg-panel);
  --kcl-panel-2: var(--bg-panel-2);
  --kcl-line: var(--border);
  --kcl-lime: var(--accent);
  --kcl-lime-dim: var(--accent-dim);
  --kcl-text: var(--text-primary);
  --kcl-muted: var(--text-muted);
  --kcl-sidebar: var(--bg-sidebar);
  --kcl-hover: var(--bg-hover);
  --kcl-accent: var(--accent-red);
  --kcl-accent-dim: var(--accent-dim);
  --grid-bg: var(--bg-grid);
  --grid-row: var(--bg-grid);
  --grid-alt: var(--bg-grid-alt);
  --grid-head: var(--bg-grid-head);
  --grid-line: var(--border-grid);
}