From af26a017037fbe29c70c43c46edb4a3b9f2e05a2 Mon Sep 17 00:00:00 2001
From: James Smith <jamessmith1@outlook.com>
Date: Tue, 19 May 2026 23:00:50 +0100
Subject: [PATCH] fix: read --accent-cyan CSS var for globe atmosphere and
 point color

Globe.gl WebGL cannot be styled via CSS; read the computed accent color
at init time so Enhanced tier's amber (#c89628) is applied correctly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/js/modes/system.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/static/js/modes/system.js b/static/js/modes/system.js
index 006485f..91a32ec 100644
--- a/static/js/modes/system.js
+++ b/static/js/modes/system.js
@@ -524,16 +524,17 @@ const SystemHealth = (function () {
                 container.style.background = 'radial-gradient(circle, rgba(10,20,40,0.9), rgba(2,4,8,0.98) 70%)';
 
                 try {
+                    const accentColor = getComputedStyle(document.documentElement).getPropertyValue('--accent-cyan').trim() || '#00d4ff';
                     globeInstance = window.Globe()(container)
                         .backgroundColor('rgba(0,0,0,0)')
                         .globeImageUrl(GLOBE_TEXTURE_URL)
                         .showAtmosphere(true)
-                        .atmosphereColor('#3bb9ff')
+                        .atmosphereColor(accentColor)
                         .atmosphereAltitude(0.12)
                         .pointsData([])
                         .pointRadius(0.8)
                         .pointAltitude(0.01)
-                        .pointColor(function () { return '#00d4ff'; });
+                        .pointColor(function () { return accentColor; });
 
                     var controls = globeInstance.controls();
                     if (controls) {