From b31f4dea16de07e7c831e3e0c460bf18ea52698d Mon Sep 17 00:00:00 2001
From: diogobaltazar <d.ogobaltazar+github@gmail.com>
Date: Tue, 24 Mar 2026 12:44:18 +0000
Subject: [PATCH 1/2] fix(ui): ochre outer halo

---
 src/move37/web/src/App.css | 51 ++++++++++++++++++++------------------
 src/move37/web/src/App.jsx | 10 +++++---
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/move37/web/src/App.css b/src/move37/web/src/App.css
index de28659..3efa0f0 100644
--- a/src/move37/web/src/App.css
+++ b/src/move37/web/src/App.css
@@ -8,7 +8,7 @@
   --text-soft: #95add0;
   --accent: #8ee8ff;
   --scheduled: #99ffcf;
-  --working: #ffe18d;
+  --working: #9fe8ff;
   min-height: 100dvh;
   position: relative;
   display: block;
@@ -515,29 +515,29 @@
 }
 
 .dock-button.focus-pause {
-  border-color: #ffd98a52;
-  background: linear-gradient(180deg, #312610bf 0%, #291f0ddd 100%);
-  color: #ffe2a6;
-  box-shadow: 0 0 18px #ffd6671d;
+  border-color: #87c9ff52;
+  background: linear-gradient(180deg, #13283abf 0%, #102132dd 100%);
+  color: #c9ebff;
+  box-shadow: 0 0 18px #69c7ff1d;
 }
 
 .dock-button.focus-pause:hover {
-  border-color: #ffe39a74;
-  background: linear-gradient(180deg, #3a2d13e2 0%, #32260fe8 100%);
-  box-shadow: 0 0 20px #ffd66730;
+  border-color: #9dd8ff74;
+  background: linear-gradient(180deg, #163149e2 0%, #12283ce8 100%);
+  box-shadow: 0 0 20px #69c7ff30;
 }
 
 .dock-button.focus-stop {
-  border-color: #ff9fb452;
-  background: linear-gradient(180deg, #30131abf 0%, #260f14dd 100%);
-  color: #ffc2cd;
-  box-shadow: 0 0 18px #ff829a1f;
+  border-color: #8ab9ff52;
+  background: linear-gradient(180deg, #15233abf 0%, #111b2ddd 100%);
+  color: #d5e7ff;
+  box-shadow: 0 0 18px #78b7ff1f;
 }
 
 .dock-button.focus-stop:hover {
-  border-color: #ffb0c072;
-  background: linear-gradient(180deg, #38161ee2 0%, #301218e8 100%);
-  box-shadow: 0 0 20px #ff829a30;
+  border-color: #9bc7ff72;
+  background: linear-gradient(180deg, #182946e2 0%, #13203ae8 100%);
+  box-shadow: 0 0 20px #78b7ff30;
 }
 
 .dock-button svg {
@@ -863,7 +863,7 @@
 }
 
 .task-list-item-meta.working {
-  color: #ffe18d;
+  color: #9fe8ff;
 }
 
 .task-empty {
@@ -987,7 +987,7 @@
 }
 
 .node-halo.note {
-  fill: #ffd77d30;
+  fill: #8edfff24;
 }
 
 .node-core {
@@ -1021,13 +1021,13 @@
 }
 
 .node-core.working {
-  fill: #ffd667;
+  fill: #9fe8ff;
   stroke: transparent;
 }
 
 .node-core.note {
-  fill: #ffcf70;
-  stroke: #ffe4a8;
+  fill: #7ec7ff;
+  stroke: #b7e8ff;
   stroke-width: 0.45;
 }
 
@@ -1060,7 +1060,7 @@
 }
 
 .node-label.note {
-  fill: #ffe7b8;
+  fill: #d6f0ff;
 }
 
 .node-halo.focus-source,
@@ -1101,12 +1101,15 @@
 }
 
 .focus-node-overlay .node-soft-edge.focus-node {
+  fill: #9fe8ff;
   opacity: 0.22;
   filter: blur(14px);
 }
 
 .focus-node-overlay .node-core.focus-node {
-  filter: drop-shadow(0 0 30px #ffe58a45);
+  fill: #b8f1ff;
+  stroke: transparent;
+  filter: drop-shadow(0 0 32px #8fdcff40);
 }
 
 .focus-node-overlay .node-label.focus-node {
@@ -1862,7 +1865,7 @@ button.chip {
 .sync-feedback.error {
   border-color: #ff8f8f33;
   background: #2c0d16e8;
-  color: #ffdbe2;
+  color: #d6e8ff;
 }
 
 .sync-results {
@@ -2059,7 +2062,7 @@ button.chip {
   border-radius: 0.42rem;
   border: 1px solid #ff8f8f33;
   background: #2c0d16e8;
-  color: #ffdbe2;
+  color: #d6e8ff;
   font: 500 0.76rem/1.35 "IBM Plex Sans", "Avenir Next", sans-serif;
 }
 
diff --git a/src/move37/web/src/App.jsx b/src/move37/web/src/App.jsx
index 12167ff..db49dc2 100644
--- a/src/move37/web/src/App.jsx
+++ b/src/move37/web/src/App.jsx
@@ -4136,10 +4136,12 @@ export default function App() {
         <svg viewBox={`0 0 ${size.width} ${size.height}`} role="img">
           <defs>
             <radialGradient id="sphere-halo" cx="50%" cy="50%">
-              <stop offset="58%" stopColor="#86cbff" stopOpacity="0" />
-              <stop offset="74%" stopColor="#7cc9ff" stopOpacity="0.2" />
-              <stop offset="84%" stopColor="#5ca6f5" stopOpacity="0.12" />
-              <stop offset="100%" stopColor="#2a4f8f" stopOpacity="0" />
+              <stop offset="58%" stopColor="#7ee8ff" stopOpacity="0" />
+              <stop offset="71%" stopColor="#63d8ff" stopOpacity="0.34" />
+              <stop offset="81%" stopColor="#369eff" stopOpacity="0.26" />
+              <stop offset="90%" stopColor="#1d63d6" stopOpacity="0.16" />
+              <stop offset="96%" stopColor="#143a8a" stopOpacity="0.08" />
+              <stop offset="100%" stopColor="#0d2148" stopOpacity="0" />
             </radialGradient>
             <radialGradient id="sphere-halo-success" cx="50%" cy="50%">
               <stop offset="58%" stopColor="#3dff8f" stopOpacity="0" />

From 11c9ede0ada2df159aa7e0413dfe21c442ecfc5b Mon Sep 17 00:00:00 2001
From: diogobaltazar <d.ogobaltazar+github@gmail.com>
Date: Tue, 24 Mar 2026 13:20:08 +0000
Subject: [PATCH 2/2] fix(web): cool outer sphere halo blending

---
 src/move37/web/src/App.css |  3 +++
 src/move37/web/src/App.jsx | 10 +++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/move37/web/src/App.css b/src/move37/web/src/App.css
index 3efa0f0..c34b013 100644
--- a/src/move37/web/src/App.css
+++ b/src/move37/web/src/App.css
@@ -317,9 +317,12 @@
   animation: spherePulse 1.1s ease-in-out infinite;
 }
 
+.sphere-glow,
 .sphere-glow-success,
 .sphere-glow-failure {
   opacity: 0;
+  mix-blend-mode: screen;
+  filter: saturate(1.24);
   transition: opacity 900ms ease;
 }
 
diff --git a/src/move37/web/src/App.jsx b/src/move37/web/src/App.jsx
index db49dc2..3d84ec6 100644
--- a/src/move37/web/src/App.jsx
+++ b/src/move37/web/src/App.jsx
@@ -4136,11 +4136,11 @@ export default function App() {
         <svg viewBox={`0 0 ${size.width} ${size.height}`} role="img">
           <defs>
             <radialGradient id="sphere-halo" cx="50%" cy="50%">
-              <stop offset="58%" stopColor="#7ee8ff" stopOpacity="0" />
-              <stop offset="71%" stopColor="#63d8ff" stopOpacity="0.34" />
-              <stop offset="81%" stopColor="#369eff" stopOpacity="0.26" />
-              <stop offset="90%" stopColor="#1d63d6" stopOpacity="0.16" />
-              <stop offset="96%" stopColor="#143a8a" stopOpacity="0.08" />
+              <stop offset="63%" stopColor="#6de1ff" stopOpacity="0" />
+              <stop offset="75%" stopColor="#43b8ff" stopOpacity="0.28" />
+              <stop offset="84%" stopColor="#236ef4" stopOpacity="0.24" />
+              <stop offset="91%" stopColor="#1847c4" stopOpacity="0.16" />
+              <stop offset="96%" stopColor="#12317e" stopOpacity="0.06" />
               <stop offset="100%" stopColor="#0d2148" stopOpacity="0" />
             </radialGradient>
             <radialGradient id="sphere-halo-success" cx="50%" cy="50%">