@ltm-blueverse/alpha-semantic-hub 0.7.0 → 0.7.2

package/explorer/src/workspaces/GraphWorkspace/graphConfig.ts

@@ -1,25 +1,25 @@
 export const GRAPH_THEME = {
   background: {
-    canvas: "#050816",
-    shell: "#0A1021",
-    panel: "#10182C",
+    canvas: "#f6f6f7",
+    shell: "#f7f7f7",
+    panel: "#f8f8f8",
     grid: "rgba(93, 124, 168, 0.08)",
-    vignette: "rgba(2, 4, 10, 0.88)",
+    vignette: "rgba(255, 255, 255, 0.88)",
   },
   nodes: {
     palette: [
-      "#3CE7FF",
-      "#23D7C8",
-      "#5DA9FF",
-      "#9B6BFF",
-      "#FF4FD8",
-      "#FF9A3C",
-      "#B9FF3B",
+      "#0989ad",
+      "#0c8577",
+      "#5da9ff",
+      "#6d3ae0",
+      "#c026d3",
+      "#ff9a3c",
+      "#4d7c0f",
     ],
-    selected: "#FFC857",
+    selected: "#955e0a",
     selectedGlow: "rgba(255, 200, 87, 0.36)",
     hoverGlow: "rgba(60, 231, 255, 0.32)",
-    border: "#07111C",
+    border: "#f6f7f7",
     subduedAlpha: 0.1,
   },
   edges: {
@@ -73,7 +73,7 @@ export function hashString(value: string): number {
 
 export function withAlpha(color: string | undefined, alpha: number): string {
   if (!color) {
-    return `rgba(130, 145, 165, ${alpha})`;
+    return `rgba(95, 110, 130, ${alpha})`;
   }
 
   if (color.startsWith("#")) {
@@ -98,5 +98,5 @@ export function withAlpha(color: string | undefined, alpha: number): string {
     return color.replace("rgb(", "rgba(").replace(")", `, ${alpha})`);
   }
 
-  return `rgba(130, 145, 165, ${alpha})`;
+  return `rgba(95, 110, 130, ${alpha})`;
 }

package/explorer/src/workspaces/GraphWorkspace/graphSceneLayers.ts

@@ -266,9 +266,9 @@ function renderDensityField(
       (GRAPH_THEME.effects.semanticRegions.splatRadius + sample.size * 0.9) * scale,
     );
     const gradient = context.createRadialGradient(x, y, 0, x, y, radius);
-    gradient.addColorStop(0, "rgba(255,255,255,0.05)");
-    gradient.addColorStop(0.58, "rgba(255,255,255,0.02)");
-    gradient.addColorStop(1, "rgba(255,255,255,0)");
+    gradient.addColorStop(0, "rgba(28, 20, 24,0.05)");
+    gradient.addColorStop(0.58, "rgba(28, 20, 24,0.02)");
+    gradient.addColorStop(1, "rgba(28, 20, 24,0)");
     context.fillStyle = gradient;
     context.beginPath();
     context.arc(x, y, radius, 0, Math.PI * 2);
@@ -393,10 +393,10 @@ function drawMaskContour(
 
 function buildRegionRenderColors(color: string) {
   return {
-    fogColor: blendHex("#0E1927", color, 0.46),
-    innerContourColor: blendHex("#1C2C3F", color, 0.78),
-    outerContourColor: blendHex("#132131", color, 0.6),
-    labelBorderColor: blendHex("#2B3F57", color, 0.78),
+    fogColor: blendHex("#f7f8f8", color, 0.46),
+    innerContourColor: blendHex("#fafafa", color, 0.78),
+    outerContourColor: blendHex("#f8f9f9", color, 0.6),
+    labelBorderColor: blendHex("#2b3f57", color, 0.78),
   };
 }
 
@@ -446,7 +446,7 @@ function drawRegionLabel(
   const left = x - width / 2;
   const top = y - height / 2;
 
-  context.fillStyle = "rgba(8, 14, 24, 0.84)";
+  context.fillStyle = "rgba(255, 255, 255, 0.84)";
   context.strokeStyle = withAlpha(color, 0.24);
   context.lineWidth = 1;
   context.beginPath();

package/explorer/src/workspaces/GraphWorkspace/graphSceneState.ts

@@ -132,18 +132,18 @@ export type ResolvedEdgeStyle = {
 };
 
 export function getDistanceBandColor(distance: number): string {
-  if (distance <= 0) return "#7CFF9B";
-  if (distance <= 1) return "#43d17a";
+  if (distance <= 0) return "#7cff9b";
+  if (distance <= 1) return "#178a4c";
   if (distance <= 2) return "#ff2d4b";
-  if (distance <= 3) return "#B0883A";
-  if (distance <= 6) return "#B0883A";
-  return "#FF7B72";
+  if (distance <= 3) return "#7d5c14";
+  if (distance <= 6) return "#7d5c14";
+  return "#ec2315";
 }
 
 function getSemanticScoreColor(score: number): string {
-  if (score >= 0.7) return "#43d17a";
-  if (score >= 0.4) return "#E3B341";
-  return "#FF7B72";
+  if (score >= 0.7) return "#178a4c";
+  if (score >= 0.4) return "#9a6700";
+  return "#ec2315";
 }
 
 export function buildStructuralDistanceSnapshot(
@@ -481,7 +481,7 @@ export function resolveDistanceEdgeStyle(
 
     return {
       hidden: true,
-      color: withAlpha("#1D2A35", 0.02),
+      color: withAlpha("#f9f9fa", 0.02),
       size: Math.min(baseStyle.size ?? 0.35, 0.2),
       zIndex: 0,
     };
@@ -2448,8 +2448,8 @@ function buildCommunityGroupedGraph(): GraphDisplayResult {
       arrowVisibilityPolicy: "hidden",
       baseSize,
       size: baseSize,
-      color: withAlpha("#9BB7D6", GRAPH_THEME.grouped.style.edgeAlpha),
-      mutedColor: withAlpha("#9BB7D6", Math.max(0.14, GRAPH_THEME.grouped.style.edgeAlpha * 0.4)),
+      color: withAlpha("#9bb7d6", GRAPH_THEME.grouped.style.edgeAlpha),
+      mutedColor: withAlpha("#9bb7d6", Math.max(0.14, GRAPH_THEME.grouped.style.edgeAlpha * 0.4)),
       visualPriority: Math.min(1.05, 0.38 + Math.log2(aggregateCount + 1) * 0.14),
     });
   });

package/explorer/src/workspaces/GraphWorkspace/graphTheme.ts

@@ -393,19 +393,19 @@ export interface GraphTheme {
 export const GRAPH_THEME: GraphTheme = {
   palette: {
     semantic: [
-      "#3E79F2",
+      "#3e79f2",
       "#149287",
-      "#2F9F61",
-      "#555FD6",
-      "#8A56D8",
-      "#B65473",
-      "#C9922E",
+      "#2f9f61",
+      "#555fd6",
+      "#6d28d9",
+      "#b65473",
+      "#8a5a10",
     ],
     overview: {
-      nodeBase: "#0B1320",
-      nodeCore: "#5A7A9E",
-      nodeMuted: "#121927",
-      nodeBorder: "#7A92AE",
+      nodeBase: "#f7f7f7",
+      nodeCore: "#5a7a9e",
+      nodeMuted: "#f8f8f8",
+      nodeBorder: "#7a92ae",
       nodeTintMix: 0.14,
       nodeCoreMix: 0.72,
       nodeShellAlpha: 0.97,
@@ -415,82 +415,82 @@ export const GRAPH_THEME: GraphTheme = {
       edgeInspection: "rgba(76, 102, 128, 0.12)",
     },
     accent: {
-      selected: "#F2D288",
-      hovered: "#8FE7FF",
-      path: "#D79056",
-      temporal: "#49D7FF",
-      provenance: "#C9A5FF",
-      inferred: "#D07B4D",
+      selected: "#7d5c14",
+      hovered: "#0f92bd",
+      path: "#93481a",
+      temporal: "#0a86ad",
+      provenance: "#8b5cf6",
+      inferred: "#a04a1e",
     },
     muted: {
       fallback: "rgba(96, 112, 136, 0.18)",
       nodeAlpha: 0.12,
-      edgeOverview: "rgba(32, 45, 55, 0.035)",
+      edgeOverview: "rgba(255, 255, 255, 0.035)",
       edgeStructure: "rgba(42, 58, 72, 0.055)",
       edgeInspection: "rgba(62, 84, 104, 0.075)",
       edgeFocus: "rgba(132, 178, 202, 0.26)",
     },
     background: {
-      canvas: "#0A0D11",
-      shell: "rgba(17, 21, 27, 0.82)",
+      canvas: "#f6f6f7",
+      shell: "rgba(255, 255, 255, 0.82)",
       shellBorder: "rgba(170, 184, 205, 0.14)",
       shellGlow: "rgba(0, 0, 0, 0.28)",
       grid: "rgba(170, 184, 205, 0.026)",
-      vignette: "rgba(3, 4, 7, 0.76)",
-      nodeBorder: "#0B0F15",
+      vignette: "rgba(255, 255, 255, 0.76)",
+      nodeBorder: "#f6f6f7",
     },
   },
   ui: {
     text: {
-      strong: "#F3F0E8",
-      body: "#D5D9DD",
-      muted: "#9AA3AE",
-      subtle: "#6F7A86",
-      inverse: "#0B0D10",
+      strong: "#28251c",
+      body: "#3b4045",
+      muted: "#9aa3ae",
+      subtle: "#6f7a86",
+      inverse: "#f6f6f7",
     },
     surface: {
-      app: "#08090B",
-      stage: "#0B0E12",
-      card: "linear-gradient(180deg, rgba(28, 31, 36, 0.88), rgba(16, 18, 23, 0.78))",
-      cardSubtle: "linear-gradient(180deg, rgba(23, 26, 31, 0.72), rgba(13, 15, 19, 0.64))",
-      cardStrong: "linear-gradient(180deg, rgba(34, 37, 43, 0.94), rgba(18, 21, 26, 0.9))",
-      panel: "linear-gradient(180deg, rgba(21, 24, 30, 0.92), rgba(12, 14, 18, 0.9))",
-      panelBorder: "rgba(211, 205, 190, 0.13)",
-      divider: "rgba(211, 205, 190, 0.1)",
-      shadow: "0 22px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045)",
+      app: "#f5f5f6",
+      stage: "#f6f6f7",
+      card: "linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.78))",
+      cardSubtle: "linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.64))",
+      cardStrong: "linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.9))",
+      panel: "linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.9))",
+      panelBorder: "rgba(70, 60, 48, 0.13)",
+      divider: "rgba(70, 60, 48, 0.1)",
+      shadow: "0 22px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(28, 20, 24, 0.045)",
     },
     scene: {
-      background: "linear-gradient(180deg, #0B0E12 0%, #07080B 100%)",
+      background: "linear-gradient(180deg, #f6f6f7 0%, #f5f5f6 100%)",
       radialGlow: "radial-gradient(circle at 50% 18%, rgba(88, 224, 204, 0.07), transparent 30%), radial-gradient(circle at 78% 0%, rgba(217, 168, 92, 0.055), transparent 26%)",
-      grid: "rgba(210, 206, 196, 0.024)",
-      gridStrong: "rgba(210, 206, 196, 0.052)",
-      vignette: "radial-gradient(ellipse at center, transparent 42%, rgba(2, 3, 5, 0.82) 100%)",
+      grid: "rgba(70, 62, 50, 0.024)",
+      gridStrong: "rgba(70, 62, 50, 0.052)",
+      vignette: "radial-gradient(ellipse at center, transparent 42%, rgba(255, 255, 255, 0.82) 100%)",
     },
     control: {
-      defaultBg: "rgba(255, 255, 255, 0.035)",
-      defaultBorder: "rgba(211, 205, 190, 0.11)",
-      defaultText: "#D7D1C4",
-      hoverBg: "rgba(255, 255, 255, 0.065)",
+      defaultBg: "rgba(28, 20, 24, 0.035)",
+      defaultBorder: "rgba(70, 60, 48, 0.11)",
+      defaultText: "#3c372d",
+      hoverBg: "rgba(28, 20, 24, 0.065)",
       activeBg: "linear-gradient(180deg, rgba(74, 181, 166, 0.24), rgba(38, 118, 116, 0.18))",
       activeBorder: "rgba(98, 226, 205, 0.42)",
-      activeText: "#E8FFFA",
+      activeText: "#162e28",
       primaryBg: "linear-gradient(180deg, rgba(55, 145, 132, 0.42), rgba(24, 86, 88, 0.28))",
       primaryBorder: "rgba(99, 228, 206, 0.34)",
-      primaryText: "#F2FFFB",
+      primaryText: "#162d26",
       disabledText: "rgba(154, 163, 174, 0.42)",
-      inputBg: "rgba(5, 7, 10, 0.52)",
-      inputBorder: "rgba(211, 205, 190, 0.13)",
+      inputBg: "rgba(255, 255, 255, 0.52)",
+      inputBorder: "rgba(70, 60, 48, 0.13)",
       focusRing: "rgba(98, 226, 205, 0.16)",
-      dangerText: "#FF9A8D",
+      dangerText: "#3f1f1b",
     },
     timeline: {
-      background: "linear-gradient(180deg, rgba(14, 18, 24, 0.86), rgba(8, 11, 15, 0.92))",
+      background: "linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.92))",
       border: "rgba(170, 184, 205, 0.12)",
       gridMinor: "rgba(170, 184, 205, 0.04)",
       gridMajor: "rgba(170, 184, 205, 0.09)",
-      text: "#7A92AE",
-      textStrong: "#A5B7CD",
-      playhead: "#8FE7FF",
+      text: "#7a92ae",
+      textStrong: "#a5b7cd",
+      playhead: "#0f92bd",
       playheadSoft: "rgba(143, 231, 255, 0.12)",
     },
   },
@@ -551,10 +551,10 @@ export const GRAPH_THEME: GraphTheme = {
       radius: 6,
       offsetX: 12,
       offsetY: 10,
-      background: "rgba(8, 14, 24, 0.9)",
+      background: "rgba(255, 255, 255, 0.9)",
       borderColor: "rgba(154, 181, 212, 0.16)",
       borderAlpha: 0.28,
-      textColor: "#EAF3FF",
+      textColor: "#16202d",
       shadowColor: "rgba(0, 0, 0, 0.6)",
       shadowAlpha: 0.26,
       shadowBlur: 12,
@@ -571,11 +571,11 @@ export const GRAPH_THEME: GraphTheme = {
       offsetX: 16,
       offsetY: 16,
       metaGap: 5,
-      background: "rgba(8, 14, 24, 0.94)",
+      background: "rgba(255, 255, 255, 0.94)",
       borderColor: "rgba(154, 181, 212, 0.18)",
       borderAlpha: 0.32,
-      textColor: "#F6FBFF",
-      metaColor: "rgba(184, 214, 255, 0.58)",
+      textColor: "#16232d",
+      metaColor: "rgba(25, 90, 175, 0.58)",
       shadowColor: "rgba(0, 0, 0, 0.62)",
       shadowAlpha: 0.34,
       shadowBlur: 15,
@@ -668,24 +668,24 @@ export const GRAPH_THEME: GraphTheme = {
       },
     },
     selectedRing: {
-      color: "#E7C57C",
+      color: "#8a6414",
       width: 1.9,
       nativeSize: 2.2,
       glowAlpha: 0.2,
       visibleFrom: "overview",
     },
     badges: {
-      inferred: { color: "#C98658", label: "I" },
-      temporal: { color: "#52CDEF", label: "T" },
-      provenance: { color: "#A289D0", label: "P" },
+      inferred: { color: "#7d4420", label: "I" },
+      temporal: { color: "#0f7fa6", label: "T" },
+      provenance: { color: "#a289d0", label: "P" },
     },
     badge: {
       radius: 7,
       offset: 3,
       fontSize: 8,
-      textColor: "#08111d",
-      background: "rgba(10, 5, 8, 0.84)",
-      stroke: "rgba(255,255,255,0.14)",
+      textColor: "#f6f7f7",
+      background: "rgba(255, 255, 255, 0.84)",
+      stroke: "rgba(28, 20, 24,0.14)",
       glowAlpha: 0.24,
     },
   },
@@ -984,7 +984,7 @@ export function clamp(min: number, value: number, max: number): number {
 
 export function withAlpha(color: string | undefined, alpha: number): string {
   if (!color) {
-    return `rgba(130, 145, 165, ${alpha})`;
+    return `rgba(95, 110, 130, ${alpha})`;
   }
 
   if (color.startsWith("#")) {
@@ -1009,7 +1009,7 @@ export function withAlpha(color: string | undefined, alpha: number): string {
     return color.replace("rgb(", "rgba(").replace(")", `, ${alpha})`);
   }
 
-  return `rgba(130, 145, 165, ${alpha})`;
+  return `rgba(95, 110, 130, ${alpha})`;
 }
 
 export function darkenHex(hexColor: string, amount: number): string {

package/explorer/src/workspaces/GraphWorkspace/plugins/explorationEffectsPlugin.tsx

@@ -180,7 +180,7 @@ export const explorationEffectsPlugin: GraphPlugin = {
                         style={{
                           ...legendSwatchStyle,
                           background: item.color,
-                          boxShadow: `0 0 0 1px rgba(255,255,255,0.06), 0 0 14px ${item.color}40`,
+                          boxShadow: `0 0 0 1px rgba(28, 20, 24,0.06), 0 0 14px ${item.color}40`,
                         }}
                       />
                       <div style={{ minWidth: 0, flex: 1 }}>
@@ -235,7 +235,7 @@ const panelBodyStyle: CSSProperties = {
 };
 
 const panelEyebrowStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 11,
   fontWeight: 700,
   letterSpacing: "0.08em",
@@ -248,12 +248,12 @@ const sectionStyle: CSSProperties = {
   gap: 8,
   padding: "10px 12px",
   borderRadius: 14,
-  border: "1px solid rgba(255,255,255,0.06)",
-  background: "rgba(255,255,255,0.025)",
+  border: "1px solid rgba(28, 20, 24,0.06)",
+  background: "rgba(28, 20, 24,0.025)",
 };
 
 const sectionTitleStyle: CSSProperties = {
-  color: "#ffdfe4",
+  color: "#2e161a",
   fontSize: 12,
   fontWeight: 700,
 };
@@ -266,7 +266,7 @@ const toggleRowStyle: CSSProperties = {
 };
 
 const rowTitleStyle: CSSProperties = {
-  color: "#fff1f3",
+  color: "#2d1619",
   fontSize: 13,
   fontWeight: 600,
 };
@@ -278,7 +278,7 @@ const rowDescriptionStyle: CSSProperties = {
 };
 
 const rowMetaStyle: CSSProperties = {
-  color: "#7fc6ff",
+  color: "#2f7fd6",
   fontSize: 11,
   lineHeight: 1.45,
 };
@@ -287,9 +287,9 @@ const toggleButtonStyle: CSSProperties = {
   minWidth: 52,
   padding: "8px 10px",
   borderRadius: 999,
-  border: "1px solid rgba(255,255,255,0.08)",
-  background: "rgba(255,255,255,0.03)",
-  color: "#cfe0f4",
+  border: "1px solid rgba(28, 20, 24,0.08)",
+  background: "rgba(28, 20, 24,0.03)",
+  color: "#17222f",
   fontSize: 12,
   fontWeight: 700,
   cursor: "pointer",
@@ -299,7 +299,7 @@ const toggleButtonActiveStyle: CSSProperties = {
   ...toggleButtonStyle,
   background: "rgba(31, 111, 235, 0.24)",
   border: "1px solid rgba(255, 107, 129, 0.28)",
-  color: "#eef6ff",
+  color: "#16212d",
 };
 
 const legendRowStyle: CSSProperties = {
@@ -308,8 +308,8 @@ const legendRowStyle: CSSProperties = {
   gap: 10,
   padding: "8px 10px",
   borderRadius: 12,
-  border: "1px solid rgba(255,255,255,0.06)",
-  background: "rgba(255,255,255,0.025)",
+  border: "1px solid rgba(28, 20, 24,0.06)",
+  background: "rgba(28, 20, 24,0.025)",
 };
 
 const legendSwatchStyle: CSSProperties = {
@@ -321,7 +321,7 @@ const legendSwatchStyle: CSSProperties = {
 
 const detailsStyle: CSSProperties = {
   borderRadius: 12,
-  border: "1px solid rgba(255,255,255,0.05)",
+  border: "1px solid rgba(28, 20, 24,0.05)",
   background: "rgba(0,0,0,0.14)",
   overflow: "hidden",
 };
@@ -329,7 +329,7 @@ const detailsStyle: CSSProperties = {
 const summaryStyle: CSSProperties = {
   cursor: "pointer",
   padding: "10px 12px",
-  color: "#f0cdd3",
+  color: "#602b34",
   fontSize: 12,
   fontWeight: 700,
   letterSpacing: "0.04em",
@@ -339,7 +339,7 @@ const summaryStyle: CSSProperties = {
 const diagnosticsPreStyle: CSSProperties = {
   margin: 0,
   padding: "0 12px 12px",
-  color: "#ffdfe4",
+  color: "#2e161a",
   fontSize: 11,
   lineHeight: 1.55,
   whiteSpace: "pre-wrap",
@@ -347,7 +347,7 @@ const diagnosticsPreStyle: CSSProperties = {
 };
 
 const emptyTextStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
   lineHeight: 1.5,
 };

package/explorer/src/workspaces/GraphWorkspace/plugins/explorationEffectsPluginPhaseC.tsx

@@ -174,7 +174,7 @@ function renderRegionsAndSignals(
                 style={{
                   ...legendSwatchStyle,
                   background: region.color,
-                  boxShadow: `0 0 0 1px rgba(255,255,255,0.06), 0 0 14px ${region.color}40`,
+                  boxShadow: `0 0 0 1px rgba(28, 20, 24,0.06), 0 0 14px ${region.color}40`,
                 }}
               />
               <div style={{ minWidth: 0, flex: 1 }}>
@@ -249,7 +249,7 @@ function renderRegionsAndSignals(
                 style={{
                   ...legendSwatchStyle,
                   background: item.color,
-                  boxShadow: `0 0 0 1px rgba(255,255,255,0.06), 0 0 14px ${item.color}40`,
+                  boxShadow: `0 0 0 1px rgba(28, 20, 24,0.06), 0 0 14px ${item.color}40`,
                 }}
               />
               <div style={{ minWidth: 0, flex: 1 }}>
@@ -375,7 +375,7 @@ const panelBodyStyle: CSSProperties = {
 };
 
 const panelEyebrowStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 11,
   fontWeight: 700,
   letterSpacing: "0.08em",
@@ -388,18 +388,18 @@ const sectionStyle: CSSProperties = {
   gap: 8,
   padding: "10px 12px",
   borderRadius: 14,
-  border: "1px solid rgba(255,255,255,0.06)",
-  background: "rgba(255,255,255,0.025)",
+  border: "1px solid rgba(28, 20, 24,0.06)",
+  background: "rgba(28, 20, 24,0.025)",
 };
 
 const sectionTitleStyle: CSSProperties = {
-  color: "#ffdfe4",
+  color: "#2e161a",
   fontSize: 12,
   fontWeight: 700,
 };
 
 const subsectionTitleStyle: CSSProperties = {
-  color: "#9cc4ec",
+  color: "#1a2b3c",
   fontSize: 11,
   fontWeight: 700,
   letterSpacing: "0.05em",
@@ -414,7 +414,7 @@ const toggleRowStyle: CSSProperties = {
 };
 
 const rowTitleStyle: CSSProperties = {
-  color: "#fff1f3",
+  color: "#2d1619",
   fontSize: 13,
   fontWeight: 600,
 };
@@ -426,7 +426,7 @@ const rowDescriptionStyle: CSSProperties = {
 };
 
 const rowMetaStyle: CSSProperties = {
-  color: "#7fc6ff",
+  color: "#2f7fd6",
   fontSize: 11,
   lineHeight: 1.45,
 };
@@ -435,9 +435,9 @@ const toggleButtonStyle: CSSProperties = {
   minWidth: 52,
   padding: "8px 10px",
   borderRadius: 999,
-  border: "1px solid rgba(255,255,255,0.08)",
-  background: "rgba(255,255,255,0.03)",
-  color: "#cfe0f4",
+  border: "1px solid rgba(28, 20, 24,0.08)",
+  background: "rgba(28, 20, 24,0.03)",
+  color: "#17222f",
   fontSize: 12,
   fontWeight: 700,
   cursor: "pointer",
@@ -447,7 +447,7 @@ const toggleButtonActiveStyle: CSSProperties = {
   ...toggleButtonStyle,
   background: "rgba(31, 111, 235, 0.24)",
   border: "1px solid rgba(255, 107, 129, 0.28)",
-  color: "#eef6ff",
+  color: "#16212d",
 };
 
 const legendRowStyle: CSSProperties = {
@@ -456,8 +456,8 @@ const legendRowStyle: CSSProperties = {
   gap: 10,
   padding: "8px 10px",
   borderRadius: 12,
-  border: "1px solid rgba(255,255,255,0.06)",
-  background: "rgba(255,255,255,0.025)",
+  border: "1px solid rgba(28, 20, 24,0.06)",
+  background: "rgba(28, 20, 24,0.025)",
 };
 
 const legendSwatchStyle: CSSProperties = {
@@ -473,8 +473,8 @@ const signalRowStyle: CSSProperties = {
   gap: 10,
   padding: "8px 10px",
   borderRadius: 12,
-  border: "1px solid rgba(255,255,255,0.05)",
-  background: "rgba(255,255,255,0.02)",
+  border: "1px solid rgba(28, 20, 24,0.05)",
+  background: "rgba(28, 20, 24,0.02)",
 };
 
 const signalBadgeStyle: CSSProperties = {
@@ -482,7 +482,7 @@ const signalBadgeStyle: CSSProperties = {
   borderRadius: 999,
   background: "rgba(31, 111, 235, 0.16)",
   border: "1px solid rgba(255, 107, 129, 0.16)",
-  color: "#ffdfe4",
+  color: "#2e161a",
   fontSize: 11,
   fontWeight: 700,
   whiteSpace: "nowrap",
@@ -490,7 +490,7 @@ const signalBadgeStyle: CSSProperties = {
 
 const detailsStyle: CSSProperties = {
   borderRadius: 12,
-  border: "1px solid rgba(255,255,255,0.05)",
+  border: "1px solid rgba(28, 20, 24,0.05)",
   background: "rgba(0,0,0,0.14)",
   overflow: "hidden",
 };
@@ -498,7 +498,7 @@ const detailsStyle: CSSProperties = {
 const summaryStyle: CSSProperties = {
   cursor: "pointer",
   padding: "10px 12px",
-  color: "#f0cdd3",
+  color: "#602b34",
   fontSize: 12,
   fontWeight: 700,
   letterSpacing: "0.04em",
@@ -508,7 +508,7 @@ const summaryStyle: CSSProperties = {
 const diagnosticsPreStyle: CSSProperties = {
   margin: 0,
   padding: "0 12px 12px",
-  color: "#ffdfe4",
+  color: "#2e161a",
   fontSize: 11,
   lineHeight: 1.55,
   whiteSpace: "pre-wrap",
@@ -516,7 +516,7 @@ const diagnosticsPreStyle: CSSProperties = {
 };
 
 const emptyTextStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
   lineHeight: 1.5,
 };