Refactor CSS styles for brand consistency and update globe rendering colors

- Updated `discipline-panel.css` and `entrance.css` to replace hardcoded colors with CSS variables for improved brand consistency.
- Modified `theme.css` to redefine brand color variables, enhancing the overall design and accessibility.
- Adjusted `globe.js` to update color palette for rendering, aligning with the new brand color scheme.

Author: GaabDevWeb

frontend/assets/css/discipline-panel.css

@@ -157,7 +157,7 @@
 }
 
 .discipline-panel__next:hover {
-    background: rgba(185, 28, 28, 0.2);
+    background: var(--brand-surface);
 }
 
 .active-discipline-badge {

frontend/assets/css/entrance.css

@@ -186,8 +186,8 @@ body.ui-landing .app .entrance-suggestion {
 .entrance-kernel {
   -webkit-background-clip: text;
   background-clip: text;
-  -webkit-text-fill-color: #b91c1c;
-  color: #b91c1c;
+  -webkit-text-fill-color: var(--brand-primary);
+  color: var(--brand-primary);
 }
 
 .entrance-subtitle {
@@ -218,16 +218,16 @@ body.ui-landing .app .entrance-suggestion {
 }
 
 .entrance-discipline-pills .cmd-pill:hover {
-  border-color: #b91c1c;
+  border-color: var(--brand-primary);
   color: #fff;
-  background: rgba(185, 28, 28, 0.2);
+  background: var(--brand-surface);
 }
 
 .entrance-caret {
   display: none;
 }
 
-/* -------- Cycling command suggestions (red pill, white text) -------- */
+/* -------- Cycling command suggestions (brand pill) -------- */
 .entrance-suggestion-wrap {
   margin-top: 22px;
   min-height: 2.4em;          /* reserve space so the layout never jumps */
@@ -239,14 +239,14 @@ body.ui-landing .app .entrance-suggestion {
   max-width: 100%;
   padding: 8px 14px;
   border-radius: 12px;
-  background: #b91c1c;
-  color: #ffffff;
+  background: var(--brand-primary);
+  color: var(--brand-on-primary);
   font-family: var(--font-mono, 'JetBrains Mono', monospace);
   font-size: clamp(0.82rem, 1.6vw, 1rem);
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: 0.01em;
-  box-shadow: 0 8px 22px rgba(185, 28, 28, 0.35);
+  box-shadow: 0 8px 22px rgba(176, 147, 62, 0.25);
   cursor: pointer;            /* click to drop the suggestion into the input */
   pointer-events: auto;       /* re-enable clicks (overlay is click-through) */
 }
@@ -261,7 +261,7 @@ body.ui-landing .app .entrance-suggestion {
   height: 1.05em;
   margin-left: 3px;
   vertical-align: -0.12em;
-  background: #ffffff;
+  background: var(--brand-on-primary);
   border-radius: 1px;
   animation: entrance-blink 1s steps(1) infinite;
 }

frontend/assets/css/theme.css

@@ -1,21 +1,20 @@
 /* ===== Design Tokens ===== */
+/* Brand accent: #B0933E — use tokens, never hardcode. Error red is semantic only (--error). */
 :root {
     --bg: #0a0a0a;
     --surface: #27272A;
     --surface-2: #2F2F33;
     --border: #3F3F46;
-    --brand-primary: #b91c1c;
-    --brand-primary-hover: #dc2626;
-    --brand-surface: rgba(185, 28, 28, 0.12);
-    --brand-muted: rgba(185, 28, 28, 0.45);
+    --brand-primary: #B0933E;
+    --brand-primary-hover: #C4A855;
+    --brand-on-primary: #0a0a0a;
+    --brand-surface: rgba(176, 147, 62, 0.12);
+    --brand-muted: rgba(176, 147, 62, 0.45);
     --accent: var(--brand-primary);
-    --color-action: var(--brand-primary);
-    --color-brand: var(--brand-primary);
     --color-hint: var(--text-muted);
-    --color-code-inline: #fca5a5;
+    --color-code-inline: #D4BC82;
     --text: #E4E4E7;
     --text-muted: #B4B4BC;
-    --user-bg: var(--brand-primary);
     --bot-bg: #27272A;
     --error: #F87171;
     --error-bg: #3E1C1C;
@@ -778,7 +777,7 @@ body.chat-active .composer-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--brand-on-primary);
     transition: background 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
 }
 
@@ -801,7 +800,7 @@ body.chat-active .composer-wrap {
     background: var(--btn-streaming);
     cursor: pointer;
     opacity: 1;
-    color: #fff;
+    color: var(--brand-on-primary);
 }
 
 #send-button.send-button--streaming svg {
@@ -812,8 +811,8 @@ body.chat-active .composer-wrap {
     content: "";
     width: 16px;
     height: 16px;
-    border: 2px solid rgba(255, 255, 255, 0.35);
-    border-top-color: #fff;
+    border: 2px solid rgba(10, 10, 10, 0.25);
+    border-top-color: var(--brand-on-primary);
     border-radius: 50%;
     animation: send-spin 0.75s linear infinite;
 }
@@ -1008,7 +1007,7 @@ body.chat-active .composer-wrap {
 }
 
 .scope-option-cmd {
-    color: var(--color-red-500);
+    color: var(--accent);
     font-family: var(--font-mono);
 }
 

frontend/src/globe.js

@@ -124,7 +124,7 @@ export function createGlobe(canvas, opts = {}) {
   const PLATE_SCALE = isThinking ? 0.88 : 0.9;
 
   const PALETTE = isThinking
-    ? { fill: [185, 28, 28], stroke: [220, 100, 100], vertex: [245, 200, 200] }
+    ? { fill: [176, 147, 62], stroke: [200, 175, 110], vertex: [225, 210, 170] }
     : { fill: [220, 222, 228], stroke: [235, 237, 242], vertex: [248, 249, 252] };
 
   function rotate(p) {
@@ -366,9 +366,9 @@ export function createGlobe(canvas, opts = {}) {
     const pulse = 0.5 + 0.5 * Math.sin(t * 0.0028);
     const glowR = baseR * (1.18 + pulse * 0.05);
     const grd = ctx.createRadialGradient(cxPix, cyPix, 0, cxPix, cyPix, glowR);
-    grd.addColorStop(0, `rgba(185, 28, 28, ${0.14 + pulse * 0.06})`);
-    grd.addColorStop(0.6, "rgba(185, 28, 28, 0.04)");
-    grd.addColorStop(1, "rgba(185, 28, 28, 0)");
+    grd.addColorStop(0, `rgba(176, 147, 62, ${0.14 + pulse * 0.06})`);
+    grd.addColorStop(0.6, "rgba(176, 147, 62, 0.04)");
+    grd.addColorStop(1, "rgba(176, 147, 62, 0)");
     ctx.fillStyle = grd;
     ctx.beginPath();
     ctx.arc(cxPix, cyPix, glowR, 0, Math.PI * 2);