template refactor

app/templates/palettes/dark.css.j2

@@ -0,0 +1,30 @@
+:root {
+  --bg: #0b1220;              /* slate-950ish */
+  --text: #e5e7eb;            /* slate-200 */
+  --muted: #94a3b8;           /* slate-400 */
+
+  --card-bg: #0f172a;         /* slate-900 */
+  --border: #334155;          /* slate-700 */
+
+  --accent: #38bdf8;
+
+  --ok: #16a34a;
+  --ok-on: #052e16;
+  --issue: #ef4444;
+  --issue-on: #450a0a;
+
+  --chip-bg: #1f2937;         /* gray-800 */
+
+  /* Summary bar emphasis */
+  --summary-bg: #101a33;           /* a touch brighter than --card-bg */
+  --summary-border: #2c3a56;       /* slightly brighter border */
+  --summary-shadow: rgba(0, 0, 0, 0.5);
+
+  /* KPI chip fills (derived from status colors) */
+  --ok-bg-soft: color-mix(in srgb, var(--ok) 18%, transparent);
+  --issue-bg-soft: color-mix(in srgb, var(--issue) 18%, transparent);
+  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
+
+  /* Port table border accent (dark) */
+  --card-border: #2b3b5c;    /* slightly brighter than main border */
+}

app/templates/palettes/light.css.j2

@@ -0,0 +1,35 @@
+:root {
+  /* Surface & text */
+  --bg: #f8fafc;
+  --text: #0f172a;
+  --muted: #334155;
+
+  /* Cards & borders */
+  --card-bg: #ffffff;
+  --border: #e2e8f0;
+
+  /* Accents */
+  --accent: #0ea5e9;
+
+  /* Status colors */
+  --ok: #16a34a;
+  --ok-on: #ecfdf5;
+  --issue: #ef4444;
+  --issue-on: #fef2f2;
+
+  /* Misc */
+  --chip-bg: #e5e7eb;
+
+    /* Summary bar emphasis (light) */
+  --summary-bg: #f1f5f9;           /* slightly darker than page bg for contrast */
+  --summary-border: #cbd5e1;       /* soft cool-gray border */
+  --summary-shadow: rgba(0, 0, 0, 0.08);
+
+  /* KPI chip fills (derived from status colors) */
+  --ok-bg-soft: color-mix(in srgb, var(--ok) 12%, white);
+  --issue-bg-soft: color-mix(in srgb, var(--issue) 12%, white);
+  --accent-soft: color-mix(in srgb, var(--accent) 12%, white);
+
+  /* Port table border accent (light) */
+  --card-border: #cbd5e1;    /* cool gray for gentle contrast */
+}