@phenx-inc/ctlsurf 0.14.2 → 0.15.0

package/src/renderer/styles.css

@@ -1,3 +1,273 @@
+/* ─────────────────────────────────────────────────────────────
+   Theme tokens
+
+   Every colour in this file resolves through one of these. `:root` holds
+   Tokyo Night and doubles as the fallback, so anything that renders before
+   the theme attribute lands still gets a full palette. Each additional
+   scheme is a `[data-theme='<id>']` block whose id must match an entry in
+   lib/themes.ts — that module owns the parts CSS cannot reach (the xterm
+   canvas palette, Monaco, and the picker swatches). `data-theme` is stamped
+   on <html> by the pre-paint script in index.html and kept in sync by
+   lib/theme.ts.
+
+   Adding a scheme means: one block here + one entry in lib/themes.ts.
+
+   Names are roles, not shades — "well" is deeper than "app" in dark and
+   *lighter* in light, which is exactly why the old literals could not be
+   flipped mechanically.
+   ───────────────────────────────────────────────────────────── */
+
+:root,
+:root[data-theme='tokyo-night'] {
+  color-scheme: dark;
+
+  /* Surfaces, roughly back-to-front */
+  --bg-app: #1a1b26;          /* window/page background */
+  --bg-chrome: #16161e;       /* title bar, tab strips, status bar, menus */
+  --bg-raised: #1f2335;       /* dialogs, popovers, toasts */
+  --bg-surface: #2a2b3d;      /* button and control fills, dividers */
+  --bg-surface-hi: #343650;   /* hover on --bg-surface */
+  --bg-chrome-hi: #1a1b2e;    /* hover on --bg-chrome rows */
+  --bg-well: #15161f;         /* inputs, cards — sunken in dark, raised in light */
+  --bg-well-hi: #181a26;      /* hover on --bg-well */
+  --bg-inset-hi: #1b2030;     /* hover on a transparent inset action */
+  --bg-selected: #2a2f4a;     /* selected segment in a segmented control */
+  --bg-chip: #262a3f;         /* count badges */
+  --bg-chip-soft: #1c1e2b;    /* inline fact pills */
+  --bg-editor: #1e1e2e;       /* Monaco backdrop — matches its own theme */
+
+  /* Borders */
+  --border: #3b3d57;          /* default: dialogs, inputs, buttons */
+  --border-subtle: #2a2b3d;   /* panel separators, header rules */
+  --border-well: #262a3f;     /* card outlines */
+  --border-strong: #565f89;   /* hover/emphasis borders */
+  --border-dim: #414868;      /* terminal chrome, context menus */
+  --border-hover: #3d425f;    /* card hover outline */
+
+  /* Text */
+  --text: #a9b1d6;            /* body */
+  --text-bright: #c0caf5;     /* headings, emphasis */
+  --text-soft: #9aa5ce;       /* long-form secondary copy */
+  --text-muted: #565f89;      /* labels, captions, inactive dots */
+  --text-dim: #414868;        /* tertiary, placeholders, grips */
+  --text-ticket: #d5dbf5;     /* ticket titles */
+  --text-ticket-muted: #6b739b;
+  --text-ticket-dim: #8088ac;
+  --text-placeholder: #4a4f6e;
+
+  /* Brand */
+  --accent: #7aa2f7;
+  --accent-hover: #89b4fa;
+  --accent-soft: #9db4f5;
+  --accent-softer: #c0d0fb;
+  --accent-grad-top: #8db0fa;
+  --accent-grad-top-hi: #9bbcfb;
+  --on-accent: #1a1b26;       /* text/icons sitting on an accent fill */
+
+  /* Status */
+  --danger: #f7768e;
+  --warning: #e0af68;
+  --success: #9ece6a;
+  --danger-bg: #2d2030;
+  --sev-high: #ff9e64;        /* Observer severity, set from ObserverPanel */
+  --sev-digest: #bb9af7;
+
+  /* Odds and ends */
+  --selection-bg: #33467c;
+  --switch-track: #3b4261;
+  --switch-thumb: #c0caf5;
+  --ticket-grad-top: #20243a;
+  --ticket-grad-bot: #1b1e2e;
+  --shadow-color: rgba(0, 0, 0, 0.5);
+  --overlay-bg: rgba(0, 0, 0, 0.65);
+  --hover-veil: rgba(255, 255, 255, 0.05);
+  --footer-veil: rgba(13, 14, 22, 0.35);
+}
+
+:root[data-theme='tokyo-day'] {
+  color-scheme: light;
+
+  --bg-app: #e9eaef;
+  --bg-chrome: #dfe1e8;
+  --bg-raised: #f5f6f9;
+  --bg-surface: #d4d7e2;
+  --bg-surface-hi: #c3c7d6;
+  --bg-chrome-hi: #d7dae6;
+  --bg-well: #ffffff;
+  --bg-well-hi: #f7f8fc;
+  --bg-inset-hi: #e4e8f4;
+  --bg-selected: #ccd4ea;
+  --bg-chip: #dde0eb;
+  --bg-chip-soft: #eef0f6;
+  --bg-editor: #ffffff;
+
+  --border: #c0c4d4;
+  --border-subtle: #d5d8e2;
+  --border-well: #dcdfe9;
+  --border-strong: #9aa0b8;
+  --border-dim: #b8bdcf;
+  --border-hover: #aab0c6;
+
+  --text: #3a4060;
+  --text-bright: #1b1e33;
+  --text-soft: #4c5270;
+  --text-muted: #6b7190;
+  --text-dim: #9096ad;
+  --text-ticket: #22263c;
+  --text-ticket-muted: #666d8b;
+  --text-ticket-dim: #5f6685;
+  --text-placeholder: #9aa0b6;
+
+  --accent: #2e7de9;
+  --accent-hover: #1a68d6;
+  --accent-soft: #2f6fd0;
+  --accent-softer: #1b5cb8;
+  --accent-grad-top: #4d90ef;
+  --accent-grad-top-hi: #61a0f5;
+  --on-accent: #ffffff;
+
+  --danger: #f52a65;
+  --warning: #8c6c3e;
+  --success: #587539;
+  --danger-bg: #fce8ee;
+  --sev-high: #b15c00;
+  --sev-digest: #7847d1;
+
+  --selection-bg: #b6c8f0;
+  --switch-track: #c2c6d6;
+  --switch-thumb: #ffffff;
+  --ticket-grad-top: #eef0f7;
+  --ticket-grad-bot: #e5e7f0;
+  --shadow-color: rgba(60, 70, 110, 0.18);
+  --overlay-bg: rgba(30, 35, 60, 0.32);
+  --hover-veil: rgba(0, 0, 0, 0.04);
+  --footer-veil: rgba(255, 255, 255, 0.55);
+}
+
+/* Catppuccin Mocha — palette per catppuccin/catppuccin (MIT).
+   See THIRD-PARTY-NOTICES.md. */
+:root[data-theme='catppuccin-mocha'] {
+  color-scheme: dark;
+
+  --bg-app: #1e1e2e;          /* base */
+  --bg-chrome: #181825;       /* mantle */
+  --bg-raised: #272739;
+  --bg-surface: #313244;      /* surface0 */
+  --bg-surface-hi: #45475a;   /* surface1 */
+  --bg-chrome-hi: #21212f;
+  --bg-well: #11111b;         /* crust */
+  --bg-well-hi: #17171f;
+  --bg-inset-hi: #1b1b28;
+  --bg-selected: #3a3c52;
+  --bg-chip: #313244;
+  --bg-chip-soft: #1a1a27;
+  --bg-editor: #1e1e2e;
+
+  --border: #45475a;          /* surface1 */
+  --border-subtle: #313244;   /* surface0 */
+  --border-well: #2a2b3c;
+  --border-strong: #6c7086;   /* overlay0 */
+  --border-dim: #585b70;      /* surface2 */
+  --border-hover: #585b70;
+
+  --text: #cdd6f4;            /* text */
+  --text-bright: #f2f4fd;
+  --text-soft: #bac2de;       /* subtext1 */
+  --text-muted: #7f849c;      /* overlay1 */
+  --text-dim: #6c7086;        /* overlay0 */
+  --text-ticket: #cdd6f4;
+  --text-ticket-muted: #9399b2;
+  --text-ticket-dim: #a6adc8;
+  --text-placeholder: #585b70;
+
+  --accent: #89b4fa;          /* blue */
+  --accent-hover: #b4befe;    /* lavender */
+  --accent-soft: #a3c4fb;
+  --accent-softer: #c8d6fd;
+  --accent-grad-top: #9ec1fb;
+  --accent-grad-top-hi: #b4cffc;
+  --on-accent: #1e1e2e;
+
+  --danger: #f38ba8;
+  --warning: #f9e2af;
+  --success: #a6e3a1;
+  --danger-bg: #302334;
+  --sev-high: #fab387;        /* peach */
+  --sev-digest: #cba6f7;      /* mauve */
+
+  --selection-bg: #3e4470;
+  --switch-track: #45475a;
+  --switch-thumb: #cdd6f4;
+  --ticket-grad-top: #232338;
+  --ticket-grad-bot: #1c1c29;
+  --shadow-color: rgba(0, 0, 0, 0.5);
+  --overlay-bg: rgba(0, 0, 0, 0.65);
+  --hover-veil: rgba(255, 255, 255, 0.05);
+  --footer-veil: rgba(17, 17, 27, 0.35);
+}
+
+/* Catppuccin Latte — palette per catppuccin/catppuccin (MIT).
+   See THIRD-PARTY-NOTICES.md. */
+:root[data-theme='catppuccin-latte'] {
+  color-scheme: light;
+
+  --bg-app: #eff1f5;          /* base */
+  --bg-chrome: #e6e9ef;       /* mantle */
+  --bg-raised: #fafbfc;
+  --bg-surface: #ccd0da;      /* surface0 */
+  --bg-surface-hi: #bcc0cc;   /* surface1 */
+  --bg-chrome-hi: #dce0e8;    /* crust */
+  --bg-well: #ffffff;
+  --bg-well-hi: #f7f8fa;
+  --bg-inset-hi: #e8ecf5;
+  --bg-selected: #ccd6ee;
+  --bg-chip: #dce0e8;
+  --bg-chip-soft: #f0f2f6;
+  --bg-editor: #eff1f5;
+
+  --border: #bcc0cc;          /* surface1 */
+  --border-subtle: #d5d9e2;
+  --border-well: #dce0e8;     /* crust */
+  --border-strong: #9ca0b0;   /* overlay0 */
+  --border-dim: #acb0be;      /* surface2 */
+  --border-hover: #acb0be;
+
+  --text: #4c4f69;            /* text */
+  --text-bright: #2f3145;
+  --text-soft: #5c5f77;       /* subtext1 */
+  --text-muted: #7c7f93;      /* overlay2 */
+  --text-dim: #9ca0b0;        /* overlay0 */
+  --text-ticket: #3d4059;
+  --text-ticket-muted: #6c6f85;
+  --text-ticket-dim: #6c6f85;
+  --text-placeholder: #9ca0b0;
+
+  --accent: #1e66f5;          /* blue */
+  --accent-hover: #0b52d4;
+  --accent-soft: #2b60cf;
+  --accent-softer: #17479f;
+  --accent-grad-top: #4a83f7;
+  --accent-grad-top-hi: #6497f8;
+  --on-accent: #ffffff;
+
+  --danger: #d20f39;
+  --warning: #df8e1d;
+  --success: #40a02b;
+  --danger-bg: #fbe3e8;
+  --sev-high: #fe640b;        /* peach */
+  --sev-digest: #8839ef;      /* mauve */
+
+  --selection-bg: #bcc9f0;
+  --switch-track: #bcc0cc;
+  --switch-thumb: #ffffff;
+  --ticket-grad-top: #f2f4f8;
+  --ticket-grad-bot: #e9ecf2;
+  --shadow-color: rgba(70, 80, 110, 0.16);
+  --overlay-bg: rgba(40, 45, 70, 0.3);
+  --hover-veil: rgba(0, 0, 0, 0.04);
+  --footer-veil: rgba(255, 255, 255, 0.55);
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -8,8 +278,8 @@ html, body, #root {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  background: #1a1b26;
-  color: #a9b1d6;
+  background: var(--bg-app);
+  color: var(--text);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
@@ -27,15 +297,15 @@ html, body, #root {
   align-items: center;
   justify-content: space-between;
   padding: 0 16px 0 80px;
-  background: #16161e;
-  border-bottom: 1px solid #2a2b3d;
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--border-subtle);
   font-size: 13px;
   flex-shrink: 0;
 }
 
 .titlebar-title {
   font-weight: 600;
-  color: #c0caf5;
+  color: var(--text-bright);
   display: flex;
   align-items: center;
   gap: 6px;
@@ -43,12 +313,12 @@ html, body, #root {
 }
 
 .titlebar-title-sep {
-  color: #565f89;
+  color: var(--text-muted);
   font-weight: 400;
 }
 
 .titlebar-project {
-  color: #7aa2f7;
+  color: var(--accent);
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -64,9 +334,9 @@ html, body, #root {
 }
 
 .titlebar-controls select {
-  background: #2a2b3d;
-  color: #a9b1d6;
-  border: 1px solid #3b3d57;
+  background: var(--bg-surface);
+  color: var(--text);
+  border: 1px solid var(--border);
   border-radius: 4px;
   padding: 2px 8px;
   font-size: 12px;
@@ -75,13 +345,13 @@ html, body, #root {
 
 .titlebar-controls select:focus {
   outline: none;
-  border-color: #7aa2f7;
+  border-color: var(--accent);
 }
 
 .titlebar-btn {
-  background: #2a2b3d;
-  color: #565f89;
-  border: 1px solid #3b3d57;
+  background: var(--bg-surface);
+  color: var(--text-muted);
+  border: 1px solid var(--border);
   border-radius: 4px;
   padding: 2px 10px;
   font-size: 11px;
@@ -90,14 +360,14 @@ html, body, #root {
 }
 
 .titlebar-btn:hover {
-  color: #a9b1d6;
-  border-color: #565f89;
+  color: var(--text);
+  border-color: var(--border-strong);
 }
 
 .titlebar-btn.active {
-  color: #7aa2f7;
-  border-color: #7aa2f7;
-  background: #1f2335;
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--bg-raised);
 }
 
 .titlebar-btn:disabled {
@@ -107,21 +377,21 @@ html, body, #root {
 
 /* Keep the greyed-out look stable on hover for disabled buttons. */
 .titlebar-btn:disabled:hover {
-  color: #565f89;
-  border-color: #3b3d57;
+  color: var(--text-muted);
+  border-color: var(--border);
 }
 
 .titlebar-separator {
   width: 1px;
   height: 16px;
-  background: #3b3d57;
+  background: var(--border);
   margin: 0 4px;
 }
 
 .titlebar-agent-btn {
-  background: #2a2b3d;
-  color: #565f89;
-  border: 1px solid #3b3d57;
+  background: var(--bg-surface);
+  color: var(--text-muted);
+  border: 1px solid var(--border);
   border-radius: 4px;
   padding: 2px 12px;
   font-size: 11px;
@@ -130,14 +400,14 @@ html, body, #root {
 }
 
 .titlebar-agent-btn:hover {
-  color: #a9b1d6;
-  border-color: #565f89;
+  color: var(--text);
+  border-color: var(--border-strong);
 }
 
 .titlebar-agent-btn.active {
-  color: #1a1b26;
-  background: #7aa2f7;
-  border-color: #7aa2f7;
+  color: var(--on-accent);
+  background: var(--accent);
+  border-color: var(--accent);
   font-weight: 600;
 }
 
@@ -161,8 +431,8 @@ html, body, #root {
   align-items: center;
   gap: 1px;
   padding: 2px 4px;
-  background: #16161e;
-  border-bottom: 1px solid #292e42;
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--border-subtle);
   flex-shrink: 0;
   overflow-x: auto;
   min-height: 28px;
@@ -174,7 +444,7 @@ html, body, #root {
   gap: 4px;
   padding: 3px 8px;
   font-size: 11px;
-  color: #565f89;
+  color: var(--text-muted);
   background: transparent;
   border-radius: 4px;
   cursor: pointer;
@@ -183,13 +453,13 @@ html, body, #root {
 }
 
 .terminal-tab:hover {
-  background: #1f2335;
-  color: #a9b1d6;
+  background: var(--bg-raised);
+  color: var(--text);
 }
 
 .terminal-tab.active {
-  background: #1a1b26;
-  color: #c0caf5;
+  background: var(--bg-app);
+  color: var(--text-bright);
 }
 
 .terminal-tab-label {
@@ -206,23 +476,23 @@ html, body, #root {
 }
 
 .terminal-tab-dot.active {
-  background: #9ece6a;
+  background: var(--success);
 }
 
 .terminal-tab-dot.exited {
-  background: #565f89;
+  background: var(--text-muted);
 }
 
 /* Agent is waiting on the user — pulse to draw the eye across tabs. */
 .terminal-tab-dot.awaiting {
-  background: #e0af68; /* amber: waiting for next prompt */
-  color: #e0af68;      /* drives the box-shadow glow via currentColor */
+  background: var(--warning); /* amber: waiting for next prompt */
+  color: var(--warning);      /* drives the box-shadow glow via currentColor */
   animation: tab-dot-pulse 1.1s ease-in-out infinite;
 }
 
 .terminal-tab-dot.decision {
-  background: #f7768e; /* red: blocked on an approval/permission prompt */
-  color: #f7768e;
+  background: var(--danger); /* red: blocked on an approval/permission prompt */
+  color: var(--danger);
   animation: tab-dot-pulse 1.1s ease-in-out infinite;
 }
 
@@ -245,14 +515,14 @@ html, body, #root {
 
 .terminal-tab-close:hover {
   opacity: 1;
-  background: rgba(247, 118, 142, 0.2);
-  color: #f7768e;
+  background: color-mix(in srgb, var(--danger) 20%, transparent);
+  color: var(--danger);
 }
 
 .terminal-tab-add {
   background: none;
   border: none;
-  color: #565f89;
+  color: var(--text-muted);
   font-size: 16px;
   cursor: pointer;
   padding: 2px 6px;
@@ -261,8 +531,8 @@ html, body, #root {
 }
 
 .terminal-tab-add:hover {
-  background: #1f2335;
-  color: #a9b1d6;
+  background: var(--bg-raised);
+  color: var(--text);
 }
 
 .terminal-tabs-content {
@@ -308,18 +578,18 @@ html, body, #root {
   gap: 5px;
   padding: 5px 12px;
   border-radius: 14px;
-  background: #2a2b3d;
-  border: 1px solid #7aa2f7;
-  color: #c0caf5;
+  background: var(--bg-surface);
+  border: 1px solid var(--accent);
+  color: var(--text-bright);
   font-family: inherit;
   font-size: 11.5px;
   font-weight: 600;
   cursor: pointer;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 4px 14px var(--shadow-color);
   transition: background 0.13s ease, transform 0.06s ease;
 }
 .term-jump-latest:hover {
-  background: #343650;
+  background: var(--bg-surface-hi);
 }
 .term-jump-latest:active {
   transform: translateY(1px);
@@ -363,7 +633,7 @@ html, body, #root {
 /* Dividers */
 .split-divider {
   flex-shrink: 0;
-  background: #2a2b3d;
+  background: var(--bg-surface);
   transition: background 0.15s;
   z-index: 2;
 }
@@ -381,7 +651,7 @@ html, body, #root {
 }
 
 .split-divider:hover {
-  background: #7aa2f7;
+  background: var(--accent);
 }
 
 /* Leaf pane */
@@ -410,8 +680,8 @@ html, body, #root {
   align-items: center;
   height: 26px;
   padding: 0 6px;
-  background: #16161e;
-  border-bottom: 1px solid #2a2b3d;
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--border-subtle);
   flex-shrink: 0;
   cursor: grab;
   user-select: none;
@@ -423,19 +693,19 @@ html, body, #root {
 
 .pane-drag-grip {
   font-size: 10px;
-  color: #414868;
+  color: var(--text-dim);
   margin-right: 6px;
   line-height: 1;
 }
 
 .pane-header:hover .pane-drag-grip {
-  color: #7aa2f7;
+  color: var(--accent);
 }
 
 .pane-header-label {
   font-size: 11px;
   font-weight: 600;
-  color: #565f89;
+  color: var(--text-muted);
   letter-spacing: 0.3px;
   flex: 1;
 }
@@ -443,7 +713,7 @@ html, body, #root {
 .pane-hide-btn {
   background: none;
   border: none;
-  color: #414868;
+  color: var(--text-dim);
   font-size: 14px;
   cursor: pointer;
   padding: 0 4px;
@@ -451,7 +721,7 @@ html, body, #root {
 }
 
 .pane-hide-btn:hover {
-  color: #f7768e;
+  color: var(--danger);
 }
 
 /* Drop zone overlay */
@@ -510,8 +780,8 @@ html, body, #root {
 }
 
 .drop-zone.active {
-  background: rgba(122, 162, 247, 0.25);
-  border: 2px solid rgba(122, 162, 247, 0.6);
+  background: color-mix(in srgb, var(--accent) 25%, transparent);
+  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
 }
 
 .multi-split-empty {
@@ -520,7 +790,7 @@ html, body, #root {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #565f89;
+  color: var(--text-muted);
   font-size: 13px;
 }
 
@@ -539,8 +809,8 @@ html, body, #root {
   align-items: center;
   gap: 4px;
   padding: 5px 6px;
-  background: #1a1b26;
-  border-bottom: 1px solid #2a2b3d;
+  background: var(--bg-app);
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .ctlsurf-nav-btn {
@@ -554,18 +824,18 @@ html, body, #root {
   background: transparent;
   border: none;
   border-radius: 4px;
-  color: #a9b1d6;
+  color: var(--text);
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
 }
 
 .ctlsurf-nav-btn:hover:not(:disabled) {
-  background: #2a2b3d;
+  background: var(--bg-surface);
 }
 
 .ctlsurf-nav-btn:disabled {
-  color: #565f89;
+  color: var(--text-muted);
   opacity: 0.5;
   cursor: default;
 }
@@ -580,16 +850,16 @@ html, body, #root {
   width: 100%;
   height: 26px;
   padding: 0 11px;
-  background: #16161e;
-  border: 1px solid #2a2b3d;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border-subtle);
   border-radius: 13px;
-  color: #c0caf5;
+  color: var(--text-bright);
   font-size: 12px;
   outline: none;
 }
 
 .ctlsurf-address-input:focus {
-  border-color: #7aa2f7;
+  border-color: var(--accent);
 }
 
 .ctlsurf-webview-host {
@@ -618,10 +888,10 @@ html, body, #root {
   align-items: center;
   justify-content: space-between;
   padding: 0 12px;
-  background: #16161e;
-  border-top: 1px solid #2a2b3d;
+  background: var(--bg-chrome);
+  border-top: 1px solid var(--border-subtle);
   font-size: 11px;
-  color: #565f89;
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 
@@ -636,14 +906,14 @@ html, body, #root {
   border-radius: 3px;
   font-size: 11px;
   cursor: pointer;
-  border: 1px solid #3b3d57;
-  background: #2a2b3d;
-  color: #7aa2f7;
+  border: 1px solid var(--border);
+  background: var(--bg-surface);
+  color: var(--accent);
   margin-left: 4px;
 }
 
 .statusbar-btn:hover {
-  background: #3b3d57;
+  background: var(--border);
 }
 
 .statusbar-btn:disabled {
@@ -655,14 +925,14 @@ html, body, #root {
   cursor: pointer;
   font-family: 'JetBrains Mono', 'Fira Code', monospace;
   font-size: 11px;
-  color: #a9b1d6;
+  color: var(--text);
   padding: 1px 4px;
   border-radius: 3px;
 }
 
 .statusbar-path:hover {
-  background: #2a2b3d;
-  color: #7aa2f7;
+  background: var(--bg-surface);
+  color: var(--accent);
 }
 
 .status-dot {
@@ -672,21 +942,21 @@ html, body, #root {
   display: inline-block;
 }
 
-.status-dot.active { background: #9ece6a; }
-.status-dot.inactive { background: #f7768e; }
-.status-dot.idle { background: #565f89; }
-.status-dot.pending { background: #e0af68; }
+.status-dot.active { background: var(--success); }
+.status-dot.inactive { background: var(--danger); }
+.status-dot.idle { background: var(--text-muted); }
+.status-dot.pending { background: var(--warning); }
 
 .statusbar-version {
   margin-left: 12px;
-  color: #565f89;
+  color: var(--text-muted);
   font-size: 11px;
   white-space: nowrap;
   cursor: help;
 }
 
 .statusbar-version.has-update {
-  color: #e0af68;
+  color: var(--warning);
   font-weight: 500;
 }
 
@@ -697,8 +967,8 @@ html, body, #root {
   display: inline-block;
   vertical-align: middle;
 }
-.tracking-dot.on { background: #9ece6a; box-shadow: 0 0 4px #9ece6a; }
-.tracking-dot.off { background: #565f89; }
+.tracking-dot.on { background: var(--success); box-shadow: 0 0 4px var(--success); }
+.tracking-dot.off { background: var(--text-muted); }
 
 .titlebar-icon-btn {
   display: inline-flex;
@@ -726,14 +996,14 @@ html, body, #root {
   cursor: not-allowed;
 }
 .voice-btn.listening {
-  color: #f7768e;
-  border-color: #f7768e;
-  background: #1f2335;
+  color: var(--danger);
+  border-color: var(--danger);
+  background: var(--bg-raised);
 }
 .voice-btn.busy {
-  color: #e0af68;
-  border-color: #e0af68;
-  background: #1f2335;
+  color: var(--warning);
+  border-color: var(--warning);
+  background: var(--bg-raised);
 }
 .voice-icon {
   font-size: 13px;
@@ -745,16 +1015,16 @@ html, body, #root {
   border-radius: 50%;
   display: inline-block;
   vertical-align: middle;
-  background: #565f89;
+  background: var(--text-muted);
 }
 .voice-dot.on {
-  background: #f7768e;
-  box-shadow: 0 0 4px #f7768e;
+  background: var(--danger);
+  box-shadow: 0 0 4px var(--danger);
   animation: voice-pulse 1s ease-in-out infinite;
 }
 .voice-dot.busy {
-  background: #e0af68;
-  box-shadow: 0 0 4px #e0af68;
+  background: var(--warning);
+  box-shadow: 0 0 4px var(--warning);
   animation: voice-pulse 0.8s ease-in-out infinite;
 }
 @keyframes voice-pulse {
@@ -776,27 +1046,27 @@ html, body, #root {
   text-overflow: ellipsis;
   z-index: 50;
   pointer-events: none;
-  border: 1px solid #3b3d57;
+  border: 1px solid var(--border);
 }
 .voice-chip.listening {
-  background: #1f2335;
-  color: #a9b1d6;
+  background: var(--bg-raised);
+  color: var(--text);
 }
 .voice-chip.busy {
-  background: #1f2335;
-  color: #e0af68;
-  border-color: #e0af68;
+  background: var(--bg-raised);
+  color: var(--warning);
+  border-color: var(--warning);
 }
 .voice-chip.notice {
-  background: #1f2335;
-  color: #e0af68;
-  border-color: #e0af68;
+  background: var(--bg-raised);
+  color: var(--warning);
+  border-color: var(--warning);
   white-space: normal;
 }
 .voice-chip.error {
-  background: #2d2030;
-  color: #f7768e;
-  border-color: #f7768e;
+  background: var(--danger-bg);
+  color: var(--danger);
+  border-color: var(--danger);
   white-space: normal;
 }
 
@@ -809,10 +1079,10 @@ html, body, #root {
   align-items: center;
   gap: 4px;
   padding: 4px 4px 6px;
-  background: #16161e;
-  border: 1px solid #3b3d57;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border);
   border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 4px 16px var(--shadow-color);
   user-select: none;
   -webkit-user-select: none;
 }
@@ -826,7 +1096,7 @@ html, body, #root {
 }
 .floating-mic-handle:active { cursor: grabbing; }
 .floating-mic-grip {
-  color: #565f89;
+  color: var(--text-muted);
   font-size: 12px;
   line-height: 1;
   padding: 0 2px;
@@ -834,13 +1104,13 @@ html, body, #root {
 .floating-mic-hide {
   background: transparent;
   border: none;
-  color: #565f89;
+  color: var(--text-muted);
   font-size: 15px;
   line-height: 1;
   cursor: pointer;
   padding: 0 2px;
 }
-.floating-mic-hide:hover { color: #f7768e; }
+.floating-mic-hide:hover { color: var(--danger); }
 
 /* Smaller sibling of the round mic: read the last agent reply aloud. */
 .floating-mic-read {
@@ -850,16 +1120,16 @@ html, body, #root {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: #2a2b3d;
-  border: 1px solid #3b3d57;
-  color: #a9b1d6;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  color: var(--text);
   cursor: pointer;
   transition: all 0.15s;
 }
-.floating-mic-read:hover { border-color: #565f89; color: #c0caf5; }
+.floating-mic-read:hover { border-color: var(--border-strong); color: var(--text-bright); }
 .floating-mic-read.speaking {
-  color: #7aa2f7;
-  border-color: #7aa2f7;
+  color: var(--accent);
+  border-color: var(--accent);
 }
 .floating-mic-note {
   position: absolute;
@@ -868,9 +1138,9 @@ html, body, #root {
   transform: translateX(-50%);
   white-space: nowrap;
   font-size: 11px;
-  color: #565f89;
-  background: #16161e;
-  border: 1px solid #3b3d57;
+  color: var(--text-muted);
+  background: var(--bg-chrome);
+  border: 1px solid var(--border);
   border-radius: 6px;
   padding: 2px 6px;
   pointer-events: none;
@@ -883,14 +1153,14 @@ html, body, #root {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: #2a2b3d;
-  border: 1px solid #3b3d57;
-  color: #a9b1d6;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  color: var(--text);
   cursor: pointer;
   position: relative;
   transition: all 0.15s;
 }
-.voice-btn-floating:hover { border-color: #565f89; }
+.voice-btn-floating:hover { border-color: var(--border-strong); }
 .voice-btn-floating .voice-icon { font-size: 22px; }
 .voice-btn-floating .voice-dot {
   position: absolute;
@@ -922,15 +1192,15 @@ html, body, #root {
   padding: 0;
   font-size: 10px;
   line-height: 1;
-  background: #2a2b3d;
-  border: 1px solid #3b3d57;
-  color: #a9b1d6;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  color: var(--text);
   cursor: pointer;
   z-index: 60;
 }
 .voice-source-btn:hover {
-  border-color: #7aa2f7;
-  color: #c0caf5;
+  border-color: var(--accent);
+  color: var(--text-bright);
 }
 .voice-source-menu {
   position: absolute;
@@ -940,17 +1210,17 @@ html, body, #root {
   min-width: 200px;
   max-width: 280px;
   padding: 4px;
-  background: #16161e;
-  border: 1px solid #3b3d57;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border);
   border-radius: 8px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 6px 20px var(--shadow-color);
   z-index: 300;
 }
 .voice-source-head {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #565f89;
+  color: var(--text-muted);
   padding: 4px 8px 6px;
 }
 .voice-source-item {
@@ -962,17 +1232,17 @@ html, body, #root {
   border: none;
   border-radius: 5px;
   background: transparent;
-  color: #a9b1d6;
+  color: var(--text);
   font-size: 12px;
   text-align: left;
   cursor: pointer;
 }
-.voice-source-item:hover { background: #1f2335; }
-.voice-source-item.active { color: #7aa2f7; }
+.voice-source-item:hover { background: var(--bg-raised); }
+.voice-source-item.active { color: var(--accent); }
 .voice-source-check {
   flex: 0 0 12px;
   width: 12px;
-  color: #7aa2f7;
+  color: var(--accent);
   font-size: 11px;
 }
 .voice-source-label {
@@ -983,7 +1253,7 @@ html, body, #root {
 .voice-source-empty {
   padding: 6px 8px;
   font-size: 11px;
-  color: #565f89;
+  color: var(--text-muted);
 }
 
 /* Spoken-replies titlebar control */
@@ -993,13 +1263,13 @@ html, body, #root {
   align-items: center;
 }
 .speak-btn.active {
-  color: #7aa2f7;
-  border-color: #7aa2f7;
+  color: var(--accent);
+  border-color: var(--accent);
 }
 .speak-pct {
   font-size: 9px;
   margin-left: 3px;
-  color: #e0af68;
+  color: var(--warning);
 }
 .speak-caret {
   padding: 0 3px;
@@ -1007,10 +1277,10 @@ html, body, #root {
   min-width: 0;
 }
 .speak-stop {
-  color: #f7768e;
-  border-color: #f7768e;
+  color: var(--danger);
+  border-color: var(--danger);
 }
-.speak-stop:hover { background: #2d2030; }
+.speak-stop:hover { background: var(--danger-bg); }
 .speak-error {
   position: absolute;
   top: 100%;
@@ -1023,9 +1293,9 @@ html, body, #root {
   line-height: 1.3;
   white-space: normal;
   word-break: break-word;
-  background: #2d2030;
-  color: #f7768e;
-  border: 1px solid #f7768e;
+  background: var(--danger-bg);
+  color: var(--danger);
+  border: 1px solid var(--danger);
   z-index: 60;
 }
 .speak-menu {
@@ -1036,17 +1306,17 @@ html, body, #root {
   min-width: 220px;
   max-width: 280px;
   padding: 6px;
-  background: #16161e;
-  border: 1px solid #3b3d57;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border);
   border-radius: 8px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 6px 20px var(--shadow-color);
   z-index: 300;
 }
 .speak-menu-head {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #565f89;
+  color: var(--text-muted);
   padding: 6px 6px 4px;
 }
 .speak-menu-item {
@@ -1058,33 +1328,33 @@ html, body, #root {
   border: none;
   border-radius: 5px;
   background: transparent;
-  color: #a9b1d6;
+  color: var(--text);
   font-size: 12px;
   text-align: left;
   cursor: pointer;
 }
-.speak-menu-item:hover { background: #1f2335; }
-.speak-menu-item.active { color: #7aa2f7; }
+.speak-menu-item:hover { background: var(--bg-raised); }
+.speak-menu-item.active { color: var(--accent); }
 .speak-menu-check {
   flex: 0 0 12px;
   width: 12px;
-  color: #7aa2f7;
+  color: var(--accent);
   font-size: 11px;
 }
 .speak-select {
   width: 100%;
   margin: 2px 0 4px;
   padding: 4px 6px;
-  background: #1f2335;
-  color: #a9b1d6;
-  border: 1px solid #3b3d57;
+  background: var(--bg-raised);
+  color: var(--text);
+  border: 1px solid var(--border);
   border-radius: 5px;
   font-size: 12px;
 }
 .speak-rate {
   width: 100%;
   margin: 2px 0 6px;
-  accent-color: #7aa2f7;
+  accent-color: var(--accent);
 }
 .speak-menu-row {
   display: flex;
@@ -1094,14 +1364,14 @@ html, body, #root {
 .speak-menu-btn {
   flex: 1;
   padding: 5px 6px;
-  background: #2a2b3d;
-  color: #a9b1d6;
-  border: 1px solid #3b3d57;
+  background: var(--bg-surface);
+  color: var(--text);
+  border: 1px solid var(--border);
   border-radius: 5px;
   font-size: 12px;
   cursor: pointer;
 }
-.speak-menu-btn:hover { border-color: #7aa2f7; color: #c0caf5; }
+.speak-menu-btn:hover { border-color: var(--accent); color: var(--text-bright); }
 
 /* Editor panel */
 .editor-panel {
@@ -1109,7 +1379,7 @@ html, body, #root {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #1e1e2e;
+  background: var(--bg-editor);
 }
 
 .editor-tree {
@@ -1117,17 +1387,17 @@ html, body, #root {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  background: #1a1b26;
-  border-right: 1px solid #2a2b3d;
+  background: var(--bg-app);
+  border-right: 1px solid var(--border-subtle);
 }
 
 .editor-tree-header {
   padding: 8px 12px;
   font-size: 11px;
   font-weight: 600;
-  color: #565f89;
+  color: var(--text-muted);
   letter-spacing: 0.5px;
-  border-bottom: 1px solid #2a2b3d;
+  border-bottom: 1px solid var(--border-subtle);
   flex-shrink: 0;
 }
 
@@ -1142,7 +1412,7 @@ html, body, #root {
 }
 
 .editor-tree-content::-webkit-scrollbar-thumb {
-  background: #2a2b3d;
+  background: var(--bg-surface);
   border-radius: 3px;
 }
 
@@ -1152,19 +1422,19 @@ html, body, #root {
   padding: 3px 0;
   cursor: pointer;
   font-size: 12px;
-  color: #a9b1d6;
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .tree-node:hover {
-  background: rgba(122, 162, 247, 0.08);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
 }
 
 .tree-node.selected {
-  background: rgba(122, 162, 247, 0.15);
-  color: #c0caf5;
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--text-bright);
 }
 
 .tree-icon {
@@ -1172,7 +1442,7 @@ html, body, #root {
   text-align: center;
   flex-shrink: 0;
   font-size: 10px;
-  color: #565f89;
+  color: var(--text-muted);
 }
 
 .tree-file-icon {
@@ -1193,7 +1463,7 @@ html, body, #root {
 }
 
 .editor-tree-divider:hover {
-  background: #7aa2f7;
+  background: var(--accent);
 }
 
 .editor-main {
@@ -1210,36 +1480,36 @@ html, body, #root {
   gap: 4px;
   padding: 0 8px;
   height: 32px;
-  background: #16161e;
-  border-bottom: 1px solid #2a2b3d;
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--border-subtle);
   flex-shrink: 0;
 }
 
 .editor-tab {
   font-size: 12px;
-  color: #a9b1d6;
+  color: var(--text);
   padding: 4px 10px;
   border-radius: 3px;
 }
 
 .editor-tab.active {
-  color: #c0caf5;
-  background: #2a2b3d;
+  color: var(--text-bright);
+  background: var(--bg-surface);
 }
 
 .editor-save-btn {
   margin-left: auto;
   padding: 2px 10px;
   font-size: 11px;
-  background: #7aa2f7;
-  color: #1a1b26;
+  background: var(--accent);
+  color: var(--on-accent);
   border: none;
   border-radius: 3px;
   cursor: pointer;
 }
 
 .editor-save-btn:hover {
-  background: #89b4fa;
+  background: var(--accent-hover);
 }
 
 .editor-monaco-container {
@@ -1252,7 +1522,7 @@ html, body, #root {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #565f89;
+  color: var(--text-muted);
   font-size: 13px;
 }
 
@@ -1260,7 +1530,7 @@ html, body, #root {
 .agent-picker-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--overlay-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1268,8 +1538,8 @@ html, body, #root {
 }
 
 .agent-picker-modal {
-  background: #1f2335;
-  border: 1px solid #3b3d57;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
   border-radius: 12px;
   padding: 32px 40px;
   min-width: 360px;
@@ -1282,7 +1552,7 @@ html, body, #root {
 .agent-picker-brand {
   font-size: 22px;
   font-weight: 700;
-  color: #7aa2f7;
+  color: var(--accent);
   margin-bottom: 20px;
   letter-spacing: 0.5px;
 }
@@ -1294,15 +1564,15 @@ html, body, #root {
   gap: 8px;
   padding: 10px 16px;
   margin-bottom: 20px;
-  background: #16161e;
-  border: 1px solid #2a2b3d;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
   cursor: pointer;
   transition: border-color 0.15s;
 }
 
 .agent-picker-cwd:hover {
-  border-color: #7aa2f7;
+  border-color: var(--accent);
 }
 
 .agent-picker-cwd-icon {
@@ -1312,7 +1582,7 @@ html, body, #root {
 .agent-picker-cwd-path {
   font-family: 'JetBrains Mono', 'Fira Code', monospace;
   font-size: 12px;
-  color: #a9b1d6;
+  color: var(--text);
   flex: 1;
   text-align: left;
   overflow: hidden;
@@ -1322,13 +1592,13 @@ html, body, #root {
 
 .agent-picker-cwd-change {
   font-size: 11px;
-  color: #7aa2f7;
+  color: var(--accent);
   flex-shrink: 0;
 }
 
 .agent-picker-title {
   font-size: 11px;
-  color: #565f89;
+  color: var(--text-muted);
   margin-bottom: 12px;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -1346,8 +1616,8 @@ html, body, #root {
   justify-content: space-between;
   gap: 16px;
   padding: 14px 18px;
-  background: #16161e;
-  border: 1px solid #2a2b3d;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.15s;
@@ -1355,27 +1625,27 @@ html, body, #root {
 }
 
 .agent-picker-item:hover {
-  border-color: #7aa2f7;
-  background: #1a1b2e;
+  border-color: var(--accent);
+  background: var(--bg-chrome-hi);
 }
 
 .agent-picker-name {
   font-size: 14px;
   font-weight: 600;
-  color: #c0caf5;
+  color: var(--text-bright);
   flex-shrink: 0;
 }
 
 .agent-picker-desc {
   font-size: 11px;
-  color: #565f89;
+  color: var(--text-muted);
   text-align: right;
 }
 
 .agent-picker-hint {
   margin-top: 20px;
   font-size: 11px;
-  color: #414868;
+  color: var(--text-dim);
 }
 
 .agent-picker-option {
@@ -1384,21 +1654,21 @@ html, body, #root {
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #a9b1d6;
+  color: var(--text);
   cursor: pointer;
   user-select: none;
 }
 
 .agent-picker-option input[type="checkbox"] {
   cursor: pointer;
-  accent-color: #7aa2f7;
+  accent-color: var(--accent);
 }
 
 /* ─── Remote (SSH) connect ───────────────────────── */
 
 .remote-section-label {
   font-size: 10px;
-  color: #565f89;
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 1px;
   text-align: left;
@@ -1450,29 +1720,29 @@ html, body, #root {
 
 .remote-toggle-label {
   font-size: 12px;
-  color: #565f89;
+  color: var(--text-muted);
 }
 
 .remote-toggle-btn {
   flex: 1;
   padding: 8px 10px;
-  background: #16161e;
-  border: 1px solid #2a2b3d;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
-  color: #a9b1d6;
+  color: var(--text);
   font-size: 12px;
   cursor: pointer;
   transition: all 0.15s;
 }
 
 .remote-toggle-btn:hover {
-  border-color: #7aa2f7;
+  border-color: var(--accent);
 }
 
 .remote-toggle-btn.is-active {
-  border-color: #7aa2f7;
-  background: #1a1b2e;
-  color: #c0caf5;
+  border-color: var(--accent);
+  background: var(--bg-chrome-hi);
+  color: var(--text-bright);
   font-weight: 600;
 }
 
@@ -1484,25 +1754,25 @@ html, body, #root {
 .remote-input {
   flex: 1;
   padding: 10px 12px;
-  background: #16161e;
-  border: 1px solid #2a2b3d;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
-  color: #c0caf5;
+  color: var(--text-bright);
   font-family: 'JetBrains Mono', 'Fira Code', monospace;
   font-size: 12px;
   outline: none;
 }
 
 .remote-input:focus {
-  border-color: #7aa2f7;
+  border-color: var(--accent);
 }
 
 .remote-btn {
   padding: 10px 16px;
-  background: #7aa2f7;
+  background: var(--accent);
   border: none;
   border-radius: 8px;
-  color: #1f2335;
+  color: var(--on-accent);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
@@ -1517,21 +1787,21 @@ html, body, #root {
   margin-top: 18px;
   background: none;
   border: none;
-  color: #7aa2f7;
+  color: var(--accent);
   font-size: 12px;
   cursor: pointer;
 }
 
 .remote-status {
   padding: 24px 8px;
-  color: #a9b1d6;
+  color: var(--text);
   font-size: 13px;
 }
 
 .remote-status-sub {
   margin-top: 6px;
   font-size: 11px;
-  color: #565f89;
+  color: var(--text-muted);
   word-break: break-word;
 }
 
@@ -1539,8 +1809,8 @@ html, body, #root {
   width: 22px;
   height: 22px;
   margin: 0 auto 14px;
-  border: 2px solid #2a2b3d;
-  border-top-color: #7aa2f7;
+  border: 2px solid var(--border-subtle);
+  border-top-color: var(--accent);
   border-radius: 50%;
   animation: remote-spin 0.8s linear infinite;
 }
@@ -1551,15 +1821,15 @@ html, body, #root {
 
 .remote-target-line {
   font-size: 13px;
-  color: #a9b1d6;
+  color: var(--text);
   margin-bottom: 4px;
 }
 
 .remote-note {
   font-size: 11px;
-  color: #e0af68;
-  background: rgba(224, 175, 104, 0.08);
-  border: 1px solid rgba(224, 175, 104, 0.25);
+  color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
   border-radius: 8px;
   padding: 8px 12px;
   margin: 8px 0;
@@ -1569,7 +1839,7 @@ html, body, #root {
 
 .remote-error {
   font-size: 13px;
-  color: #f7768e;
+  color: var(--danger);
   margin-bottom: 4px;
 }
 
@@ -1585,7 +1855,7 @@ html, body, #root {
 .remote-pw-hint {
   margin-top: 6px;
   font-size: 10px;
-  color: #565f89;
+  color: var(--text-muted);
   text-align: left;
 }
 
@@ -1593,7 +1863,7 @@ html, body, #root {
 .settings-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--overlay-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1601,8 +1871,8 @@ html, body, #root {
 }
 
 .settings-dialog {
-  background: #1f2335;
-  border: 1px solid #3b3d57;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 24px;
   width: 480px;
@@ -1611,23 +1881,23 @@ html, body, #root {
 }
 
 .settings-dialog h3 {
-  color: #c0caf5;
+  color: var(--text-bright);
   margin-bottom: 16px;
   font-size: 16px;
 }
 
 /* About section inside the Settings dialog. */
 .settings-about {
-  border-top: 1px solid #2a2b3d;
+  border-top: 1px solid var(--border-subtle);
   padding-top: 16px;
 }
 .settings-about .about-name {
-  color: #c0caf5;
+  color: var(--text-bright);
   font-size: 14px;
   font-weight: 600;
 }
 .settings-about .about-copyright {
-  color: #9aa5ce;
+  color: var(--text-soft);
   font-size: 12px;
   margin: 6px 0 8px;
 }
@@ -1637,13 +1907,13 @@ html, body, #root {
 }
 
 .settings-section h4 {
-  color: #a9b1d6;
+  color: var(--text);
   font-size: 13px;
   margin-bottom: 8px;
 }
 
 .settings-hint {
-  color: #565f89;
+  color: var(--text-muted);
   font-size: 11px;
   display: block;
   margin-bottom: 12px;
@@ -1651,7 +1921,7 @@ html, body, #root {
 
 .settings-dialog label {
   display: block;
-  color: #a9b1d6;
+  color: var(--text);
   font-size: 12px;
   margin-bottom: 12px;
 }
@@ -1661,21 +1931,139 @@ html, body, #root {
   width: 100%;
   margin-top: 4px;
   padding: 6px 10px;
-  background: #16161e;
-  border: 1px solid #3b3d57;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border);
   border-radius: 4px;
-  color: #a9b1d6;
+  color: var(--text);
   font-size: 13px;
   font-family: 'JetBrains Mono', 'Fira Code', monospace;
 }
 
 .settings-dialog input:focus {
   outline: none;
-  border-color: #7aa2f7;
+  border-color: var(--accent);
 }
 
 .settings-dialog input::placeholder {
-  color: #414868;
+  color: var(--text-dim);
+}
+
+/* Checkbox rows: <input><span>label</span><span class="settings-hint">.
+   The class was used by the dialog but never styled, so the box inherited the
+   full-width text-input rule above and rendered stretched and centred above its
+   own label. Two columns: the box, then label on row 1 and hint on row 2. */
+.settings-checkbox {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  column-gap: 8px;
+  cursor: pointer;
+}
+
+.settings-checkbox input[type='checkbox'] {
+  display: inline-block;
+  width: auto;
+  margin: 0;
+  padding: 0;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.settings-checkbox > span {
+  grid-column: 2;
+}
+
+.settings-checkbox .settings-hint {
+  margin-top: 2px;
+  margin-bottom: 0;
+}
+
+/* Appearance picker — a swatch tile per scheme, grouped by mode when syncing. */
+.theme-group-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin: 10px 0 6px;
+}
+
+.theme-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.theme-option {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 7px;
+  padding: 8px 8px 7px;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: 11.5px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.13s ease, color 0.13s ease;
+}
+
+.theme-option:hover {
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+
+.theme-option.active {
+  border-color: var(--accent);
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+/* A miniature of the scheme: background, a surface bar, an accent dot and a
+   text line. Colours come from the theme's own palette via inline styles, so
+   this must not reference the token layer. */
+.theme-swatch {
+  position: relative;
+  display: block;
+  height: 38px;
+  border-radius: 5px;
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.theme-swatch-bar {
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 9px;
+}
+
+.theme-swatch-dot {
+  position: absolute;
+  left: 7px;
+  top: 16px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.theme-swatch-line {
+  position: absolute;
+  left: 20px;
+  top: 19px;
+  right: 8px;
+  height: 3px;
+  border-radius: 2px;
+  opacity: 0.65;
+}
+
+.theme-option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .settings-actions {
@@ -1694,23 +2082,23 @@ html, body, #root {
 }
 
 .btn-primary {
-  background: #7aa2f7;
-  color: #1a1b26;
-  border-color: #7aa2f7;
+  background: var(--accent);
+  color: var(--on-accent);
+  border-color: var(--accent);
 }
 
 .btn-primary:hover {
-  background: #89b4fa;
+  background: var(--accent-hover);
 }
 
 .btn-secondary {
-  background: #2a2b3d;
-  color: #a9b1d6;
-  border-color: #3b3d57;
+  background: var(--bg-surface);
+  color: var(--text);
+  border-color: var(--border);
 }
 
 .btn-secondary:hover {
-  border-color: #565f89;
+  border-color: var(--border-strong);
 }
 
 .btn-ghost {
@@ -1720,16 +2108,16 @@ html, body, #root {
   cursor: pointer;
   border: none;
   background: transparent;
-  color: #565f89;
+  color: var(--text-muted);
 }
 
 .btn-ghost:hover {
-  background: #2a2b3d;
-  color: #a9b1d6;
+  background: var(--bg-surface);
+  color: var(--text);
 }
 
 .btn-danger:hover {
-  color: #f7768e;
+  color: var(--danger);
 }
 
 /* Profile list */
@@ -1746,18 +2134,18 @@ html, body, #root {
   justify-content: space-between;
   padding: 8px 12px;
   border-radius: 6px;
-  border: 1px solid #2a2b3d;
+  border: 1px solid var(--border-subtle);
   cursor: pointer;
   transition: border-color 0.15s;
 }
 
 .profile-item:hover {
-  border-color: #3b3d57;
+  border-color: var(--border);
 }
 
 .profile-item.active {
-  border-color: #7aa2f7;
-  background: rgba(122, 162, 247, 0.05);
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 5%, transparent);
 }
 
 .profile-info {
@@ -1771,22 +2159,22 @@ html, body, #root {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: #3b3d57;
+  background: var(--border);
   flex-shrink: 0;
 }
 
 .profile-dot.active {
-  background: #9ece6a;
+  background: var(--success);
 }
 
 .profile-name {
-  color: #c0caf5;
+  color: var(--text-bright);
   font-size: 13px;
   font-weight: 500;
 }
 
 .profile-url {
-  color: #565f89;
+  color: var(--text-muted);
   font-size: 11px;
   font-family: 'JetBrains Mono', 'Fira Code', monospace;
 }
@@ -1804,7 +2192,7 @@ html, body, #root {
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  background: linear-gradient(180deg, #20243a 0%, #1b1e2e 100%);
+  background: linear-gradient(180deg, var(--ticket-grad-top) 0%, var(--ticket-grad-bot) 100%);
 }
 
 /* ── header ── */
@@ -1813,7 +2201,7 @@ html, body, #root {
   align-items: flex-start;
   justify-content: space-between;
   padding: 16px 16px 14px;
-  border-bottom: 1px solid #2a2b3d;
+  border-bottom: 1px solid var(--border-subtle);
 }
 .ticket-drawer-heading {
   display: flex;
@@ -1824,8 +2212,8 @@ html, body, #root {
   width: 34px;
   height: 34px;
   border-radius: 9px;
-  background: rgba(122, 162, 247, 0.14);
-  border: 1px solid rgba(122, 162, 247, 0.3);
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1840,15 +2228,15 @@ html, body, #root {
 .ticket-drawer-title {
   font-size: 14px;
   font-weight: 650;
-  color: #d5dbf5;
+  color: var(--text-ticket);
   letter-spacing: 0.01em;
 }
 .ticket-drawer-subtitle {
   font-size: 11.5px;
-  color: #6b739b;
+  color: var(--text-ticket-muted);
 }
 .ticket-drawer-subtitle strong {
-  color: #7aa2f7;
+  color: var(--accent);
   font-weight: 600;
 }
 /* "+ New" action in the header (replaces the old footer button). */
@@ -1860,9 +2248,9 @@ html, body, #root {
   gap: 3px;
   padding: 5px 11px;
   border-radius: 7px;
-  background: rgba(122, 162, 247, 0.14);
-  border: 1px solid rgba(122, 162, 247, 0.3);
-  color: #9db4f5;
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--accent-soft);
   font-family: inherit;
   font-size: 12px;
   font-weight: 600;
@@ -1870,15 +2258,15 @@ html, body, #root {
   transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.06s ease;
 }
 .ticket-drawer-new:hover {
-  background: rgba(122, 162, 247, 0.22);
-  border-color: rgba(122, 162, 247, 0.5);
-  color: #c0d0fb;
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  color: var(--accent-softer);
 }
 .ticket-drawer-new:active {
   transform: translateY(1px);
 }
 .ticket-drawer-warn {
-  color: #e0af68;
+  color: var(--warning);
 }
 /* ── body ── */
 .ticket-drawer-body {
@@ -1898,17 +2286,17 @@ html, body, #root {
 .ticket-field-label {
   font-size: 10.5px;
   font-weight: 600;
-  color: #6b739b;
+  color: var(--text-ticket-muted);
   text-transform: uppercase;
   letter-spacing: 0.07em;
 }
 
 .ticket-field input,
 .ticket-field textarea {
-  background: #15161f;
-  border: 1px solid #2a2b3d;
+  background: var(--bg-well);
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
-  color: #d5dbf5;
+  color: var(--text-ticket);
   font-size: 13px;
   font-family: inherit;
   padding: 9px 11px;
@@ -1917,12 +2305,12 @@ html, body, #root {
 }
 .ticket-field input::placeholder,
 .ticket-field textarea::placeholder {
-  color: #4a4f6e;
+  color: var(--text-placeholder);
 }
 .ticket-field input:focus,
 .ticket-field textarea:focus {
-  border-color: #7aa2f7;
-  box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.13);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
 }
 .ticket-input-title {
   font-size: 14px !important;
@@ -1943,10 +2331,10 @@ html, body, #root {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  background: #15161f;
-  border: 1px solid #2a2b3d;
+  background: var(--bg-well);
+  border: 1px solid var(--border-subtle);
   border-radius: 999px;
-  color: #8088ac;
+  color: var(--text-ticket-dim);
   font-size: 12px;
   font-family: inherit;
   font-weight: 550;
@@ -1955,8 +2343,8 @@ html, body, #root {
   transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease;
 }
 .ticket-seg:hover {
-  border-color: #3b3d57;
-  color: #c0caf5;
+  border-color: var(--border);
+  color: var(--text-bright);
 }
 .ticket-seg-dot {
   width: 7px;
@@ -1969,9 +2357,9 @@ html, body, #root {
 }
 
 .ticket-drawer-error {
-  background: rgba(247, 118, 142, 0.13);
-  border: 1px solid rgba(247, 118, 142, 0.38);
-  color: #f7768e;
+  background: color-mix(in srgb, var(--danger) 13%, transparent);
+  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
+  color: var(--danger);
   font-size: 12px;
   border-radius: 8px;
   padding: 8px 10px;
@@ -1984,12 +2372,12 @@ html, body, #root {
   justify-content: space-between;
   gap: 8px;
   padding: 12px 16px;
-  border-top: 1px solid #2a2b3d;
-  background: rgba(13, 14, 22, 0.35);
+  border-top: 1px solid var(--border-subtle);
+  background: var(--footer-veil);
 }
 .ticket-drawer-hint {
   font-size: 11px;
-  color: #565f89;
+  color: var(--text-muted);
 }
 .ticket-drawer-footer-btns {
   display: flex;
@@ -2007,20 +2395,20 @@ html, body, #root {
 }
 .ticket-btn-secondary {
   background: transparent;
-  color: #c0caf5;
-  border: 1px solid #2a2b3d;
+  color: var(--text-bright);
+  border: 1px solid var(--border-subtle);
 }
 .ticket-btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: #3b3d57;
+  background: var(--hover-veil);
+  border-color: var(--border);
 }
 .ticket-btn-primary {
-  background: linear-gradient(180deg, #8db0fa 0%, #7aa2f7 100%);
-  color: #11131f;
-  border: 1px solid #7aa2f7;
+  background: linear-gradient(180deg, var(--accent-grad-top) 0%, var(--accent) 100%);
+  color: var(--on-accent);
+  border: 1px solid var(--accent);
 }
 .ticket-btn-primary:hover:not(:disabled) {
-  background: linear-gradient(180deg, #9bbcfb 0%, #89b4fa 100%);
+  background: linear-gradient(180deg, var(--accent-grad-top-hi) 0%, var(--accent-hover) 100%);
 }
 .ticket-btn-primary:active:not(:disabled) {
   transform: translateY(1px);
@@ -2039,15 +2427,15 @@ html, body, #root {
 
 /* ── drawer badge / back button ── */
 .ticket-drawer-badge {
-  color: #7aa2f7;
+  color: var(--accent);
 }
 .ticket-drawer-back {
   width: 34px;
   height: 34px;
   border-radius: 9px;
-  background: rgba(122, 162, 247, 0.1);
-  border: 1px solid rgba(122, 162, 247, 0.28);
-  color: #7aa2f7;
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
+  color: var(--accent);
   font-size: 22px;
   line-height: 1;
   cursor: pointer;
@@ -2055,7 +2443,7 @@ html, body, #root {
   transition: background 0.12s ease;
 }
 .ticket-drawer-back:hover {
-  background: rgba(122, 162, 247, 0.2);
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
 }
 
 /* ── ticket list ── */
@@ -2068,7 +2456,7 @@ html, body, #root {
   gap: 7px;
 }
 .ticket-list-msg {
-  color: #6b739b;
+  color: var(--text-ticket-muted);
   font-size: 12.5px;
   padding: 16px 4px;
   text-align: center;
@@ -2084,8 +2472,8 @@ html, body, #root {
   padding: 7px 4px;
   background: none;
   border: none;
-  border-top: 1px solid #262a3f;
-  color: #6b739b;
+  border-top: 1px solid var(--border-well);
+  color: var(--text-ticket-muted);
   font-family: inherit;
   font-size: 11.5px;
   font-weight: 600;
@@ -2095,7 +2483,7 @@ html, body, #root {
   transition: color 0.13s ease;
 }
 .ticket-done-toggle:hover {
-  color: #a9b1d6;
+  color: var(--text);
 }
 .ticket-done-caret {
   display: inline-block;
@@ -2110,8 +2498,8 @@ html, body, #root {
   min-width: 18px;
   padding: 1px 6px;
   border-radius: 9px;
-  background: #262a3f;
-  color: #8088ac;
+  background: var(--bg-chip);
+  color: var(--text-ticket-dim);
   font-size: 11px;
   font-weight: 600;
   text-align: center;
@@ -2126,32 +2514,32 @@ html, body, #root {
   text-align: center;
 }
 .ticket-empty-icon {
-  color: #3b3d57;
+  color: var(--text-dim);
   margin-bottom: 4px;
 }
 .ticket-empty-title {
   font-size: 13.5px;
   font-weight: 600;
-  color: #8088ac;
+  color: var(--text-ticket-dim);
 }
 .ticket-empty-hint {
   font-size: 12px;
-  color: #565f89;
+  color: var(--text-muted);
 }
 
 /* ── ticket card ── */
 .ticket-card {
   display: flex;
   align-items: stretch;
-  background: #15161f;
-  border: 1px solid #262a3f;
+  background: var(--bg-well);
+  border: 1px solid var(--border-well);
   border-radius: 10px;
   overflow: hidden;
   transition: border-color 0.13s ease, background 0.13s ease;
 }
 .ticket-card:hover {
-  border-color: #3d425f;
-  background: #181a26;
+  border-color: var(--border-hover);
+  background: var(--bg-well-hi);
 }
 /* Clickable body of the card — opens the editor. */
 .ticket-card-open {
@@ -2182,14 +2570,14 @@ html, body, #root {
   justify-content: center;
   background: transparent;
   border: none;
-  border-left: 1px solid #262a3f;
-  color: #565f89;
+  border-left: 1px solid var(--border-well);
+  color: var(--text-muted);
   cursor: pointer;
   transition: background 0.13s ease, color 0.13s ease, transform 0.06s ease;
 }
 .ticket-card-send:hover {
-  background: #1b2030;
-  color: #7aa2f7;
+  background: var(--bg-inset-hi);
+  color: var(--accent);
 }
 .ticket-card-send:active {
   transform: scale(0.9);
@@ -2210,7 +2598,7 @@ html, body, #root {
 .ticket-card-title {
   font-size: 13px;
   font-weight: 550;
-  color: #d5dbf5;
+  color: var(--text-ticket);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2229,7 +2617,7 @@ html, body, #root {
 }
 .ticket-card-date {
   font-size: 11px;
-  color: #565f89;
+  color: var(--text-muted);
 }
 .ticket-card-pri {
   align-self: center;
@@ -2246,11 +2634,11 @@ html, body, #root {
 /* ─── Terminal "Copy as email table" context menu + toast ─── */
 .term-context-menu {
   z-index: 1000;
-  background: #1f2335;
-  border: 1px solid #414868;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-dim);
   border-radius: 6px;
   padding: 4px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 8px 24px var(--shadow-color);
   min-width: 180px;
 }
 .term-context-menu button {
@@ -2260,13 +2648,13 @@ html, body, #root {
   background: transparent;
   border: none;
   border-radius: 4px;
-  color: #c0caf5;
+  color: var(--text-bright);
   font-size: 13px;
   padding: 7px 10px;
   cursor: pointer;
 }
 .term-context-menu button:hover {
-  background: #2a2b3d;
+  background: var(--bg-surface);
 }
 /* Always-visible utility button (top-right) — opens the snapshot panel. */
 .term-util-btn {
@@ -2280,9 +2668,9 @@ html, body, #root {
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background: #2a2b3d;
-  border: 1px solid #414868;
-  color: #c0caf5;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-dim);
+  color: var(--text-bright);
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
@@ -2291,7 +2679,7 @@ html, body, #root {
 }
 .term-util-btn:hover {
   opacity: 1;
-  background: #343650;
+  background: var(--bg-surface-hi);
 }
 
 /* Snapshot panel: a frozen, selectable copy of the screen text. */
@@ -2301,8 +2689,8 @@ html, body, #root {
   z-index: 20;
   display: flex;
   flex-direction: column;
-  background: #16161e;
-  border: 1px solid #414868;
+  background: var(--bg-chrome);
+  border: 1px solid var(--border-dim);
 }
 .term-snapshot-head {
   display: flex;
@@ -2310,23 +2698,23 @@ html, body, #root {
   justify-content: space-between;
   gap: 12px;
   padding: 8px 12px;
-  background: #1f2335;
-  border-bottom: 1px solid #414868;
-  color: #9aa5ce;
+  background: var(--bg-raised);
+  border-bottom: 1px solid var(--border-dim);
+  color: var(--text-soft);
   font-size: 12px;
 }
 .term-snapshot-x {
   background: transparent;
   border: none;
-  color: #9aa5ce;
+  color: var(--text-soft);
   font-size: 14px;
   cursor: pointer;
   padding: 2px 6px;
   border-radius: 4px;
 }
 .term-snapshot-x:hover {
-  background: #2a2b3d;
-  color: #c0caf5;
+  background: var(--bg-surface);
+  color: var(--text-bright);
 }
 .term-snapshot-text {
   flex: 1;
@@ -2337,33 +2725,33 @@ html, body, #root {
   white-space: pre;
   user-select: text;
   cursor: text;
-  color: #c0caf5;
-  background: #16161e;
+  color: var(--text-bright);
+  background: var(--bg-chrome);
   font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
   font-size: 13px;
   line-height: 1.4;
 }
 .term-snapshot-text::selection {
-  background: #33467c;
+  background: var(--selection-bg);
 }
 .term-snapshot-actions {
   display: flex;
   gap: 6px;
   padding: 8px 12px;
-  background: #1f2335;
-  border-top: 1px solid #414868;
+  background: var(--bg-raised);
+  border-top: 1px solid var(--border-dim);
 }
 .term-snapshot-actions button {
-  background: #2a2b3d;
-  border: 1px solid #414868;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-dim);
   border-radius: 5px;
-  color: #c0caf5;
+  color: var(--text-bright);
   font-size: 12.5px;
   padding: 6px 12px;
   cursor: pointer;
 }
 .term-snapshot-actions button:hover {
-  background: #343650;
+  background: var(--bg-surface-hi);
 }
 .term-snapshot-done {
   margin-left: auto;
@@ -2373,13 +2761,13 @@ html, body, #root {
   bottom: 24px;
   right: 24px;
   z-index: 1000;
-  background: #1f2335;
-  border: 1px solid #7aa2f7;
-  color: #c0caf5;
+  background: var(--bg-raised);
+  border: 1px solid var(--accent);
+  color: var(--text-bright);
   font-size: 13px;
   padding: 9px 14px;
   border-radius: 6px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 8px 24px var(--shadow-color);
   pointer-events: none;
 }
 
@@ -2390,16 +2778,16 @@ html, body, #root {
 .observer-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
 .observer-switch-track {
   width: 34px; height: 19px; border-radius: 10px;
-  background: #3b4261; position: relative; transition: background 0.15s ease;
+  background: var(--switch-track); position: relative; transition: background 0.15s ease;
   display: inline-block; flex-shrink: 0;
 }
 .observer-switch-thumb {
   position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
-  border-radius: 50%; background: #c0caf5; transition: transform 0.15s ease;
+  border-radius: 50%; background: var(--switch-thumb); transition: transform 0.15s ease;
 }
-.observer-switch input:checked + .observer-switch-track { background: #9ece6a; }
+.observer-switch input:checked + .observer-switch-track { background: var(--success); }
 .observer-switch input:checked + .observer-switch-track .observer-switch-thumb {
-  transform: translateX(15px); background: #1a1b26;
+  transform: translateX(15px); background: var(--on-accent);
 }
 .observer-switch input:disabled + .observer-switch-track { opacity: 0.5; }
 
@@ -2417,14 +2805,14 @@ html, body, #root {
   font: inherit;
   color: inherit;
   cursor: pointer;
-  background: #15161f;
-  border: 1px solid #262a3f;
-  border-left: 3px solid #565f89;
+  background: var(--bg-well);
+  border: 1px solid var(--border-well);
+  border-left: 3px solid var(--border-strong);
   border-radius: 9px;
   padding: 9px 26px 9px 12px;
   transition: border-color 0.12s ease, background 0.12s ease;
 }
-.obs-card:hover { background: #181a26; border-color: #323752; border-left-width: 3px; }
+.obs-card:hover { background: var(--bg-well-hi); border-color: var(--border-hover); border-left-width: 3px; }
 .obs-card:active { transform: scale(0.995); }
 
 .obs-card-top {
@@ -2450,7 +2838,7 @@ html, body, #root {
 .obs-chip-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
 .obs-card-cat {
   font-size: 10px;
-  color: #565f89;
+  color: var(--text-muted);
   letter-spacing: 0.05em;
   text-transform: uppercase;
   white-space: nowrap;
@@ -2461,19 +2849,19 @@ html, body, #root {
   margin-left: auto;
   flex-shrink: 0;
   font-size: 10px;
-  color: #414868;
+  color: var(--text-dim);
   font-variant-numeric: tabular-nums;
 }
 .obs-card-title {
   font-size: 12.5px;
   font-weight: 600;
-  color: #c0caf5;
+  color: var(--text-bright);
   line-height: 1.4;
   word-break: break-word;
 }
 .obs-card-body {
   font-size: 11.5px;
-  color: #9aa5ce;
+  color: var(--text-soft);
   line-height: 1.5;
   word-break: break-word;
 }
@@ -2481,9 +2869,9 @@ html, body, #root {
 .obs-card-facts { display: flex; flex-wrap: wrap; gap: 6px; }
 .obs-fact {
   font-size: 10px;
-  color: #565f89;
-  background: #1c1e2b;
-  border: 1px solid #262a3f;
+  color: var(--text-muted);
+  background: var(--bg-chip-soft);
+  border: 1px solid var(--border-well);
   border-radius: 5px;
   padding: 1px 6px;
   font-variant-numeric: tabular-nums;
@@ -2493,7 +2881,7 @@ html, body, #root {
   right: 10px;
   top: 10px;
   font-size: 10px;
-  color: #414868;
+  color: var(--text-dim);
   transition: transform 0.12s ease;
 }
 .obs-card-caret.open { transform: rotate(90deg); }
@@ -2505,24 +2893,24 @@ html, body, #root {
   gap: 8px;
   padding: 3px 12px 3px 14px;
   font-size: 11px;
-  color: #565f89;
+  color: var(--text-muted);
   line-height: 1.45;
 }
 .obs-line-dot {
   flex-shrink: 0;
   width: 4px; height: 4px;
   border-radius: 50%;
-  background: #3b4261;
+  background: var(--switch-track);
   align-self: center;
 }
-.obs-line.health { color: #e0af68; }
-.obs-line.health .obs-line-dot { background: #e0af68; }
+.obs-line.health { color: var(--warning); }
+.obs-line.health .obs-line-dot { background: var(--warning); }
 .obs-line-text { min-width: 0; word-break: break-word; }
 .obs-line-time {
   margin-left: auto;
   flex-shrink: 0;
   font-size: 10px;
-  color: #414868;
+  color: var(--text-dim);
   font-variant-numeric: tabular-nums;
 }
 
@@ -2533,12 +2921,12 @@ html, body, #root {
   justify-content: space-between;
   gap: 10px;
   padding: 8px 14px;
-  border-bottom: 1px solid #23263a;
+  border-bottom: 1px solid var(--border-well);
 }
 .obs-sensitivity {
   display: inline-flex;
-  background: #15161f;
-  border: 1px solid #262a3f;
+  background: var(--bg-well);
+  border: 1px solid var(--border-well);
   border-radius: 7px;
   padding: 2px;
   gap: 2px;
@@ -2547,7 +2935,7 @@ html, body, #root {
   appearance: none;
   border: none;
   background: transparent;
-  color: #565f89;
+  color: var(--text-muted);
   font: inherit;
   font-size: 10.5px;
   font-weight: 600;
@@ -2557,8 +2945,8 @@ html, body, #root {
   transition: background 0.12s ease, color 0.12s ease;
   white-space: nowrap;
 }
-.obs-sens-btn:hover { color: #9aa5ce; }
-.obs-sens-btn.active { background: #2a2f4a; color: #c0caf5; }
+.obs-sens-btn:hover { color: var(--text-soft); }
+.obs-sens-btn.active { background: var(--bg-selected); color: var(--text-bright); }
 
 /* "reviewing" bouncing dots */
 .obs-reviewing {
@@ -2566,13 +2954,13 @@ html, body, #root {
   align-items: center;
   gap: 3px;
   font-size: 10.5px;
-  color: #7aa2f7;
+  color: var(--accent);
   letter-spacing: 0.03em;
 }
 .obs-reviewing-dot {
   width: 4px; height: 4px;
   border-radius: 50%;
-  background: #7aa2f7;
+  background: var(--accent);
   animation: obs-dot-bounce 1.1s ease-in-out infinite;
 }
 .obs-reviewing-dot:nth-child(2) { animation-delay: 0.15s; }
@@ -2584,13 +2972,13 @@ html, body, #root {
 
 /* Pulsing eye badge while a model review is in flight */
 .obs-badge { position: relative; }
-.obs-badge.reviewing { color: #7aa2f7; }
+.obs-badge.reviewing { color: var(--accent); }
 .obs-badge.reviewing::after {
   content: '';
   position: absolute;
   inset: -1px;
   border-radius: inherit;
-  border: 1px solid #7aa2f7;
+  border: 1px solid var(--accent);
   animation: obs-badge-pulse 1.6s ease-out infinite;
   pointer-events: none;
 }