@glyphjs/components 0.7.0 → 0.8.0

package/dist/index.js

@@ -8,6 +8,18 @@ import dagre from 'dagre';
 import katex from 'katex';
 
 // src/callout/index.ts
+var CALLOUT_BORDER_MAP = {
+  info: "var(--glyph-callout-info-border, var(--glyph-color-info, #38bdf8))",
+  warning: "var(--glyph-callout-warning-border, var(--glyph-color-warning, #d97706))",
+  error: "var(--glyph-callout-error-border, var(--glyph-color-error, #dc2626))",
+  tip: "var(--glyph-callout-tip-border, var(--glyph-color-success, #16a34a))"
+};
+var CALLOUT_BG_MAP = {
+  info: "var(--glyph-callout-info-bg, rgba(56, 189, 248, 0.08))",
+  warning: "var(--glyph-callout-warning-bg, rgba(217, 119, 6, 0.08))",
+  error: "var(--glyph-callout-error-bg, rgba(220, 38, 38, 0.08))",
+  tip: "var(--glyph-callout-tip-bg, rgba(22, 163, 74, 0.08))"
+};
 var CALLOUT_ICONS = {
   info: "\u2139\uFE0F",
   warning: "\u26A0\uFE0F",
@@ -23,8 +35,8 @@ var CALLOUT_LABELS = {
 function Callout({ data }) {
   const { type, title, content } = data;
   const containerStyle11 = {
-    backgroundColor: `var(--glyph-callout-${type}-bg)`,
-    borderLeft: `4px solid var(--glyph-callout-${type}-border)`,
+    backgroundColor: CALLOUT_BG_MAP[type],
+    borderLeft: `4px solid ${CALLOUT_BORDER_MAP[type]}`,
     borderRadius: "var(--glyph-radius-md, 0.1875rem)",
     padding: "var(--glyph-spacing-md, 1rem)",
     margin: "var(--glyph-spacing-sm, 0.5rem) 0",
@@ -94,26 +106,16 @@ var DEFAULT_WIDTH = 600;
 var DEFAULT_HEIGHT = 400;
 var MARGIN = { top: 20, right: 30, bottom: 50, left: 60 };
 var COLOR_SCHEME = [
-  "#00d4aa",
-  // cyan-green
-  "#b44dff",
-  // purple
-  "#22c55e",
-  // green
-  "#e040fb",
-  // magenta
-  "#00e5ff",
-  // teal
-  "#84cc16",
-  // lime
-  "#f472b6",
-  // rose
-  "#fb923c",
-  // orange
-  "#818cf8",
-  // indigo
-  "#38bdf8"
-  // sky
+  "var(--glyph-palette-color-1, #00d4aa)",
+  "var(--glyph-palette-color-2, #b44dff)",
+  "var(--glyph-palette-color-3, #22c55e)",
+  "var(--glyph-palette-color-4, #e040fb)",
+  "var(--glyph-palette-color-5, #00e5ff)",
+  "var(--glyph-palette-color-6, #84cc16)",
+  "var(--glyph-palette-color-7, #f472b6)",
+  "var(--glyph-palette-color-8, #fb923c)",
+  "var(--glyph-palette-color-9, #818cf8)",
+  "var(--glyph-palette-color-10, #38bdf8)"
 ];
 function getNumericValue(d, key) {
   const v = d[key];
@@ -135,7 +137,7 @@ function renderAxes(g, xScale, yScale, xAxisConfig, yAxisConfig, innerWidth, inn
       d32.axisBottom(xScale)
     );
   }
-  xAxisG.selectAll("text, line, path").attr("fill", "var(--glyph-text, #1a2035)").attr("stroke", "var(--glyph-grid, #1a2035)");
+  xAxisG.selectAll("text, line, path").attr("fill", "var(--glyph-text, #1a2035)").attr("stroke", "var(--glyph-grid, var(--glyph-border, #d0d8e4))");
   if (xAxisConfig?.label) {
     g.append("text").attr("class", "x-label").attr("x", innerWidth / 2).attr("y", innerHeight + MARGIN.bottom - 6).attr("text-anchor", "middle").attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", "12px").text(inlineToText(xAxisConfig.label));
   }
@@ -143,7 +145,7 @@ function renderAxes(g, xScale, yScale, xAxisConfig, yAxisConfig, innerWidth, inn
   yAxisG.call(
     d32.axisLeft(yScale)
   );
-  yAxisG.selectAll("text, line, path").attr("fill", "var(--glyph-text, #1a2035)").attr("stroke", "var(--glyph-grid, #1a2035)");
+  yAxisG.selectAll("text, line, path").attr("fill", "var(--glyph-text, #1a2035)").attr("stroke", "var(--glyph-grid, var(--glyph-border, #d0d8e4))");
   if (yAxisConfig?.label) {
     g.append("text").attr("class", "y-label").attr("transform", "rotate(-90)").attr("x", -innerHeight / 2).attr("y", -MARGIN.left + 14).attr("text-anchor", "middle").attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", "12px").text(inlineToText(yAxisConfig.label));
   }
@@ -182,7 +184,7 @@ function renderOHLCSeries(g, seriesData, xScale, xScalePoint, yScale, innerWidth
     const low = getNumericValue(d, "low");
     const cx = xScalePoint(d);
     const isBullish = close >= open;
-    const candleColor = isBullish ? "var(--glyph-chart-bullish, #22c55e)" : "var(--glyph-chart-bearish, #f87171)";
+    const candleColor = isBullish ? "var(--glyph-chart-bullish, var(--glyph-color-success, #22c55e))" : "var(--glyph-chart-bearish, var(--glyph-color-error, #f87171))";
     g.append("line").attr("x1", cx).attr("x2", cx).attr("y1", yScale(high)).attr("y2", yScale(low)).attr("stroke", candleColor).attr("stroke-width", 1);
     const bodyTop = yScale(Math.max(open, close));
     const bodyBottom = yScale(Math.min(open, close));
@@ -589,11 +591,11 @@ var CONNECTOR_WIDTH = "2px";
 function colorForStatus(status) {
   switch (status) {
     case "pending":
-      return "var(--glyph-steps-pending-color, #7a8599)";
+      return "var(--glyph-steps-pending-color, var(--glyph-text-muted, #6b7a94))";
     case "active":
-      return "var(--glyph-steps-active-color, #00d4aa)";
+      return "var(--glyph-steps-active-color, var(--glyph-accent, #00d4aa))";
     case "completed":
-      return "var(--glyph-steps-completed-color, #22c55e)";
+      return "var(--glyph-steps-completed-color, var(--glyph-color-success, #22c55e))";
   }
 }
 function itemStyle(isLast) {
@@ -612,7 +614,7 @@ function connectorStyle(status) {
     top: INDICATOR_SIZE,
     bottom: 0,
     width: CONNECTOR_WIDTH,
-    backgroundColor: status === "completed" ? "var(--glyph-steps-completed-color, #22c55e)" : "var(--glyph-steps-connector-color, #d0d8e4)"
+    backgroundColor: status === "completed" ? "var(--glyph-steps-completed-color, var(--glyph-color-success, #22c55e))" : "var(--glyph-steps-connector-color, var(--glyph-border, #d0d8e4))"
   };
 }
 function indicatorStyle(status) {
@@ -642,14 +644,14 @@ var bodyStyle = {
 function titleStyle(status) {
   return {
     fontWeight: 600,
-    color: status === "pending" ? "var(--glyph-steps-pending-color, #7a8599)" : "var(--glyph-text, #1a2035)"
+    color: status === "pending" ? "var(--glyph-steps-pending-color, var(--glyph-text-muted, #6b7a94))" : "var(--glyph-text, #1a2035)"
   };
 }
 function contentStyle(status) {
   return {
     marginTop: "var(--glyph-spacing-xs, 0.25rem)",
     fontSize: "0.9em",
-    color: status === "pending" ? "var(--glyph-steps-pending-color, #7a8599)" : "var(--glyph-text-muted, #7a8599)"
+    color: status === "pending" ? "var(--glyph-steps-pending-color, var(--glyph-text-muted, #6b7a94))" : "var(--glyph-text-muted, #7a8599)"
   };
 }
 
@@ -698,9 +700,9 @@ function TableAggregationFooter({
       {
         style: {
           padding: "var(--glyph-table-cell-padding, 8px 12px)",
-          borderTop: "2px solid var(--glyph-table-border, #d0d8e4)",
+          borderTop: "2px solid var(--glyph-table-border, var(--glyph-border, #d0d8e4))",
           fontWeight: "bold",
-          background: "var(--glyph-table-footer-bg, #e8ecf3)",
+          background: "var(--glyph-table-footer-bg, var(--glyph-surface, #e8ecf3))",
           color: "var(--glyph-table-footer-color, inherit)"
         },
         children: agg ? computeAggregation(rows, col.key, agg.fn) : ""
@@ -734,8 +736,8 @@ function TableHead({
           style: {
             padding: "var(--glyph-table-cell-padding, 8px 12px)",
             textAlign: "left",
-            borderBottom: "2px solid var(--glyph-table-border, #d0d8e4)",
-            background: "var(--glyph-table-header-bg, #e8ecf3)",
+            borderBottom: "2px solid var(--glyph-table-border, var(--glyph-border, #d0d8e4))",
+            background: "var(--glyph-table-header-bg, var(--glyph-surface, #e8ecf3))",
             color: "var(--glyph-table-header-color, inherit)",
             cursor: col.sortable ? "pointer" : "default",
             userSelect: col.sortable ? "none" : void 0,
@@ -765,7 +767,7 @@ function TableHead({
             style: {
               width: "100%",
               padding: "4px 6px",
-              border: "1px solid var(--glyph-table-border, #d0d8e4)",
+              border: "1px solid var(--glyph-table-border, var(--glyph-border, #d0d8e4))",
               borderRadius: "3px",
               fontSize: "inherit",
               boxSizing: "border-box",
@@ -909,7 +911,7 @@ function Table({
       style: {
         width: "100%",
         borderCollapse: "collapse",
-        border: "1px solid var(--glyph-table-border, #d0d8e4)",
+        border: "1px solid var(--glyph-table-border, var(--glyph-border, #d0d8e4))",
         fontFamily: "var(--glyph-font-body, inherit)",
         fontSize: isCompact ? "0.8125rem" : "var(--glyph-table-font-size, 0.9rem)"
       },
@@ -930,14 +932,14 @@ function Table({
           "tr",
           {
             style: {
-              background: rowIdx % 2 === 0 ? "var(--glyph-table-row-bg, transparent)" : "var(--glyph-table-row-alt-bg, #f4f6fa)"
+              background: rowIdx % 2 === 0 ? "var(--glyph-table-row-bg, transparent)" : "var(--glyph-table-row-alt-bg, var(--glyph-surface-raised, #f4f6fa))"
             },
             children: columns.map((col) => /* @__PURE__ */ jsx(
               "td",
               {
                 style: {
                   padding: "var(--glyph-table-cell-padding, 8px 12px)",
-                  borderBottom: "1px solid var(--glyph-table-border, #d0d8e4)",
+                  borderBottom: "1px solid var(--glyph-table-border, var(--glyph-border, #d0d8e4))",
                   color: "var(--glyph-table-cell-color, inherit)"
                 },
                 children: String(row[col.key] ?? "")
@@ -1114,14 +1116,14 @@ var MARKER_RADIUS = 8;
 var LINE_THICKNESS = 2;
 var EVENT_SPACING_MIN = 80;
 var TYPE_PALETTE = [
-  "var(--glyph-timeline-color-1, #00d4aa)",
-  "var(--glyph-timeline-color-2, #b44dff)",
-  "var(--glyph-timeline-color-3, #22c55e)",
-  "var(--glyph-timeline-color-4, #e040fb)",
-  "var(--glyph-timeline-color-5, #00e5ff)",
-  "var(--glyph-timeline-color-6, #84cc16)",
-  "var(--glyph-timeline-color-7, #f472b6)",
-  "var(--glyph-timeline-color-8, #fb923c)"
+  "var(--glyph-timeline-color-1, var(--glyph-palette-color-1, #00d4aa))",
+  "var(--glyph-timeline-color-2, var(--glyph-palette-color-2, #b44dff))",
+  "var(--glyph-timeline-color-3, var(--glyph-palette-color-3, #22c55e))",
+  "var(--glyph-timeline-color-4, var(--glyph-palette-color-4, #e040fb))",
+  "var(--glyph-timeline-color-5, var(--glyph-palette-color-5, #00e5ff))",
+  "var(--glyph-timeline-color-6, var(--glyph-palette-color-6, #84cc16))",
+  "var(--glyph-timeline-color-7, var(--glyph-palette-color-7, #f472b6))",
+  "var(--glyph-timeline-color-8, var(--glyph-palette-color-8, #fb923c))"
 ];
 function parseDate(raw) {
   const d = new Date(raw);
@@ -1176,7 +1178,7 @@ function Timeline({ data }) {
     top: 0,
     bottom: 0,
     width: LINE_THICKNESS,
-    backgroundColor: "var(--glyph-timeline-line, #d0d8e4)",
+    backgroundColor: "var(--glyph-timeline-line, var(--glyph-border, #d0d8e4))",
     transform: "translateX(-50%)"
   } : {
     position: "absolute",
@@ -1184,7 +1186,7 @@ function Timeline({ data }) {
     left: 0,
     right: 0,
     height: LINE_THICKNESS,
-    backgroundColor: "var(--glyph-timeline-line, #d0d8e4)",
+    backgroundColor: "var(--glyph-timeline-line, var(--glyph-border, #d0d8e4))",
     transform: "translateY(-50%)"
   };
   const inner = /* @__PURE__ */ jsxs(
@@ -1221,7 +1223,7 @@ function Timeline({ data }) {
                 {
                   style: {
                     fontSize: "var(--glyph-timeline-date-size, 0.75rem)",
-                    color: "var(--glyph-timeline-date-color, #7a8599)",
+                    color: "var(--glyph-timeline-date-color, var(--glyph-text-muted, #6b7a94))",
                     fontWeight: 600
                   },
                   children: formatDate(pe.event.date)
@@ -1243,7 +1245,7 @@ function Timeline({ data }) {
                 {
                   style: {
                     fontSize: "var(--glyph-timeline-desc-size, 0.8rem)",
-                    color: "var(--glyph-timeline-desc-color, #7a8599)",
+                    color: "var(--glyph-timeline-desc-color, var(--glyph-text-muted, #6b7a94))",
                     marginTop: 2
                   },
                   children: /* @__PURE__ */ jsx(RichText, { content: pe.event.description })
@@ -1317,13 +1319,13 @@ function connectorStyle2(_pe, isVertical) {
     return {
       flex: "0 0 20px",
       height: LINE_THICKNESS,
-      backgroundColor: "var(--glyph-timeline-line, #d0d8e4)"
+      backgroundColor: "var(--glyph-timeline-line, var(--glyph-border, #d0d8e4))"
     };
   }
   return {
     flex: "0 0 20px",
     width: LINE_THICKNESS,
-    backgroundColor: "var(--glyph-timeline-line, #d0d8e4)"
+    backgroundColor: "var(--glyph-timeline-line, var(--glyph-border, #d0d8e4))"
   };
 }
 function labelStyle(pe, isVertical) {
@@ -1797,7 +1799,7 @@ function InteractionOverlay({
             width,
             height,
             pointerEvents: "none",
-            border: "2px solid var(--glyph-interaction-active-border, #0a9d7c)",
+            border: "2px solid var(--glyph-interaction-active-border, var(--glyph-accent, #0a9d7c))",
             borderRadius: "4px"
           },
           "aria-hidden": "true"
@@ -1822,8 +1824,8 @@ var TOOLTIP_STYLE = {
   bottom: "12px",
   right: "12px",
   padding: "6px 10px",
-  backgroundColor: "var(--glyph-interaction-tooltip-bg, rgba(26, 32, 53, 0.9))",
-  color: "var(--glyph-interaction-tooltip-text, #f4f6fa)",
+  backgroundColor: "var(--glyph-interaction-tooltip-bg, var(--glyph-tooltip-bg, rgba(26, 32, 53, 0.9)))",
+  color: "var(--glyph-interaction-tooltip-text, var(--glyph-tooltip-text, #f4f6fa))",
   borderRadius: "4px",
   fontSize: "12px",
   fontFamily: "Inter, system-ui, sans-serif",
@@ -1843,8 +1845,8 @@ var ACTIVATION_OVERLAY_STYLE = {
 };
 var ACTIVATION_TEXT_STYLE = {
   padding: "12px 20px",
-  backgroundColor: "var(--glyph-interaction-tooltip-bg, rgba(26, 32, 53, 0.9))",
-  color: "var(--glyph-interaction-tooltip-text, #f4f6fa)",
+  backgroundColor: "var(--glyph-interaction-tooltip-bg, var(--glyph-tooltip-bg, rgba(26, 32, 53, 0.9)))",
+  color: "var(--glyph-interaction-tooltip-text, var(--glyph-tooltip-text, #f4f6fa))",
   borderRadius: "6px",
   fontSize: "14px",
   fontFamily: "Inter, system-ui, sans-serif",
@@ -1927,28 +1929,18 @@ var BUTTON_STYLE = {
   boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)"
 };
 var GROUP_PALETTE = [
-  "#00d4aa",
-  // cyan-green
-  "#b44dff",
-  // purple
-  "#22c55e",
-  // green
-  "#e040fb",
-  // magenta
-  "#00e5ff",
-  // teal
-  "#84cc16",
-  // lime
-  "#f472b6",
-  // rose
-  "#fb923c",
-  // orange
-  "#818cf8",
-  // indigo
-  "#38bdf8"
-  // sky
+  "var(--glyph-palette-color-1, #00d4aa)",
+  "var(--glyph-palette-color-2, #b44dff)",
+  "var(--glyph-palette-color-3, #22c55e)",
+  "var(--glyph-palette-color-4, #e040fb)",
+  "var(--glyph-palette-color-5, #00e5ff)",
+  "var(--glyph-palette-color-6, #84cc16)",
+  "var(--glyph-palette-color-7, #f472b6)",
+  "var(--glyph-palette-color-8, #fb923c)",
+  "var(--glyph-palette-color-9, #818cf8)",
+  "var(--glyph-palette-color-10, #38bdf8)"
 ];
-var DEFAULT_NODE_COLOR = "#00d4aa";
+var DEFAULT_NODE_COLOR = "var(--glyph-palette-color-1, #00d4aa)";
 function getGroupColor(group, groupIndex) {
   if (!group) return GROUP_PALETTE[0];
   let idx = groupIndex.get(group);
@@ -1979,7 +1971,7 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, z
   const height = Math.max(layout.height, 200);
   svg.attr("viewBox", `0 0 ${width} ${height}`);
   const defs = svg.append("defs");
-  defs.append("marker").attr("id", ARROW_MARKER_ID).attr("viewBox", "0 0 10 10").attr("refX", 10).attr("refY", 5).attr("markerWidth", 8).attr("markerHeight", 8).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 5 L 0 10 Z").attr("fill", "var(--glyph-edge-color, #6b7a94)");
+  defs.append("marker").attr("id", ARROW_MARKER_ID).attr("viewBox", "0 0 10 10").attr("refX", 10).attr("refY", 5).attr("markerWidth", 8).attr("markerHeight", 8).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 5 L 0 10 Z").attr("fill", "var(--glyph-edge-color, var(--glyph-border, #d0d8e4))");
   const container = svgElement.parentElement ?? svgElement;
   const nodeRadius = getThemeVar(container, "--glyph-node-radius", "3");
   const nodeStrokeWidth = getThemeVar(container, "--glyph-node-stroke-width", "1.5");
@@ -1998,11 +1990,14 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, z
   const edgeGroup = root.append("g").attr("class", "glyph-graph-edges");
   for (const edge of layout.edges) {
     const edgeG = edgeGroup.append("g").attr("class", "glyph-graph-edge");
-    edgeG.append("path").attr("d", lineGen(edge.points) ?? "").attr("fill", "none").attr("stroke", edge.style?.["stroke"] ?? "var(--glyph-edge-color, #6b7a94)").attr("stroke-width", edge.style?.["stroke-width"] ?? nodeStrokeWidth).attr("marker-end", `url(#${ARROW_MARKER_ID})`).attr("stroke-dasharray", edge.type === "dashed" ? "5,5" : null);
+    edgeG.append("path").attr("d", lineGen(edge.points) ?? "").attr("fill", "none").attr(
+      "stroke",
+      edge.style?.["stroke"] ?? "var(--glyph-edge-color, var(--glyph-border, #d0d8e4))"
+    ).attr("stroke-width", edge.style?.["stroke-width"] ?? nodeStrokeWidth).attr("marker-end", `url(#${ARROW_MARKER_ID})`).attr("stroke-dasharray", edge.type === "dashed" ? "5,5" : null);
     if (edge.label) {
       const mid = edge.points[Math.floor(edge.points.length / 2)];
       if (mid) {
-        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 8).attr("text-anchor", "middle").attr("font-size", "11px").attr("fill", "var(--glyph-edge-color, #6b7a94)").text(inlineToText(edge.label));
+        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 8).attr("text-anchor", "middle").attr("font-size", "11px").attr("fill", "var(--glyph-edge-color, var(--glyph-border, #d0d8e4))").text(inlineToText(edge.label));
       }
     }
   }
@@ -2013,7 +2008,7 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, z
     const isNavigable = navigableNodes.has(node.id);
     const nodeX = node.x - node.width / 2;
     const nodeY = node.y - node.height / 2;
-    const defaultStroke = d32.color(color3)?.darker(0.5)?.toString() ?? "var(--glyph-edge-color, #6b7a94)";
+    const defaultStroke = d32.color(color3)?.darker(0.5)?.toString() ?? "var(--glyph-edge-color, var(--glyph-border, #d0d8e4))";
     if (node.type === "circle") {
       nodeG.append("circle").attr("cx", node.x).attr("cy", node.y).attr("r", Math.min(node.width, node.height) / 2).attr("fill", node.style?.["fill"] ?? color3).attr("stroke", node.style?.["stroke"] ?? defaultStroke).attr("stroke-width", node.style?.["stroke-width"] ?? nodeStrokeWidth).attr("opacity", nodeFillOpacity);
     } else {
@@ -2244,19 +2239,19 @@ function drawCrowsFoot(g, x, y, angle, symbol) {
   if (symbol === "N" || symbol === "M") {
     const cx = x + Math.cos(angle) * len;
     const cy = y + Math.sin(angle) * len;
-    g.append("line").attr("x1", x).attr("y1", y).attr("x2", cx).attr("y2", cy).attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    g.append("line").attr("x1", x).attr("y1", y).attr("x2", cx).attr("y2", cy).attr("stroke", "var(--glyph-relation-line, var(--glyph-border, #d0d8e4))").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
     const lx = x + Math.cos(angle + spread) * len;
     const ly = y + Math.sin(angle + spread) * len;
-    g.append("line").attr("x1", x).attr("y1", y).attr("x2", lx).attr("y2", ly).attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    g.append("line").attr("x1", x).attr("y1", y).attr("x2", lx).attr("y2", ly).attr("stroke", "var(--glyph-relation-line, var(--glyph-border, #d0d8e4))").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
     const rx = x + Math.cos(angle - spread) * len;
     const ry = y + Math.sin(angle - spread) * len;
-    g.append("line").attr("x1", x).attr("y1", y).attr("x2", rx).attr("y2", ry).attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    g.append("line").attr("x1", x).attr("y1", y).attr("x2", rx).attr("y2", ry).attr("stroke", "var(--glyph-relation-line, var(--glyph-border, #d0d8e4))").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
   } else {
     const perpAngle = angle + Math.PI / 2;
     const halfLen = 8;
     const tx = x + Math.cos(angle) * 6;
     const ty = y + Math.sin(angle) * 6;
-    g.append("line").attr("x1", tx - Math.cos(perpAngle) * halfLen).attr("y1", ty - Math.sin(perpAngle) * halfLen).attr("x2", tx + Math.cos(perpAngle) * halfLen).attr("y2", ty + Math.sin(perpAngle) * halfLen).attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    g.append("line").attr("x1", tx - Math.cos(perpAngle) * halfLen).attr("y1", ty - Math.sin(perpAngle) * halfLen).attr("x2", tx + Math.cos(perpAngle) * halfLen).attr("y2", ty + Math.sin(perpAngle) * halfLen).attr("stroke", "var(--glyph-relation-line, var(--glyph-border, #d0d8e4))").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
   }
 }
 function renderRelation(svgElement, layout, zoomBehavior) {
@@ -2275,7 +2270,7 @@ function renderRelation(svgElement, layout, zoomBehavior) {
   const edgeGroup = root.append("g").attr("class", "glyph-relation-edges");
   for (const rel of layout.relationships) {
     const edgeG = edgeGroup.append("g").attr("class", "glyph-relation-edge");
-    edgeG.append("path").attr("d", lineGen(rel.points) ?? "").attr("fill", "none").attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    edgeG.append("path").attr("d", lineGen(rel.points) ?? "").attr("fill", "none").attr("stroke", "var(--glyph-relation-line, var(--glyph-border, #d0d8e4))").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
     const { fromSymbol, toSymbol } = parseCardinality(rel.cardinality);
     const p0 = rel.points[0];
     const p1 = rel.points[1];
@@ -2292,7 +2287,7 @@ function renderRelation(svgElement, layout, zoomBehavior) {
     if (rel.label) {
       const mid = rel.points[Math.floor(rel.points.length / 2)];
       if (mid) {
-        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 10).attr("text-anchor", "middle").attr("font-size", "11px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-label, #6b7a94)").text(inlineToText(rel.label));
+        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 10).attr("text-anchor", "middle").attr("font-size", "11px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-label, var(--glyph-text-muted, #6b7a94))").text(inlineToText(rel.label));
       }
     }
     const pFirst = rel.points[0];
@@ -2300,14 +2295,14 @@ function renderRelation(svgElement, layout, zoomBehavior) {
     if (pFirst && pSecond) {
       const fromLabelX = pFirst.x + (pSecond.x - pFirst.x) * 0.15;
       const fromLabelY = pFirst.y + (pSecond.y - pFirst.y) * 0.15 - 10;
-      edgeG.append("text").attr("x", fromLabelX).attr("y", fromLabelY).attr("text-anchor", "middle").attr("font-size", "10px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-cardinality, #6b7a94)").text(fromSymbol);
+      edgeG.append("text").attr("x", fromLabelX).attr("y", fromLabelY).attr("text-anchor", "middle").attr("font-size", "10px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-cardinality, var(--glyph-text-muted, #6b7a94))").text(fromSymbol);
     }
     const pEnd = rel.points[rel.points.length - 1];
     const pBeforeEnd = rel.points[rel.points.length - 2];
     if (pEnd && pBeforeEnd) {
       const toLabelX = pEnd.x + (pBeforeEnd.x - pEnd.x) * 0.15;
       const toLabelY = pEnd.y + (pBeforeEnd.y - pEnd.y) * 0.15 - 10;
-      edgeG.append("text").attr("x", toLabelX).attr("y", toLabelY).attr("text-anchor", "middle").attr("font-size", "10px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-cardinality, #6b7a94)").text(toSymbol);
+      edgeG.append("text").attr("x", toLabelX).attr("y", toLabelY).attr("text-anchor", "middle").attr("font-size", "10px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-cardinality, var(--glyph-text-muted, #6b7a94))").text(toSymbol);
     }
   }
   const entityGroup = root.append("g").attr("class", "glyph-relation-entities");
@@ -2316,24 +2311,24 @@ function renderRelation(svgElement, layout, zoomBehavior) {
     const x = entity.x - entity.width / 2;
     const y = entity.y - entity.height / 2;
     const attrs = entity.attributes ?? [];
-    entityG.append("rect").attr("x", x).attr("y", y).attr("width", entity.width).attr("height", entity.height).attr("rx", 4).attr("ry", 4).attr("fill", "var(--glyph-relation-entity-bg, #f4f6fa)").attr("stroke", "var(--glyph-relation-entity-border, #a8b5c8)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    entityG.append("rect").attr("x", x).attr("y", y).attr("width", entity.width).attr("height", entity.height).attr("rx", 4).attr("ry", 4).attr("fill", "var(--glyph-relation-entity-bg, var(--glyph-surface-raised, #f4f6fa))").attr("stroke", "var(--glyph-relation-entity-border, var(--glyph-border-strong, #a8b5c8))").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
     const headerHeight = ENTITY_HEADER_HEIGHT;
-    entityG.append("rect").attr("x", x).attr("y", y).attr("width", entity.width).attr("height", headerHeight).attr("rx", 4).attr("ry", 4).attr("fill", "var(--glyph-relation-header-bg, #00d4aa)");
-    entityG.append("rect").attr("x", x).attr("y", y + headerHeight - 4).attr("width", entity.width).attr("height", 4).attr("fill", "var(--glyph-relation-header-bg, #00d4aa)");
-    entityG.append("text").attr("x", entity.x).attr("y", y + headerHeight / 2).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "13px").attr("font-weight", "bold").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-header-text, #fff)").text(inlineToText(entity.label));
+    entityG.append("rect").attr("x", x).attr("y", y).attr("width", entity.width).attr("height", headerHeight).attr("rx", 4).attr("ry", 4).attr("fill", "var(--glyph-relation-header-bg, var(--glyph-accent, #0a9d7c))");
+    entityG.append("rect").attr("x", x).attr("y", y + headerHeight - 4).attr("width", entity.width).attr("height", 4).attr("fill", "var(--glyph-relation-header-bg, var(--glyph-accent, #0a9d7c))");
+    entityG.append("text").attr("x", entity.x).attr("y", y + headerHeight / 2).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "13px").attr("font-weight", "bold").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-header-text, var(--glyph-text-on-accent, #fff))").text(inlineToText(entity.label));
     if (attrs.length > 0) {
-      entityG.append("line").attr("x1", x).attr("y1", y + headerHeight).attr("x2", x + entity.width).attr("y2", y + headerHeight).attr("stroke", "var(--glyph-relation-entity-border, #a8b5c8)").attr("stroke-width", 1);
+      entityG.append("line").attr("x1", x).attr("y1", y + headerHeight).attr("x2", x + entity.width).attr("y2", y + headerHeight).attr("stroke", "var(--glyph-relation-entity-border, var(--glyph-border-strong, #a8b5c8))").attr("stroke-width", 1);
     }
     for (let i = 0; i < attrs.length; i++) {
       const attr = attrs[i];
       if (!attr) continue;
       const attrY = y + headerHeight + i * ENTITY_ATTR_HEIGHT + ENTITY_ATTR_HEIGHT / 2 + 4;
-      const textEl = entityG.append("text").attr("x", x + ENTITY_PADDING).attr("y", attrY).attr("dy", "0.35em").attr("font-size", "12px").attr("font-family", "system-ui, -apple-system, monospace").attr("fill", "var(--glyph-relation-attr-text, #1a2035)");
+      const textEl = entityG.append("text").attr("x", x + ENTITY_PADDING).attr("y", attrY).attr("dy", "0.35em").attr("font-size", "12px").attr("font-family", "system-ui, -apple-system, monospace").attr("fill", "var(--glyph-relation-attr-text, var(--glyph-text, #1a2035))");
       const nameSpan = textEl.append("tspan").text(inlineToText(attr.name));
       if (attr.primaryKey) {
         nameSpan.attr("font-weight", "bold").attr("text-decoration", "underline");
       }
-      textEl.append("tspan").attr("fill", "var(--glyph-relation-attr-type, #6b7a94)").text(`: ${attr.type}`);
+      textEl.append("tspan").attr("fill", "var(--glyph-relation-attr-type, var(--glyph-text-muted, #6b7a94))").text(`: ${attr.type}`);
     }
   }
 }
@@ -2415,6 +2410,11 @@ var relationDefinition = {
   schema: relationSchema,
   render: Relation
 };
+var KPI_COLOR_MAP = {
+  positive: "var(--glyph-kpi-positive, var(--glyph-color-success, #16a34a))",
+  negative: "var(--glyph-kpi-negative, var(--glyph-color-error, #dc2626))",
+  neutral: "var(--glyph-kpi-neutral, var(--glyph-text-muted, #6b7a94))"
+};
 var TREND_SYMBOLS = {
   up: "\u25B2",
   down: "\u25BC",
@@ -2497,7 +2497,7 @@ function Kpi({ data, block, container }) {
       const deltaStyle = {
         fontSize: "0.875rem",
         marginTop: "var(--glyph-spacing-xs, 0.25rem)",
-        color: `var(--glyph-kpi-${sentiment}, inherit)`
+        color: KPI_COLOR_MAP[sentiment]
       };
       return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": buildAriaLabel(metric), style: cardStyle2, children: [
         /* @__PURE__ */ jsx("div", { style: labelStyle4, children: /* @__PURE__ */ jsx(RichText, { content: metric.label }) }),
@@ -2648,7 +2648,10 @@ function renderValue(value) {
         "span",
         {
           "aria-label": "Supported",
-          style: { color: "var(--glyph-comparison-yes, #16a34a)", fontSize: "1.25rem" },
+          style: {
+            color: "var(--glyph-comparison-yes, var(--glyph-color-success, #16a34a))",
+            fontSize: "1.25rem"
+          },
           children: "\u2713"
         }
       );
@@ -2657,7 +2660,10 @@ function renderValue(value) {
         "span",
         {
           "aria-label": "Not supported",
-          style: { color: "var(--glyph-comparison-no, #dc2626)", fontSize: "1.25rem" },
+          style: {
+            color: "var(--glyph-comparison-no, var(--glyph-color-error, #dc2626))",
+            fontSize: "1.25rem"
+          },
           children: "\u2717"
         }
       );
@@ -2666,7 +2672,10 @@ function renderValue(value) {
         "span",
         {
           "aria-label": "Partially supported",
-          style: { color: "var(--glyph-comparison-partial, #d97706)", fontSize: "1.25rem" },
+          style: {
+            color: "var(--glyph-comparison-partial, var(--glyph-color-warning, #d97706))",
+            fontSize: "1.25rem"
+          },
           children: "\u25D0"
         }
       );
@@ -2691,7 +2700,7 @@ function Comparison({
   const tableStyle2 = {
     width: "100%",
     borderCollapse: "collapse",
-    border: "1px solid var(--glyph-table-border, #d0d8e4)",
+    border: "1px solid var(--glyph-table-border, var(--glyph-border, #d0d8e4))",
     borderRadius: "var(--glyph-radius-md, 0.5rem)",
     overflow: "hidden",
     fontSize: isCompact ? "0.8125rem" : "0.875rem"
@@ -2700,8 +2709,8 @@ function Comparison({
     padding: cellPadding,
     textAlign: "center",
     fontWeight: 600,
-    background: "var(--glyph-table-header-bg, #e8ecf3)",
-    borderBottom: "2px solid var(--glyph-table-border, #d0d8e4)",
+    background: "var(--glyph-table-header-bg, var(--glyph-surface, #e8ecf3))",
+    borderBottom: "2px solid var(--glyph-table-border, var(--glyph-border, #d0d8e4))",
     color: "var(--glyph-heading, #0a0e1a)"
   };
   const featureThStyle = {
@@ -2712,14 +2721,14 @@ function Comparison({
     padding: cellPadding,
     textAlign: "left",
     fontWeight: 600,
-    borderBottom: "1px solid var(--glyph-table-border, #d0d8e4)",
+    borderBottom: "1px solid var(--glyph-table-border, var(--glyph-border, #d0d8e4))",
     fontSize: "0.8125rem"
   };
   const cellStyle2 = (rowIndex) => ({
     padding: cellPadding,
     textAlign: "center",
-    borderBottom: "1px solid var(--glyph-table-border, #d0d8e4)",
-    background: rowIndex % 2 === 1 ? "var(--glyph-table-row-alt-bg, transparent)" : "transparent"
+    borderBottom: "1px solid var(--glyph-table-border, var(--glyph-border, #d0d8e4))",
+    background: rowIndex % 2 === 1 ? "var(--glyph-table-row-alt-bg, var(--glyph-surface-raised, transparent))" : "transparent"
   });
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Comparison", style: containerStyle11, children: [
     title && /* @__PURE__ */ jsx(
@@ -2782,7 +2791,7 @@ function Comparison({
             scope: "row",
             style: {
               ...rowThStyle,
-              background: rowIndex % 2 === 1 ? "var(--glyph-table-row-alt-bg, transparent)" : "transparent"
+              background: rowIndex % 2 === 1 ? "var(--glyph-table-row-alt-bg, var(--glyph-surface-raised, transparent))" : "transparent"
             },
             children: feature.name
           }
@@ -2921,8 +2930,9 @@ function CodeDiff({ data, block }) {
     return void 0;
   }
   function rowColor(kind) {
-    if (kind === "add") return "var(--glyph-codediff-add-color, inherit)";
-    if (kind === "del") return "var(--glyph-codediff-del-color, inherit)";
+    if (kind === "add")
+      return "var(--glyph-codediff-add-color, var(--glyph-color-success, #16a34a))";
+    if (kind === "del") return "var(--glyph-codediff-del-color, var(--glyph-color-error, #dc2626))";
     return void 0;
   }
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": summary, style: containerStyle11, children: [
@@ -4049,21 +4059,20 @@ function renderIcon(g, iconName, x, y, size = 20) {
 
 // src/architecture/render.ts
 var NODE_PALETTE = [
-  "#00d4aa",
-  "#b44dff",
-  "#22c55e",
-  "#e040fb",
-  "#00e5ff",
-  "#84cc16",
-  "#f472b6",
-  "#fb923c",
-  "#818cf8",
-  "#38bdf8"
+  "var(--glyph-palette-color-1, #00d4aa)",
+  "var(--glyph-palette-color-2, #b44dff)",
+  "var(--glyph-palette-color-3, #22c55e)",
+  "var(--glyph-palette-color-4, #e040fb)",
+  "var(--glyph-palette-color-5, #00e5ff)",
+  "var(--glyph-palette-color-6, #84cc16)",
+  "var(--glyph-palette-color-7, #f472b6)",
+  "var(--glyph-palette-color-8, #fb923c)",
+  "var(--glyph-palette-color-9, #818cf8)",
+  "var(--glyph-palette-color-10, #38bdf8)"
 ];
 function zoneBackground(depth) {
   const alphas = [0.06, 0.1, 0.14, 0.18];
-  const alpha = alphas[Math.min(depth, alphas.length - 1)] ?? 0.18;
-  return `rgba(0,212,170,${alpha})`;
+  return alphas[Math.min(depth, alphas.length - 1)] ?? 0.18;
 }
 function getThemeVar3(container, varName, fallback) {
   return getComputedStyle(container).getPropertyValue(varName).trim() || fallback;
@@ -4076,7 +4085,7 @@ function renderArchitecture(svgElement, layout, rootRef, zoomBehavior) {
   const height = Math.max(layout.height, 200);
   svg.attr("viewBox", `0 0 ${width} ${height}`);
   const defs = svg.append("defs");
-  defs.append("marker").attr("id", ARROW_MARKER_ID3).attr("viewBox", "0 0 10 10").attr("refX", 10).attr("refY", 5).attr("markerWidth", 8).attr("markerHeight", 8).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 5 L 0 10 Z").attr("fill", "var(--glyph-edge-color, #6b7a94)");
+  defs.append("marker").attr("id", ARROW_MARKER_ID3).attr("viewBox", "0 0 10 10").attr("refX", 10).attr("refY", 5).attr("markerWidth", 8).attr("markerHeight", 8).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 5 L 0 10 Z").attr("fill", "var(--glyph-edge-color, var(--glyph-border, #d0d8e4))");
   const container = svgElement.parentElement ?? svgElement;
   const nodeRadius = getThemeVar3(container, "--glyph-node-radius", "3");
   const nodeStrokeWidth = getThemeVar3(container, "--glyph-node-stroke-width", "1.5");
@@ -4092,7 +4101,7 @@ function renderArchitecture(svgElement, layout, rootRef, zoomBehavior) {
   const zoneGroup = root.append("g").attr("class", "glyph-architecture-zones");
   for (const zone of sortedZones) {
     const zoneG = zoneGroup.append("g").attr("class", "glyph-architecture-zone");
-    zoneG.append("rect").attr("x", zone.x).attr("y", zone.y).attr("width", zone.width).attr("height", zone.height).attr("rx", nodeRadius).attr("ry", nodeRadius).attr("fill", zoneBackground(zone.depth)).attr("stroke", "var(--glyph-accent-muted, #1a4a3a)").attr("stroke-width", 1).attr("stroke-dasharray", "6,3");
+    zoneG.append("rect").attr("x", zone.x).attr("y", zone.y).attr("width", zone.width).attr("height", zone.height).attr("rx", nodeRadius).attr("ry", nodeRadius).attr("fill", "var(--glyph-accent, #00d4aa)").attr("fill-opacity", zoneBackground(zone.depth)).attr("stroke", "var(--glyph-accent-muted, #1a4a3a)").attr("stroke-width", 1).attr("stroke-dasharray", "6,3");
     zoneG.append("text").attr("x", zone.x + 10).attr("y", zone.y + 18).attr("font-size", "12px").attr("font-weight", "bold").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-text-muted, #7a8599)").text(zone.label);
   }
   const edgeGroup = root.append("g").attr("class", "glyph-architecture-edges");
@@ -4102,7 +4111,10 @@ function renderArchitecture(svgElement, layout, rootRef, zoomBehavior) {
     const lineGen = d32.line().x((d) => d.x).y((d) => d.y);
     const strokeWidth = edge.type === "data" ? 2.5 : 1.5;
     const dashArray = edge.type === "async" ? "5,5" : null;
-    edgeG.append("path").attr("d", lineGen(edge.points) ?? "").attr("fill", "none").attr("stroke", edge.style?.["stroke"] ?? "var(--glyph-edge-color, #6b7a94)").attr("stroke-width", edge.style?.["stroke-width"] ?? String(strokeWidth)).attr("marker-end", `url(#${ARROW_MARKER_ID3})`).attr("stroke-dasharray", dashArray);
+    edgeG.append("path").attr("d", lineGen(edge.points) ?? "").attr("fill", "none").attr(
+      "stroke",
+      edge.style?.["stroke"] ?? "var(--glyph-edge-color, var(--glyph-border, #d0d8e4))"
+    ).attr("stroke-width", edge.style?.["stroke-width"] ?? String(strokeWidth)).attr("marker-end", `url(#${ARROW_MARKER_ID3})`).attr("stroke-dasharray", dashArray);
     if (edge.label && edge.points.length > 1) {
       let totalLen = 0;
       const segments = [];
@@ -4143,7 +4155,7 @@ function renderArchitecture(svgElement, layout, rootRef, zoomBehavior) {
     if (!node) continue;
     const nodeG = nodeGroup.append("g").attr("class", "glyph-architecture-node");
     const color3 = NODE_PALETTE[nodeIdx % NODE_PALETTE.length] ?? "#00d4aa";
-    const defaultStroke = d32.color(color3)?.darker(0.5)?.toString() ?? "var(--glyph-edge-color, #6b7a94)";
+    const defaultStroke = d32.color(color3)?.darker(0.5)?.toString() ?? "var(--glyph-edge-color, var(--glyph-border, #d0d8e4))";
     nodeG.append("rect").attr("x", node.x).attr("y", node.y).attr("width", node.width).attr("height", node.height).attr("rx", nodeRadius).attr("ry", nodeRadius).attr("fill", color3).attr("stroke", defaultStroke).attr("stroke-width", nodeStrokeWidth).attr("opacity", nodeFillOpacity);
     if (node.icon) {
       renderIcon(nodeG, node.icon, node.x + node.width / 2, node.y + 20, 18);
@@ -4721,9 +4733,9 @@ function optionLabelStyle(isSelected, submitted, isCorrectOption, isIncorrectSel
     marginBottom: "0.375rem",
     borderRadius: "var(--glyph-radius-md, 0.5rem)",
     cursor: submitted ? "default" : "pointer",
-    background: submitted ? isCorrectOption ? "var(--glyph-quiz-correct-bg, #dcfce7)" : isIncorrectSelection ? "var(--glyph-quiz-incorrect-bg, #fee2e2)" : "transparent" : isSelected ? "var(--glyph-surface, #e8ecf3)" : "transparent",
+    background: submitted ? isCorrectOption ? "var(--glyph-quiz-correct-bg, rgba(22, 163, 74, 0.12))" : isIncorrectSelection ? "var(--glyph-quiz-incorrect-bg, rgba(220, 38, 38, 0.1))" : "transparent" : isSelected ? "var(--glyph-surface, #e8ecf3)" : "transparent",
     border: "1px solid",
-    borderColor: submitted ? isCorrectOption ? "var(--glyph-quiz-correct, #16a34a)" : isIncorrectSelection ? "var(--glyph-quiz-incorrect, #dc2626)" : "var(--glyph-border, #d0d8e4)" : isSelected ? "var(--glyph-border, #d0d8e4)" : "transparent",
+    borderColor: submitted ? isCorrectOption ? "var(--glyph-quiz-correct, var(--glyph-color-success, #16a34a))" : isIncorrectSelection ? "var(--glyph-quiz-incorrect, var(--glyph-color-error, #dc2626))" : "var(--glyph-border, #d0d8e4)" : isSelected ? "var(--glyph-border, #d0d8e4)" : "transparent",
     fontSize: "0.875rem",
     lineHeight: 1.6
   };
@@ -4746,8 +4758,8 @@ function feedbackStyle(correct) {
     marginTop: "0.75rem",
     padding: "0.5rem 0.75rem",
     borderRadius: "var(--glyph-radius-md, 0.5rem)",
-    background: correct ? "var(--glyph-quiz-correct-bg, #dcfce7)" : "var(--glyph-quiz-incorrect-bg, #fee2e2)",
-    color: correct ? "var(--glyph-quiz-correct, #16a34a)" : "var(--glyph-quiz-incorrect, #dc2626)",
+    background: correct ? "var(--glyph-quiz-correct-bg, rgba(22, 163, 74, 0.12))" : "var(--glyph-quiz-incorrect-bg, rgba(220, 38, 38, 0.1))",
+    color: correct ? "var(--glyph-quiz-correct, var(--glyph-color-success, #16a34a))" : "var(--glyph-quiz-incorrect, var(--glyph-color-error, #dc2626))",
     fontWeight: 600,
     fontSize: "0.875rem"
   };
@@ -5195,10 +5207,10 @@ function computeSectionLayout(sections) {
   });
 }
 var PROGRESS_COLORS = [
-  "var(--glyph-infographic-color-1, #3b82f6)",
-  "var(--glyph-infographic-color-2, #22c55e)",
-  "var(--glyph-infographic-color-3, #f59e0b)",
-  "var(--glyph-infographic-color-4, #ef4444)"
+  "var(--glyph-infographic-color-1, var(--glyph-palette-color-1, #00d4aa))",
+  "var(--glyph-infographic-color-2, var(--glyph-palette-color-2, #b44dff))",
+  "var(--glyph-infographic-color-3, var(--glyph-palette-color-3, #22c55e))",
+  "var(--glyph-infographic-color-4, var(--glyph-palette-color-4, #e040fb))"
 ];
 function renderStatGroup(items, keyPrefix) {
   const rowStyle = {
@@ -5213,12 +5225,12 @@ function renderStatGroup(items, keyPrefix) {
   const valueStyle = {
     fontSize: "1.75rem",
     fontWeight: 700,
-    color: "var(--glyph-infographic-value-color, #1d4ed8)",
+    color: "var(--glyph-infographic-value-color, var(--glyph-accent, #0a9d7c))",
     lineHeight: 1.2
   };
   const labelStyle4 = {
     fontSize: "0.8125rem",
-    color: "var(--glyph-infographic-label-color, #475569)",
+    color: "var(--glyph-infographic-label-color, var(--glyph-text-muted, #6b7a94))",
     marginTop: "var(--glyph-spacing-xs, 0.25rem)",
     textTransform: "uppercase",
     letterSpacing: "0.06em",
@@ -5226,7 +5238,7 @@ function renderStatGroup(items, keyPrefix) {
   };
   const descStyle = {
     fontSize: "0.75rem",
-    color: "var(--glyph-infographic-desc-color, #64748b)",
+    color: "var(--glyph-infographic-desc-color, var(--glyph-text-muted, #6b7a94))",
     marginTop: "var(--glyph-spacing-xs, 0.25rem)",
     fontStyle: "italic"
   };
@@ -5240,7 +5252,7 @@ function renderProgressGroup(items, keyPrefix, colorOffset) {
   const trackStyle = {
     height: "0.5rem",
     borderRadius: "var(--glyph-radius-sm, 0.375rem)",
-    background: "var(--glyph-infographic-track, #e0e4ea)",
+    background: "var(--glyph-infographic-track, var(--glyph-surface, #e8ecf3))",
     overflow: "hidden"
   };
   return /* @__PURE__ */ jsx("div", { "data-group": "progress", children: items.map((item, i) => {
@@ -5273,7 +5285,7 @@ function renderProgressGroup(items, keyPrefix, colorOffset) {
                   "span",
                   {
                     style: {
-                      color: "var(--glyph-infographic-value-color, #1d4ed8)",
+                      color: "var(--glyph-infographic-value-color, var(--glyph-accent, #0a9d7c))",
                       fontWeight: 700
                     },
                     children: [
@@ -5320,7 +5332,7 @@ function renderFactGroup(items, keyPrefix) {
       {
         style: {
           marginRight: "var(--glyph-spacing-xs, 0.25rem)",
-          color: "var(--glyph-infographic-accent, #3b82f6)"
+          color: "var(--glyph-infographic-accent, var(--glyph-accent, #0a9d7c))"
         },
         "aria-hidden": "true",
         children: item.icon
@@ -5335,7 +5347,7 @@ function renderTextGroup(items, keyPrefix) {
     fontSize: "0.875rem",
     lineHeight: 1.6,
     color: "var(--glyph-text, #1a2035)",
-    borderLeft: "3px solid var(--glyph-infographic-accent, #3b82f6)",
+    borderLeft: "3px solid var(--glyph-infographic-accent, var(--glyph-accent, #0a9d7c))",
     paddingLeft: "var(--glyph-spacing-sm, 0.5rem)"
   };
   return /* @__PURE__ */ jsx("div", { "data-group": "text", children: items.map((item, i) => /* @__PURE__ */ jsx("p", { style: pStyle, children: item.content }, `${keyPrefix}-${String(i)}`)) }, keyPrefix);
@@ -5408,7 +5420,7 @@ function renderPieGroup(items, keyPrefix, colorOffset) {
           style: {
             fontSize: "0.875rem",
             fontWeight: 600,
-            color: "var(--glyph-infographic-heading-color, #1e293b)",
+            color: "var(--glyph-infographic-heading-color, var(--glyph-heading, #0a0e1a))",
             marginBottom: "var(--glyph-spacing-xs, 0.25rem)"
           },
           children: item.label
@@ -5467,7 +5479,7 @@ function renderDividerGroup(items, keyPrefix) {
       role: "separator",
       style: {
         border: "none",
-        borderTop: `1px ${item.style ?? "solid"} var(--glyph-infographic-section-divider, #d0d8e4)`,
+        borderTop: `1px ${item.style ?? "solid"} var(--glyph-infographic-section-divider, var(--glyph-border, #d0d8e4))`,
         margin: "var(--glyph-spacing-sm, 0.5rem) 0"
       }
     },
@@ -5475,7 +5487,7 @@ function renderDividerGroup(items, keyPrefix) {
   )) }, keyPrefix);
 }
 function renderRatingGroup(items, keyPrefix) {
-  const starColor = "var(--glyph-infographic-star, #f59e0b)";
+  const starColor = "var(--glyph-infographic-star, var(--glyph-rating-star-fill, #f59e0b))";
   const emptyColor = "var(--glyph-text-muted, #6b7a94)";
   return /* @__PURE__ */ jsx("div", { "data-group": "rating", children: items.map((item, i) => {
     const max2 = item.max ?? 5;
@@ -5568,7 +5580,7 @@ function renderRatingGroup(items, keyPrefix) {
               {
                 style: {
                   fontSize: "0.75rem",
-                  color: "var(--glyph-infographic-desc-color, #64748b)",
+                  color: "var(--glyph-infographic-desc-color, var(--glyph-text-muted, #6b7a94))",
                   marginTop: "var(--glyph-spacing-xs, 0.25rem)",
                   fontStyle: "italic"
                 },
@@ -5611,11 +5623,11 @@ function Infographic({
     margin: 0,
     paddingBottom: "var(--glyph-spacing-sm, 0.5rem)",
     marginBottom: "var(--glyph-spacing-md, 1rem)",
-    borderBottom: "2px solid var(--glyph-infographic-accent, #3b82f6)",
+    borderBottom: "2px solid var(--glyph-infographic-accent, var(--glyph-accent, #0a9d7c))",
     ...useGrid ? { gridColumn: "1 / -1" } : {}
   };
   const sectionDividerStyle = {
-    borderTop: "1px solid var(--glyph-infographic-section-divider, #d0d8e4)",
+    borderTop: "1px solid var(--glyph-infographic-section-divider, var(--glyph-border, #d0d8e4))",
     paddingTop: "var(--glyph-spacing-md, 1rem)",
     marginTop: "var(--glyph-spacing-md, 1rem)"
   };
@@ -5633,9 +5645,9 @@ function Infographic({
   const headingStyle = {
     fontWeight: 700,
     fontSize: "1rem",
-    color: "var(--glyph-infographic-heading-color, #1e293b)",
+    color: "var(--glyph-infographic-heading-color, var(--glyph-heading, #0a0e1a))",
     marginBottom: "var(--glyph-spacing-sm, 0.5rem)",
-    borderLeft: "3px solid var(--glyph-infographic-accent, #3b82f6)",
+    borderLeft: "3px solid var(--glyph-infographic-accent, var(--glyph-accent, #0a9d7c))",
     paddingLeft: "var(--glyph-spacing-sm, 0.5rem)"
   };
   const printCss = useGrid ? `@media print { #${cssEscape(baseId)} [data-layout="grid"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } #${cssEscape(baseId)} [data-layout="grid"] > div { break-inside: avoid; } }` : "";
@@ -6615,7 +6627,7 @@ var labelStyle3 = {
   marginBottom: "0.375rem"
 };
 var requiredStyle = {
-  color: "var(--glyph-form-error, #dc2626)",
+  color: "var(--glyph-form-error, var(--glyph-color-error, #dc2626))",
   marginLeft: "0.25rem"
 };
 var textInputStyle = {
@@ -6652,7 +6664,7 @@ var submitButtonStyle = {
   borderRadius: "var(--glyph-radius-md, 0.5rem)",
   border: "1px solid var(--glyph-accent, #0a9d7c)",
   background: "var(--glyph-accent, #0a9d7c)",
-  color: "#fff",
+  color: "var(--glyph-text-on-accent, #fff)",
   cursor: "pointer",
   fontWeight: 600,
   fontSize: "0.875rem",
@@ -6661,7 +6673,7 @@ var submitButtonStyle = {
 function invalidStyle(isInvalid) {
   if (!isInvalid) return {};
   return {
-    borderColor: "var(--glyph-form-error, #dc2626)"
+    borderColor: "var(--glyph-form-error, var(--glyph-color-error, #dc2626))"
   };
 }
 function renderField({
@@ -6937,9 +6949,9 @@ var columnCountStyle = {
 };
 function cardStyle(isGrabbed, priority) {
   const priorityColors = {
-    high: "var(--glyph-kanban-priority-high, #dc2626)",
-    medium: "var(--glyph-kanban-priority-medium, #f59e0b)",
-    low: "var(--glyph-kanban-priority-low, #22c55e)"
+    high: "var(--glyph-kanban-priority-high, var(--glyph-color-error, #dc2626))",
+    medium: "var(--glyph-kanban-priority-medium, var(--glyph-color-warning, #d97706))",
+    low: "var(--glyph-kanban-priority-low, var(--glyph-color-success, #22c55e))"
   };
   return {
     background: "var(--glyph-kanban-card-bg, var(--glyph-surface-raised, #f4f6fa))",