refactor(console): change accent from green to yellow (ClickHouse-like)

- Update CSS vars --emerald/* from #10b981 to #eab308
- Add --accent/* vars for semantic naming
- Fix hardcoded #10b981/#059669 in logo gradients, DAG colors, favicon
- All JS inline var(--emerald) refs work automatically via CSS var

Author: edsuwarna

console/css/style.css

@@ -11,9 +11,12 @@
   --text-primary: #e8eaed;
   --text-secondary: #9aa0a8;
   --text-tertiary: #5c626e;
-  --emerald: #10b981;
-  --emerald-dim: rgba(16,185,129,0.12);
-  --emerald-glow: rgba(16,185,129,0.08);
+  --emerald: #eab308;
+  --emerald-dim: rgba(234,179,8,0.12);
+  --emerald-glow: rgba(234,179,8,0.08);
+  --accent: #eab308;
+  --accent-dim: rgba(234,179,8,0.12);
+  --accent-glow: rgba(234,179,8,0.08);
   --blue: #3b82f6;
   --blue-dim: rgba(59,130,246,0.12);
   --amber: #f59e0b;
@@ -94,7 +97,7 @@ a:hover { opacity: 0.85; }
 .sidebar-logo .logo-icon {
   width: 28px;
   height: 28px;
-  background: linear-gradient(135deg, #10b981, #059669);
+  background: linear-gradient(135deg, #eab308, #ca8a04);
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -391,7 +394,7 @@ a:hover { opacity: 0.85; }
 }
 
 .btn-primary:hover {
-  background: #059669;
+  background: #ca8a04;
   box-shadow: 0 0 20px var(--emerald-glow);
 }
 
@@ -568,7 +571,7 @@ table tr:last-child td:last-child { border-radius: 0 0 var(--radius) 0; }
   display: inline-block;
 }
 
-.status .dot.green { background: var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
+.status .dot.green { background: var(--emerald); box-shadow: 0 0 6px rgba(234,179,8,0.4); }
 .status .dot.amber { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.4); }
 .status .dot.red { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,0.4); }
 .status .dot.gray { background: var(--text-tertiary); }
@@ -799,9 +802,9 @@ table tr:last-child td:last-child { border-radius: 0 0 var(--radius) 0; }
 }
 
 .pipeline-flow .pf-node.pipeline-center {
-  background: rgba(16,185,129,0.15);
+  background: rgba(234,179,8,0.15);
   color: var(--emerald);
-  border: 1px solid rgba(16,185,129,0.2);
+  border: 1px solid rgba(234,179,8,0.2);
   font-weight: 600;
 }
 
@@ -1191,12 +1194,12 @@ table tr:last-child td:last-child { border-radius: 0 0 var(--radius) 0; }
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   width: 70px; height: 70px;
-  background: linear-gradient(135deg, #10b981, #059669);
+  background: linear-gradient(135deg, #eab308, #ca8a04);
   border-radius: 20px;
   display: flex; align-items: center; justify-content: center;
   font-size: 28px;
   color: #fff;
-  box-shadow: 0 0 40px rgba(16,185,129,0.3);
+  box-shadow: 0 0 40px rgba(234,179,8,0.3);
 }
 
 .login-right .graphic .flow-line {

console/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Arus — Data Pipeline Platform</title>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%2310b981'/><text x='16' y='23' text-anchor='middle' fill='white' font-size='20' font-weight='bold'>A</text></svg>">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%23eab308'/><text x='16' y='23' text-anchor='middle' fill='white' font-size='20' font-weight='bold'>A</text></svg>">
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/mobile.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">

console/js/components/sidebar.js

@@ -53,7 +53,7 @@ function renderSidebar(user) {
   return `
     <aside class="sidebar" id="sidebar">
       <div class="sidebar-logo">
-        <span class="logo-icon" style="width:28px;height:28px;background:linear-gradient(135deg,#10b981,#059669);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0;">Ar</span>
+        <span class="logo-icon" style="width:28px;height:28px;background:linear-gradient(135deg,#eab308,#ca8a04);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0;">Ar</span>
         <span>Ar<em>us</em></span>
       </div>
       <nav class="sidebar-nav">${navHtml}</nav>

console/js/pages/dag.js

@@ -2,7 +2,7 @@
 let dagState = { panX: 0, panY: 0, zoom: 1 };
 const DAG_LAYERS = ['source', 'raw', 'target'];
 const DAG_LABELS = { source: 'SOURCE LAYER', raw: 'RAW LAYER', target: 'TARGET LAYER' };
-const LAYER_COLORS = { source: '#3b82f6', raw: '#f59e0b', target: '#10b981' };
+const LAYER_COLORS = { source: '#3b82f6', raw: '#f59e0b', target: '#eab308' };
 
 async function renderDagPage(container) {
     container.innerHTML = `<div class="loading"><div class="spinner"></div><p>Loading pipelines...</p></div>`;
@@ -31,7 +31,7 @@ async function renderDagPage(container) {
             </div>
 
             <div class="dag-legend" id="dag-legend" style="display:none">
-                <span class="legend-item"><span class="legend-dot" style="background:#10b981"></span> Success</span>
+                <span class="legend-item"><span class="legend-dot" style="background:#eab308"></span> Success</span>
                 <span class="legend-item"><span class="legend-dot" style="background:#3b82f6"></span> Running</span>
                 <span class="legend-item"><span class="legend-dot" style="background:#f59e0b"></span> Stale</span>
                 <span class="legend-item"><span class="legend-dot" style="background:#ef4444"></span> Failed</span>
@@ -171,15 +171,15 @@ function renderDagGraph(pipelines) {
     });
 
     const statusColors = {
-        success: '#10b981', failed: '#ef4444', running: '#3b82f6',
+        success: '#eab308', failed: '#ef4444', running: '#3b82f6',
         stale: '#f59e0b', not_started: '#6b7280', paused: '#f59e0b',
-        active: '#10b981', inactive: '#6b7280',
+        active: '#eab308', inactive: '#6b7280',
     };
 
     const layerLabels = {
         source: { x: layerX.source, label: 'SOURCE LAYER', color: '#3b82f6' },
         raw: { x: layerX.raw, label: 'RAW LAYER', color: '#f59e0b' },
-        target: { x: layerX.target, label: 'TARGET LAYER', color: '#10b981' },
+        target: { x: layerX.target, label: 'TARGET LAYER', color: '#eab308' },
     };
 
     const g = dagState;

console/js/pages/login.js

@@ -5,7 +5,7 @@ function renderLogin() {
       <div class="login-left">
         <div class="login-logo">
           <span style="display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;">
-            <span style="width:36px;height:36px;background:linear-gradient(135deg,#10b981,#059669);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;">Ar</span>
+            <span style="width:36px;height:36px;background:linear-gradient(135deg,#eab308,#ca8a04);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;">Ar</span>
             <span style="font-size:24px;">Ar<em>us</em></span>
           </span>
         </div>