style(theme): refresh dark theme palette and control contrast

Update the dark theme tokens and UI surfaces to improve legibility
and clarify interactive boundaries across the app. Controls such as
buttons, inputs, and focus outlines were standardized and simplified
to reduce visual noise while preserving hierarchy.

- Overhaul color tokens and surface backgrounds for consistent tones
- Simplify primary button treatment and adjust focus/outline behavior
- Add targeted dark-mode rules to separate chrome (tabs, toolbars)

src/app.css

@@ -1,57 +1,57 @@
 @import "tailwindcss";
 
 @theme {
-  --color-ink: #edf3ff;
+  --color-ink: #f0f1f2;
-  --color-ink-muted: #b1bad0;
+  --color-ink-muted: #c1c3c6;
-  --color-ink-faint: #6f7c96;
+  --color-ink-faint: #7f8389;
-  --color-ink-dim: #8895ad;
+  --color-ink-dim: #9da1a6;
-  --color-ink-quiet: #98a4bb;
+  --color-ink-quiet: #aeb1b5;
 
-  --color-surface: rgba(18, 23, 34, 0.88);
+  --color-surface: #2b2e34;
-  --color-surface-alt: #090d14;
+  --color-surface-alt: #1b1c1e;
-  --color-surface-dim: rgba(15, 20, 30, 0.94);
+  --color-surface-dim: #2e3137;
-  --color-surface-hover: rgba(36, 45, 64, 0.78);
+  --color-surface-hover: #363a41;
-  --color-surface-raised: rgba(23, 29, 43, 0.92);
+  --color-surface-raised: #32363d;
-  --color-surface-solid: #171d2b;
+  --color-surface-solid: #222328;
 
-  --color-border: rgba(90, 111, 154, 0.3);
+  --color-border: #3a3e45;
-  --color-border-subtle: rgba(226, 232, 240, 0.08);
+  --color-border-subtle: #34383e;
-  --color-border-input: rgba(77, 182, 214, 0.26);
+  --color-border-input: #465159;
 
-  --color-primary: #6f8cff;
+  --color-primary: #25a7c7;
-  --color-primary-dark: #5d74e8;
+  --color-primary-dark: #188ca9;
-  --color-accent: #4db6d6;
+  --color-accent: #2eb5d1;
 
-  --color-bar: rgba(7, 10, 16, 0.94);
+  --color-bar: #292c30;
-  --color-bar-text: #f1f5ff;
+  --color-bar-text: #f0f1f2;
-  --color-bar-muted: #7f8ba3;
+  --color-bar-muted: #8b8f94;
 
   --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
 }
 
 :root {
   --app-color-scheme: dark;
-  --app-bg: linear-gradient(135deg, #070a10 0%, #0c111a 48%, #090e16 100%);
+  --app-bg: #222328;
-  --app-button-bg: linear-gradient(180deg, rgba(36, 45, 64, 0.92), rgba(22, 28, 42, 0.94));
+  --app-button-bg: #32363d;
-  --app-input-bg: rgba(10, 14, 22, 0.82);
+  --app-input-bg: #22252a;
-  --app-select-option-bg: #171d2b;
+  --app-select-option-bg: #32363d;
   --app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.038), transparent 70%);
   --app-panel-shadow: 0 18px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
-  --app-dialog-backdrop: rgba(4, 7, 12, 0.58);
+  --app-dialog-backdrop: rgba(12, 13, 15, 0.7);
-  --app-dialog-bg: #101622;
+  --app-dialog-bg: #22252a;
-  --app-dialog-chrome: #141b29;
+  --app-dialog-chrome: #2b2e34;
   --app-dialog-shadow: 0 24px 68px rgba(0, 0, 0, 0.54), 0 2px 12px rgba(0,0,0,0.32);
-  --app-settings-row-bg: #141b29;
+  --app-settings-row-bg: #2b2e34;
-  --app-scrollbar-thumb: #303a4f;
+  --app-scrollbar-thumb: #4a4e55;
-  --app-scrollbar-thumb-hover: #44506a;
+  --app-scrollbar-thumb-hover: #60656d;
 
-  --code-surface: #111321;
+  --code-surface: #222328;
-  --code-surface-raised: #171a2b;
+  --code-surface-raised: #2b2e34;
-  --code-surface-subtle: #0d101a;
+  --code-surface-subtle: #1f2024;
-  --code-surface-muted: #10131e;
+  --code-surface-muted: #26282d;
-  --code-surface-meta: #0c0e18;
+  --code-surface-meta: #1d1e22;
-  --code-input-bg: #0b0e18;
+  --code-input-bg: #22252a;
-  --code-hover-bg: #151a2b;
+  --code-hover-bg: #30343a;
   --code-add-text: #5dd88a;
   --code-add-strong: #4eca76;
   --code-add-bg: rgba(78, 202, 118, 0.09);
@@ -190,7 +190,7 @@
   }
   input:focus, textarea:focus, select:focus {
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.22), 0 0 32px rgba(65, 209, 255, 0.08);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent), 0 0 30px color-mix(in srgb, var(--color-accent) 7%, transparent);
   }
   input { height: 34px; padding: 0 11px; }
   textarea { resize: vertical; min-height: 132px; padding: 10px 11px; line-height: 1.45; }
@@ -334,15 +334,15 @@
   }
 
   .btn-primary {
-    border-color: rgba(111, 140, 255, 0.72);
+    border-color: color-mix(in srgb, var(--color-primary) 82%, white);
     color: #ffffff;
-    background: linear-gradient(135deg, #5f7df2 0%, #238eb4 100%);
+    background: var(--color-primary);
-    box-shadow: 0 10px 24px rgba(77, 182, 214, 0.16);
+    box-shadow: none;
     font-weight: 600;
   }
   .btn-primary:hover:not(:disabled) {
-    border-color: rgba(77, 182, 214, 0.78);
+    border-color: color-mix(in srgb, var(--color-accent) 78%, white);
-    background: linear-gradient(135deg, #6f8cff 0%, #2da0c7 100%);
+    background: var(--color-accent);
     color: #ffffff;
   }
 
@@ -6227,22 +6227,23 @@
   --ui-radius-sm: 5px;
   --ui-control-height: 32px;
   --ui-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
-  --app-bg: #0d1118;
+  --app-bg: #222328;
-  --app-button-bg: #171d27;
+  --app-button-bg: #32363d;
-  --app-input-bg: #101620;
+  --app-input-bg: #22252a;
   --app-panel-highlight: none;
   --app-panel-shadow: none;
-  --color-surface: #111720;
+  --color-surface: #2b2e34;
-  --color-surface-alt: #0d121a;
+  --color-surface-alt: #1b1c1e;
-  --color-surface-dim: #141b25;
+  --color-surface-dim: #2e3137;
-  --color-surface-hover: #1b2431;
+  --color-surface-hover: #363a41;
-  --color-surface-raised: #151c27;
+  --color-surface-raised: #32363d;
-  --color-surface-solid: #111720;
+  --color-surface-solid: #222328;
-  --color-border: #2a3546;
+  --color-border: #3a3e45;
-  --color-border-subtle: #222c3a;
+  --color-border-subtle: #34383e;
-  --color-primary: #4d8dff;
+  --color-border-input: #465159;
-  --color-primary-dark: #3477ed;
+  --color-primary: #25a7c7;
-  --color-accent: #65a2ff;
+  --color-primary-dark: #188ca9;
+  --color-accent: #2eb5d1;
 }
 
 :root[data-theme="light"] {
@@ -6279,8 +6280,8 @@ button:focus-visible,
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
+  outline: 2px solid color-mix(in srgb, var(--color-accent) 88%, transparent);
-  outline-offset: 1px;
+  outline-offset: 2px;
 }
 input, textarea, select { border-radius: var(--ui-radius-sm); }
 input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
@@ -6289,7 +6290,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 .shell-body { gap: 0; padding: 0; }
 .titlebar {
   border-bottom: 1px solid var(--color-border-subtle);
-  background: var(--color-surface-solid);
+  background: var(--color-bar);
 }
 .titlebar-brand { min-width: 140px; padding-left: 14px; border-right: 0; font-size: 14px; }
 .titlebar-brand-icon,
@@ -6332,7 +6333,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   border: 0;
   border-bottom: 1px solid var(--color-border);
   border-radius: 0;
-  background: var(--color-surface-solid);
+  background: var(--color-surface-raised);
 }
 .repo-toolbar-sync { grid-template-rows: 10px 36px; }
 .repo-toolbar-group-label { padding-left: 1px; font-size: 8.5px; letter-spacing: .13em; }
@@ -6348,7 +6349,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   background: var(--color-border-subtle);
   row-gap: 0;
 }
-.left-sidebar { background: var(--color-surface-solid); }
+.left-sidebar { background: var(--color-surface); }
 .main-panel { border: 0; border-radius: 0; background: var(--color-surface-solid); }
 .history-aside { background: var(--color-border-subtle); row-gap: 0; }
 
@@ -6360,6 +6361,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   backdrop-filter: none;
 }
 .left-sidebar .panel + .panel { border-top: 1px solid var(--color-border); }
+.left-sidebar .panel { background: var(--color-surface); }
 .section-head {
   min-height: 50px;
   padding: 8px 12px;
@@ -6720,6 +6722,115 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 .repo-section > header { background: var(--color-surface-dim); }
 .repo-row-main:hover:not(:disabled) { background: var(--color-surface-hover); }
 
+/* Dark control contrast --------------------------------------------------
+   Keep GitKraken's restrained graphite palette while making interactive
+   boundaries and text states unambiguous on every dark surface. */
+:root:not([data-theme="light"]) .btn-primary {
+  border-color: #2eb5d1;
+  color: #ffffff;
+  background: #126f84;
+}
+:root:not([data-theme="light"]) .btn-primary:hover:not(:disabled) {
+  border-color: #55c5dc;
+  color: #ffffff;
+  background: #147c94;
+}
+:root:not([data-theme="light"]) .btn-secondary {
+  border-color: #596169;
+  color: #d7dadc;
+  background: #32363d;
+}
+:root:not([data-theme="light"]) .btn-secondary:hover:not(:disabled) {
+  border-color: #707982;
+  color: #ffffff;
+  background: #41464d;
+}
+:root:not([data-theme="light"]) input,
+:root:not([data-theme="light"]) textarea,
+:root:not([data-theme="light"]) select,
+:root:not([data-theme="light"]) .select-menu-trigger {
+  border-color: #596169;
+}
+:root:not([data-theme="light"]) input:hover:not(:disabled),
+:root:not([data-theme="light"]) textarea:hover:not(:disabled),
+:root:not([data-theme="light"]) select:hover:not(:disabled),
+:root:not([data-theme="light"]) .select-menu-trigger:hover:not(:disabled) {
+  border-color: #707982;
+}
+:root:not([data-theme="light"]) input:focus,
+:root:not([data-theme="light"]) textarea:focus,
+:root:not([data-theme="light"]) select:focus,
+:root:not([data-theme="light"]) .select-menu.open .select-menu-trigger {
+  border-color: var(--color-accent);
+}
+:root:not([data-theme="light"]) .repo-action-group,
+:root:not([data-theme="light"]) .dialog-icon-button {
+  border-color: #535a62;
+}
+:root:not([data-theme="light"]) .repo-action:hover:not(:disabled),
+:root:not([data-theme="light"]) .repo-action.active,
+:root:not([data-theme="light"]) .dialog-icon-button:hover:not(:disabled) {
+  border-color: #707982;
+  background: #3b4047;
+}
+
+/* Dark app chrome separation -------------------------------------------
+   Tabs, command toolbar and workspace should read as three adjacent
+   layers instead of one uninterrupted gray strip. */
+:root:not([data-theme="light"]) .repo-tabbar {
+  border-bottom-color: #505760;
+  background: #26292f;
+  box-shadow:
+    inset 0 -1px 0 #191b1f,
+    0 1px 0 rgba(255, 255, 255, 0.035);
+}
+:root:not([data-theme="light"]) .repo-tabs-scroll {
+  border-left-color: #454b53;
+}
+:root:not([data-theme="light"]) .repo-tab-wrap {
+  border-right-color: #454b53;
+  background: #292c32;
+}
+:root:not([data-theme="light"]) .repo-tab-wrap:hover {
+  background: #30343a;
+}
+:root:not([data-theme="light"]) .repo-tab-wrap.active,
+:root:not([data-theme="light"]) .repo-tab.management.active {
+  background: #343941;
+  box-shadow:
+    inset 0 -3px 0 var(--color-accent),
+    inset 1px 0 0 #4c535b,
+    inset -1px 0 0 #4c535b,
+    inset 0 1px 0 rgba(255, 255, 255, 0.045);
+}
+:root:not([data-theme="light"]) .repo-tab-add {
+  border-left-color: #454b53;
+  background: #292c32;
+}
+:root:not([data-theme="light"]) .repo-toolbar {
+  border-top: 1px solid #424850;
+  border-bottom-color: #505760;
+  background: #30343a;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.035),
+    0 2px 0 #191b1f;
+}
+:root:not([data-theme="light"]) .repo-action-group {
+  border-color: #596169;
+  background: #292d32;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
+}
+:root:not([data-theme="light"]) .repo-action-group > .repo-action,
+:root:not([data-theme="light"]) .repo-action-group > .repo-history-wrap > .repo-action {
+  border-right-color: #484e55;
+}
+:root:not([data-theme="light"]) .repo-toolbar-divider {
+  background: #555c64;
+}
+:root:not([data-theme="light"]) .workspace {
+  box-shadow: inset 0 1px 0 #17191c;
+}
+
 @media (max-width: 1180px) {
   .repo-action { padding-inline: 10px; }
   .repo-toolbar-divider { margin-inline: 2px; }