style: mute chart palette to match logo's emerald brand colors

Replace vivid Tailwind -500/-400 chart colors with -600/-700 depth tones
anchored to the logo's emerald (#10b981). Reports bar chart now uses
emerald-600 instead of indigo-500. Covers PIE_COLORS, reports bar, and
CATEGORY_COLORS in the policy score-distribution chart.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/resources/js/app.js

@@ -70,11 +70,19 @@ Chart.register(
 // score-distribution component) can render charts without re-bundling.
 window.Chart = Chart;
 
-// Palette tuned for both light and dark backgrounds. Reused across the
-// pie charts so categories/reporters don't share colours.
+// Palette anchored to the logo's emerald (#10b981). Uses -600/-700 Tailwind
+// depth tones for a modern, muted feel instead of vivid -500 values.
 const PIE_COLORS = [
-    '#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
-    '#06b6d4', '#ec4899', '#84cc16', '#f97316', '#14b8a6',
+    '#10b981', // emerald-500  (logo anchor)
+    '#0891b2', // cyan-600
+    '#4f46e5', // indigo-600
+    '#7c3aed', // violet-600
+    '#db2777', // pink-600
+    '#dc2626', // red-600
+    '#d97706', // amber-600
+    '#65a30d', // lime-600
+    '#0f766e', // teal-700
+    '#1d4ed8', // blue-700
 ];
 
 function chartTheme() {
@@ -110,7 +118,7 @@ function renderReportsChart() {
             datasets: [{
                 label: 'reports',
                 data,
-                backgroundColor: '#6366f1',
+                backgroundColor: '#059669', // emerald-600 — brand anchor for bar chart
             }],
         },
         options: {

ui/resources/views/pages/policies/edit.twig

@@ -212,8 +212,14 @@ window.policyPreview = function (id) {
 
 window.policyScoreDistribution = function (id) {
     const CATEGORY_COLORS = [
-        '#ef4444', '#f97316', '#eab308', '#22c55e',
-        '#0ea5e9', '#a855f7', '#ec4899', '#14b8a6',
+        '#dc2626', // red-600
+        '#d97706', // amber-600
+        '#ca8a04', // yellow-600
+        '#16a34a', // green-600
+        '#0284c7', // sky-600
+        '#7c3aed', // violet-600
+        '#db2777', // pink-600
+        '#0f766e', // teal-700
     ];
     function chartTheme() {
         const isDark = document.documentElement.classList.contains('dark');