applies wompum color to tailwind class system

static/js/colorCalculator.js

@@ -14,7 +14,7 @@ class ColorCalculator {
         // Calculate shade based on influences
         const shade = this.calculateShade(influences);
         
-        return `var(--${colorFamily}-${shade})`;
+        return `${colorFamily}-${shade}`;
     }
 
     // Calculate shade based on surrounding influences

static/js/wompum.js

@@ -87,7 +87,7 @@ class WompumGrid {
             
             // Calculate and apply color
             const color = this.colorCalculator.getColor(sigilDigit, influences);
-            cell.style.backgroundColor = color;
+            cell.classList.add(`bg-${color}`);
         });
     }
 
@@ -192,7 +192,7 @@ class RadialWompumGrid {
         const sigilDigit = this.getSigilDigit(index);
         // Pass empty array for influences since we don't need adjacent segments
         const color = this.colorCalculator.getColor(sigilDigit, []);
-        path.setAttribute('fill', color);
+        path.setAttribute('fill', `var(--color-${color})`);
         
         return path;
     }