style: update unit category colors to match Tailwind palette

- Harmonize category colors with standard Tailwind CSS 500 shades
- Use Rose, Violet, Emerald, Amber, Blue, and Indigo for grouping related units
- Synchronize hex values in units.ts with OKLCH variables in globals.css

app/globals.css

@@ -28,31 +28,31 @@
   --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 
-  /* Category colors for 23 unit types */
+  /* Category colors for 23 unit types - Tailored to Tailwind 500 shades */
-  --color-category-angle: oklch(69.2% 0.154 237.7);
+  --color-category-angle: oklch(0.645 0.246 16.439); /* Rose 500 */
-  --color-category-apparent-power: oklch(64.8% 0.190 293.6);
+  --color-category-apparent-power: oklch(0.606 0.25 273.428); /* Violet 500 */
-  --color-category-area: oklch(75.8% 0.159 70.5);
+  --color-category-area: oklch(0.696 0.17 162.48); /* Emerald 500 */
-  --color-category-current: oklch(75.8% 0.159 70.5);
+  --color-category-current: oklch(0.769 0.188 70.08); /* Amber 500 */
-  --color-category-digital: oklch(72.3% 0.134 216.8);
+  --color-category-digital: oklch(0.623 0.214 259.815); /* Blue 500 */
-  --color-category-each: oklch(52.5% 0.033 257.5);
+  --color-category-each: oklch(0.539 0.047 258.337); /* Slate 500 */
-  --color-category-energy: oklch(80.3% 0.162 97.3);
+  --color-category-energy: oklch(0.769 0.188 70.08); /* Amber 500 */
-  --color-category-frequency: oklch(66.8% 0.238 301.6);
+  --color-category-frequency: oklch(0.606 0.25 273.428); /* Violet 500 */
-  --color-category-illuminance: oklch(78.3% 0.184 128.6);
+  --color-category-illuminance: oklch(0.773 0.174 91.249); /* Yellow 500 */
-  --color-category-length: oklch(62.1% 0.214 255.5);
+  --color-category-length: oklch(0.623 0.214 259.815); /* Blue 500 */
-  --color-category-mass: oklch(72.4% 0.159 165.1);
+  --color-category-mass: oklch(0.696 0.17 162.48); /* Emerald 500 */
-  --color-category-pace: oklch(71.5% 0.145 192.2);
+  --color-category-pace: oklch(0.704 0.14 182.503); /* Teal 500 */
-  --color-category-parts-per: oklch(69.4% 0.224 350.3);
+  --color-category-parts-per: oklch(0.707 0.022 261.325); /* Slate 400 */
-  --color-category-power: oklch(62.8% 0.230 16.6);
+  --color-category-power: oklch(0.606 0.25 273.428); /* Violet 500 */
-  --color-category-pressure: oklch(61.3% 0.218 281.3);
+  --color-category-pressure: oklch(0.585 0.233 277.117); /* Indigo 500 */
-  --color-category-reactive-energy: oklch(67.5% 0.276 320.6);
+  --color-category-reactive-energy: oklch(0.769 0.188 70.08); /* Amber 500 */
-  --color-category-reactive-power: oklch(74.5% 0.233 316.8);
+  --color-category-reactive-power: oklch(0.606 0.25 273.428); /* Violet 500 */
-  --color-category-speed: oklch(72.4% 0.159 165.1);
+  --color-category-speed: oklch(0.704 0.14 182.503); /* Teal 500 */
-  --color-category-temperature: oklch(62.8% 0.257 29.2);
+  --color-category-temperature: oklch(0.627 0.225 31.038); /* Red 500 */
-  --color-category-tempo: oklch(70% 0.18 30);
+  --color-category-tempo: oklch(0.705 0.213 47.591); /* Orange 500 */
-  --color-category-time: oklch(58.5% 0.238 293.1);
+  --color-category-time: oklch(0.585 0.233 277.117); /* Indigo 500 */
-  --color-category-voltage: oklch(75.5% 0.159 55.3);
+  --color-category-voltage: oklch(0.769 0.188 70.08); /* Amber 500 */
-  --color-category-volume: oklch(64.8% 0.190 293.6);
+  --color-category-volume: oklch(0.696 0.17 162.48); /* Emerald 500 */
-  --color-category-volume-flow-rate: oklch(77.9% 0.162 208.8);
+  --color-category-volume-flow-rate: oklch(0.696 0.17 162.48); /* Emerald 500 */
 
   /* Custom animations */
   --animate-gradient: gradient 8s linear infinite;

lib/units/units.ts

@@ -206,30 +206,30 @@ export function getCategoryColor(measure: Measure): string {
  */
 export function getCategoryColorHex(measure: Measure): string {
   const colorMap: Record<Measure, string> = {
-    angle: '#0EA5E9',
+    angle: '#f43f5e',          // Rose 500
-    apparentPower: '#8B5CF6',
+    apparentPower: '#8b5cf6',  // Violet 500
-    area: '#F59E0B',
+    area: '#10b981',           // Emerald 500
-    current: '#F59E0B',
+    current: '#f59e0b',        // Amber 500
-    digital: '#06B6D4',
+    digital: '#3b82f6',        // Blue 500
-    each: '#64748B',
+    each: '#64748b',           // Slate 500
-    energy: '#EAB308',
+    energy: '#f59e0b',         // Amber 500
-    frequency: '#A855F7',
+    frequency: '#8b5cf6',      // Violet 500
-    illuminance: '#84CC16',
+    illuminance: '#eab308',    // Yellow 500
-    length: '#3B82F6',
+    length: '#3b82f6',         // Blue 500
-    mass: '#10B981',
+    mass: '#10b981',           // Emerald 500
-    pace: '#14B8A6',
+    pace: '#14b8a6',           // Teal 500
-    partsPer: '#EC4899',
+    partsPer: '#94a3b8',       // Slate 400
-    power: '#F43F5E',
+    power: '#8b5cf6',          // Violet 500
-    pressure: '#6366F1',
+    pressure: '#6366f1',       // Indigo 500
-    reactiveEnergy: '#D946EF',
+    reactiveEnergy: '#f59e0b', // Amber 500
-    reactivePower: '#E879F9',
+    reactivePower: '#8b5cf6',  // Violet 500
-    speed: '#10B981',
+    speed: '#14b8a6',          // Teal 500
-    temperature: '#EF4444',
+    temperature: '#ef4444',    // Red 500
-    tempo: '#F97316', // Orange for music/tempo
+    tempo: '#f97316',          // Orange 500
-    time: '#7C3AED',
+    time: '#6366f1',           // Indigo 500
-    voltage: '#FB923C',
+    voltage: '#f59e0b',        // Amber 500
-    volume: '#8B5CF6',
+    volume: '#10b981',         // Emerald 500
-    volumeFlowRate: '#22D3EE',
+    volumeFlowRate: '#10b981', // Emerald 500
   };
 
   return colorMap[measure];