Add CSS variables for code/editor surfaces

Introduce new CSS variables (--bg-input, --bg-code, --code-text, --code-gutter) in base.css for both dark and light themes and replace hardcoded colors across components.css to use these variables. Updates touch textareas, filter inputs, diff/code previews, markdown code blocks and git output to centralize theming. Also add light-mode styles for modal backdrops, syntax token colors, and diff gutter border to improve light/dark parity and maintainability. Files changed: frontend/css/base.css, frontend/css/components.css.

frontend/css/base.css

@@ -24,6 +24,12 @@
   --success: #3FB950;
   --danger: #F85149;
 
+  /* Code / editor surfaces */
+  --bg-input: rgba(0, 0, 0, 0.28);
+  --bg-code: #0B0D11;
+  --code-text: #E6EDF3;
+  --code-gutter: #7D8590;
+
   /* Shape */
   --radius-md: 7px;
   --radius-lg: 11px;
@@ -48,6 +54,12 @@
   --success: #16a34a;
   --danger: #dc2626;
   --shadow: 0 8px 28px rgba(197, 123, 39, 0.12);
+
+  /* Code / editor surfaces */
+  --bg-input: rgba(255, 255, 255, 0.85);
+  --bg-code: #F8F3EC;
+  --code-text: #2B1D0E;
+  --code-gutter: #8B7A60;
 }
 
 * {
@@ -142,7 +154,7 @@ textarea {
   padding: 5px 10px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
-  background: rgba(0, 0, 0, 0.28);
+  background: var(--bg-input);
   color: var(--text-main);
   font-size: 13px;
   transition: border-color 0.12s ease, box-shadow 0.12s ease;

frontend/css/components.css

@@ -174,7 +174,7 @@
   align-items: stretch;
   grid-column: 1 / -1;
   grid-row: 1;
-  background: linear-gradient(180deg, #222931 0%, var(--bg-panel) 100%);
+  background: linear-gradient(180deg, var(--bg-panel-lift) 0%, var(--bg-panel) 100%);
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
@@ -741,7 +741,7 @@
   font-size: 12px;
   border-color: var(--border);
   border-radius: 5px;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--bg-input);
 }
 
 .gd-filter-input:focus {
@@ -962,7 +962,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: auto;
-  background: #0B0D11;
+  background: var(--bg-code);
 }
 
 .diff-preview-inline {
@@ -975,7 +975,7 @@
   display: grid;
   grid-template-columns: 32px minmax(0, 1fr);
   min-height: 20px;
-  color: #E6EDF3;
+  color: var(--code-text);
 }
 
 .diff-line code {
@@ -985,7 +985,7 @@
 
 .diff-gutter {
   padding: 2px 8px;
-  color: #7D8590;
+  color: var(--code-gutter);
   text-align: center;
   user-select: none;
   border-right: 1px solid rgba(125, 133, 144, 0.18);
@@ -1633,7 +1633,8 @@
   padding: 12px;
   overflow: auto;
   border-radius: var(--radius-md);
-  background: #0B0D11;
+  background: var(--bg-code);
+  color: var(--code-text);
 }
 .markdown-body .markdown-code code {
   padding: 0;
@@ -1649,8 +1650,8 @@
   margin: 0;
   padding: 14px 16px;
   overflow: auto;
-  background: #0B0D11;
+  background: var(--bg-code);
-  color: #E6EDF3;
+  color: var(--code-text);
   font-family: ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace;
   font-size: 12px;
   line-height: 1.7;
@@ -1666,7 +1667,7 @@
 /* ── Git output ───────────────────────────────────────────────────────────── */
 
 .git-output {
-  background: #0B0D11;
+  background: var(--bg-code);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 10px 12px;
@@ -1770,6 +1771,27 @@
   background: rgba(197, 123, 39, 0.38);
 }
 
+/* ── Light mode – modal backdrops ─────────────────────────────────────────── */
+
+:root[data-theme="light"] .gd-modal-backdrop,
+:root[data-theme="light"] .modal-backdrop {
+  background: rgba(80, 55, 20, 0.45);
+}
+
+/* ── Light mode – syntax highlighting ────────────────────────────────────── */
+
+:root[data-theme="light"] .syntax-keyword { color: #B5261E; }
+:root[data-theme="light"] .syntax-string  { color: #0A6B3F; }
+:root[data-theme="light"] .syntax-comment { color: #7A6A50; }
+:root[data-theme="light"] .syntax-number  { color: #1A5CB5; }
+:root[data-theme="light"] .syntax-key     { color: #6B3FA0; }
+
+/* ── Light mode – diff gutter border ─────────────────────────────────────── */
+
+:root[data-theme="light"] .diff-gutter {
+  border-right-color: rgba(139, 122, 96, 0.25);
+}
+
 /* ── Accent selection highlight ───────────────────────────────────────────── */
 
 ::selection {