@runfusion/fusion 0.43.1 → 0.45.0

package/dist/client/theme-data.css

@@ -3,6 +3,9 @@
    Contract: every dark/light theme block defines --surface-hover
    so component hover states can use var(--surface-hover) without
    per-selector fallbacks or mode-specific overrides.
+
+   FNXC:DashboardTheming 2026-06-15-00:00:
+   Theme token translucency uses color-mix(in srgb, var(--token) N%, transparent) or exact literal color-mix values for glass surfaces. Raw RGB alpha color functions are banned outside var() fallbacks by FN-6489.
    ============================================================ */
 
 /* OCEAN - Deep blues and cyans */
@@ -22,7 +25,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #00a08a;
   --cta-border-hover: #00c853;
-  --cta-glow: 0 0 8px rgba(0, 200, 83, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #0288d1;
   --accent: #00b8d4;
@@ -45,7 +48,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #00897b;
   --cta-border-hover: #4caf50;
-  --cta-glow: 0 0 8px rgba(0, 137, 123, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #0277bd;
   --accent: #0097a7;
@@ -69,7 +72,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #22c55e;
   --cta-border-hover: #34d399;
-  --cta-glow: 0 0 8px rgba(34, 197, 94, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #29b6f6;
   --accent: #16a34a;
@@ -92,7 +95,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #16a34a;
   --cta-border-hover: #22c55e;
-  --cta-glow: 0 0 8px rgba(22, 163, 74, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #0288d1;
   --accent: #15803d;
@@ -116,7 +119,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #ff6d00;
   --cta-border-hover: #ff9100;
-  --cta-glow: 0 0 8px rgba(255, 109, 0, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #2196f3;
   --accent: #ff6d00;
@@ -139,7 +142,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #e65100;
   --cta-border-hover: #ff6d00;
-  --cta-glow: 0 0 8px rgba(230, 81, 0, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #1565c0;
   --accent: #e65100;
@@ -163,7 +166,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #ab47bc;
   --cta-border-hover: #ce93d8;
-  --cta-glow: 0 0 8px rgba(179, 136, 255, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #7c4dff;
   --accent: #9c27b0;
@@ -186,7 +189,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #9c27b0;
   --cta-border-hover: #ab47bc;
-  --cta-glow: 0 0 8px rgba(156, 39, 176, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #6200ea;
   --accent: #7b1fa2;
@@ -210,7 +213,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #9e9e9e;
   --cta-border-hover: #bdbdbd;
-  --cta-glow: 0 0 8px rgba(158, 158, 158, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #64b5f6;
   --accent: #b0b0b0;
@@ -233,7 +236,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #757575;
   --cta-border-hover: #9e9e9e;
-  --cta-glow: 0 0 8px rgba(117, 117, 117, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #1976d2;
   --accent: #616161;
@@ -256,7 +259,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #7c8fa4;
   --cta-border-hover: #94a3b8;
-  --cta-glow: 0 0 8px rgba(148, 163, 184, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border-hover) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #60a5fa;
   --accent: #64748b;
@@ -278,7 +281,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #64748b;
   --cta-border-hover: #94a3b8;
-  --cta-glow: 0 0 8px rgba(71, 85, 105, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #3b82f6;
   --accent: #475569;
@@ -301,7 +304,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #9ca3af;
   --cta-border-hover: #a8a29e;
-  --cta-glow: 0 0 8px rgba(168, 162, 158, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border-hover) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #93c5fd;
   --accent: #a1887f;
@@ -323,13 +326,184 @@
   --cta-text: #fff;
   --cta-bg-hover: #78716c;
   --cta-border-hover: #a8a29e;
-  --cta-glow: 0 0 8px rgba(87, 83, 78, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #3b82f6;
   --accent: #6d5d53;
   --accent-text: #fff;
 }
 
+/*
+FNXC:DashboardTheming 2026-06-19-15:39:
+Air must be the calmest, flattest theme: near-monochrome tokens, a restrained blue-gray accent, a clean system sans stack, and faint color-mix borders.
+The "remove unnecessary UI" requirement is intentionally CSS-only and scoped to [data-color-theme="air"] so shared DOM affordances remain present while borders, shadows, and decorative chrome flatten visually.
+
+FNXC:DashboardTheming 2026-06-22-14:24:
+Air should hide horizontal divider lines across headers, modal title bars, footers, and tab rails while preserving vertical pane dividers and component outlines. Keep this as theme CSS so the DOM and hit targets remain shared across themes.
+*/
+[data-color-theme="air"] {
+  --bg: #0f1115;
+  --surface: #151820;
+  --card: #171a22;
+  --card-hover: color-mix(in srgb, var(--card) 92%, var(--text) 8%);
+  --text: #eef1f4;
+  --text-muted: #9aa3ad;
+  --border: color-mix(in srgb, var(--text) 8%, transparent);
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --font-primary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --todo: #a5adba;
+  --in-progress: #b8c0cc;
+  --in-progress-rgb: 184, 192, 204;
+  --in-review: #c7ced8;
+  --triage: #8d96a3;
+  --done: #737d8a;
+  --color-success: #c7ced8;
+  --color-error: #d8a7a7;
+  --color-warning: #b7ad9a;
+  --color-info: #a8bfd8;
+  --cta-bg: #dbe5ef;
+  --cta-border: color-mix(in srgb, var(--cta-bg) 72%, transparent);
+  --cta-text: #111318;
+  --cta-bg-hover: #eef3f8;
+  --cta-border-hover: color-mix(in srgb, var(--cta-bg-hover) 82%, transparent);
+  --cta-glow: 0 0 0 transparent;
+  --logo-accent: var(--accent);
+  --accent: #a8bfd8;
+  --accent-text: #111318;
+}
+
+[data-color-theme="air"][data-theme="light"] {
+  --bg: #fbfbfa;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: color-mix(in srgb, var(--card) 96%, var(--text) 4%);
+  --text: #1f242b;
+  --text-muted: #69717c;
+  --border: color-mix(in srgb, var(--text) 8%, transparent);
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --font-primary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --todo: #667085;
+  --in-progress: #4f5f73;
+  --in-progress-rgb: 79, 95, 115;
+  --in-review: #5f6f83;
+  --triage: #7a7368;
+  --done: #8a929f;
+  --color-success: #526273;
+  --color-error: #b45f5f;
+  --color-warning: #8a7760;
+  --color-info: #536b86;
+  --cta-bg: #26313d;
+  --cta-border: color-mix(in srgb, var(--cta-bg) 76%, transparent);
+  --cta-text: #ffffff;
+  --cta-bg-hover: #354253;
+  --cta-border-hover: color-mix(in srgb, var(--cta-bg-hover) 84%, transparent);
+  --cta-glow: 0 0 0 transparent;
+  --logo-accent: var(--accent);
+  --accent: #536b86;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="air"] .card,
+[data-color-theme="air"] .column,
+[data-color-theme="air"] .panel,
+[data-color-theme="air"] .modal,
+[data-color-theme="air"] .task-card {
+  border-color: var(--border);
+  box-shadow: 0 0 0 transparent;
+  background-image: none;
+}
+
+[data-color-theme="air"] .btn,
+[data-color-theme="air"] .btn-icon,
+[data-color-theme="air"] .input,
+[data-color-theme="air"] input,
+[data-color-theme="air"] textarea,
+[data-color-theme="air"] select {
+  border-color: var(--border);
+  box-shadow: 0 0 0 transparent;
+}
+
+[data-color-theme="air"] .btn:hover,
+[data-color-theme="air"] .btn-icon:hover,
+[data-color-theme="air"] .card:hover,
+[data-color-theme="air"] .task-card:hover {
+  box-shadow: 0 0 0 transparent;
+}
+
+[data-color-theme="air"] .badge,
+[data-color-theme="air"] .pill,
+[data-color-theme="air"] .tag {
+  border-color: var(--border);
+  box-shadow: 0 0 0 transparent;
+}
+
+[data-color-theme="air"] .view-header,
+[data-color-theme="air"] .header,
+[data-color-theme="air"] .modal-header,
+[data-color-theme="air"] .modal-actions,
+[data-color-theme="air"] .modal-footer,
+[data-color-theme="air"] .floating-window-header,
+[data-color-theme="air"] .settings-section-heading,
+[data-color-theme="air"] .settings-section-divider,
+[data-color-theme="air"] .runtime-card__tabs,
+[data-color-theme="air"] .runtime-card__footer,
+[data-color-theme="air"] .mailbox-thread-detail-header,
+[data-color-theme="air"] .chat-sidebar-footer,
+[data-color-theme="air"] .task-detail-tabs,
+[data-color-theme="air"] .task-detail-section,
+[data-color-theme="air"] .workflow-output-modal-header,
+[data-color-theme="air"] .file-browser-modal-header,
+[data-color-theme="air"] .activity-log-header {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+/*
+FNXC:DashboardTheming 2026-06-22-14:24:
+Shadcn-family themes should read as seamless app shells: header and modal-title separators disappear, but vertical pane borders and local control outlines stay intact.
+*/
+[data-color-theme^="shadcn"] .view-header,
+[data-color-theme^="shadcn"] .header,
+[data-color-theme^="shadcn"] .modal-header,
+[data-color-theme^="shadcn"] .modal-actions,
+[data-color-theme^="shadcn"] .modal-footer,
+[data-color-theme^="shadcn"] .floating-window-header,
+[data-color-theme^="shadcn"] .settings-section-heading,
+[data-color-theme^="shadcn"] .settings-section-divider,
+[data-color-theme^="shadcn"] .workflow-output-modal-header,
+[data-color-theme^="shadcn"] .file-browser-modal-header,
+[data-color-theme^="shadcn"] .activity-log-header {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+/*
+FNXC:DashboardTheming 2026-06-23-00:07:
+All shadcn-family themes should use one UI font family across app chrome, forms, popovers, and buttons. Native controls do not reliably inherit the document font in every browser, so pin shadcn UI controls to --font-primary while preserving --font-mono for code-oriented text.
+*/
+[data-color-theme^="shadcn"],
+[data-color-theme^="shadcn"] body,
+[data-color-theme^="shadcn"] button,
+[data-color-theme^="shadcn"] input,
+[data-color-theme^="shadcn"] select,
+[data-color-theme^="shadcn"] textarea,
+[data-color-theme^="shadcn"] optgroup,
+[data-color-theme^="shadcn"] .btn,
+[data-color-theme^="shadcn"] .input,
+[data-color-theme^="shadcn"] .select,
+[data-color-theme^="shadcn"] .modal,
+[data-color-theme^="shadcn"] .card {
+  font-family: var(--font-primary);
+}
+
+[data-color-theme^="shadcn"] code,
+[data-color-theme^="shadcn"] pre,
+[data-color-theme^="shadcn"] kbd,
+[data-color-theme^="shadcn"] samp,
+[data-color-theme^="shadcn"] .font-mono {
+  font-family: var(--font-mono);
+}
+
 /* GRAPHITE - Dark graphite blacks */
 [data-color-theme="graphite"] {
   --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
@@ -346,7 +520,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #a0a0a0;
   --cta-border-hover: #b8b8b8;
-  --cta-glow: 0 0 8px rgba(184, 184, 184, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border-hover) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #7ab8ff;
   --accent: #a0a0a0;
@@ -368,7 +542,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #606060;
   --cta-border-hover: #808080;
-  --cta-glow: 0 0 8px rgba(64, 64, 64, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #2563eb;
   --accent: #606060;
@@ -391,7 +565,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #e8773a;
   --cta-border-hover: #f09050;
-  --cta-glow: 0 0 8px rgba(232, 119, 58, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: #e8773a;
   --color-info: #e8773a;
   --accent: #e8773a;
@@ -413,7 +587,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #d4622a;
   --cta-border-hover: #e07030;
-  --cta-glow: 0 0 8px rgba(192, 88, 32, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
   --logo-accent: #d4622a;
   --color-info: #c05820;
   --accent: #d4622a;
@@ -436,7 +610,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #b0b0b0;
   --cta-border-hover: #c0c0c0;
-  --cta-glow: 0 0 8px rgba(192, 192, 192, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border-hover) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #90c0ff;
   --accent: #b8b8b8;
@@ -458,7 +632,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #737373;
   --cta-border-hover: #909090;
-  --cta-glow: 0 0 8px rgba(82, 82, 82, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #2563eb;
   --accent: #707070;
@@ -572,7 +746,7 @@
   --cta-text: #000000;
   --cta-bg-hover: #00ff00;
   --cta-border-hover: #33ff33;
-  --cta-glow: 0 0 8px rgba(0, 255, 0, 0.4);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 40%, transparent);
   --logo-accent: var(--todo);
   --color-info: #00ccff;
   --accent: #00ff00;
@@ -604,7 +778,7 @@
   --cta-text: #ffffff;
   --cta-bg-hover: #009900;
   --cta-border-hover: #00cc00;
-  --cta-glow: 0 0 8px rgba(0, 153, 0, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #0055cc;
   --accent: #00cc00;
@@ -637,7 +811,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #ff6b00;
   --cta-border-hover: #ff8c00;
-  --cta-glow: 0 0 8px rgba(255, 107, 0, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #42a5f5;
   --accent: #ff6d00;
@@ -669,7 +843,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #e65100;
   --cta-border-hover: #ff6b00;
-  --cta-glow: 0 0 8px rgba(230, 81, 0, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #1565c0;
   --accent: #bf360c;
@@ -683,268 +857,2969 @@
   --card: #083c4a;
   --card-hover: #094c5e;
   --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
-  --border: #586e75;
-  --text: #839496;
-  --text-muted: #657b83;
-  --text-dim: #586e75;
+  --border: #586e75;
+  --text: #839496;
+  --text-muted: #657b83;
+  --text-dim: #586e75;
+
+  --todo: #268bd2;
+  --in-progress: #2aa198;
+  --in-progress-rgb: 42, 161, 152;
+  --in-review: #859900;
+  --triage: #b58900;
+  --done: #93a1a1;
+  --color-success: #859900;
+  --color-error: #dc322f;
+
+  --cta-bg: #719e00;
+  --cta-border: #859900;
+  --cta-text: #002b36;
+  --cta-bg-hover: #859900;
+  --cta-border-hover: #a4b800;
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
+  --logo-accent: var(--todo);
+  --color-info: #2aa198;
+  --accent: #859900;
+  --accent-text: #002b36;
+}
+
+[data-color-theme="solarized"][data-theme="light"] {
+  --bg: #fdf6e3;
+  --surface: #eee8d5;
+  --card: #f5efdc;
+  --card-hover: #e8e2d0;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #93a1a1;
+  --text: #586e75;
+  --text-muted: #657b83;
+  --text-dim: #839496;
+
+  --todo: #268bd2;
+  --in-progress: #2aa198;
+  --in-progress-rgb: 42, 161, 152;
+  --in-review: #859900;
+  --triage: #b58900;
+  --done: #93a1a1;
+  --color-success: #859900;
+  --color-error: #dc322f;
+
+  --cta-bg: #6a8800;
+  --cta-border: #719e00;
+  --cta-text: #fdf6e3;
+  --cta-bg-hover: #719e00;
+  --cta-border-hover: #859900;
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
+  --logo-accent: var(--todo);
+  --color-info: #2aa198;
+  --accent: #637b00;
+  --accent-text: #fdf6e3;
+}
+
+/* FACTORY - Industrial Mission Control Theme
+   A comprehensive design theme that overrides fonts, spacing, and
+   component styling for an industrial sci-fi aesthetic.
+*/
+[data-color-theme="factory"] {
+  --bg: #0a0a0a;
+  --surface: #111111;
+  --card: #1a1a1a;
+  --card-hover: #222222;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #333333;
+
+  --text: #e5e5e5;
+  --text-muted: #888888;
+  --text-dim: #555555;
+
+  --todo: #f59e0b;
+  --in-progress: #06b6d4;
+  --in-progress-rgb: 6, 182, 212;
+  --in-review: #22c55e;
+  --triage: #ef4444;
+  --done: #6b7280;
+
+  --color-success: #22c55e;
+  --color-error: #ef4444;
+  --color-muted: #6b7280;
+
+  --font-primary: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
+  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
+
+  --space-xs: 2px;
+  --space-sm: 4px;
+  --space-md: 8px;
+  --space-lg: 12px;
+  --space-xl: 16px;
+  --space-2xl: 24px;
+
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 2px;
+  --card-padding: 8px 10px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-sm);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 1px color-mix(in srgb, #000000 50%, transparent);
+  --shadow-md: 0 2px 4px color-mix(in srgb, #000000 50%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 60%, transparent);
+  --shadow-glow: 0 0 6px color-mix(in srgb, var(--todo) 40%, transparent);
+  --glow-success: 0 0 8px color-mix(in srgb, var(--color-success) 35%, transparent);
+  --glow-warning: 0 0 8px color-mix(in srgb, var(--todo) 40%, transparent);
+  --glow-danger: 0 0 8px color-mix(in srgb, var(--color-error) 35%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--todo) 18%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 30%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --transition-instant: 0.05s ease;
+  --transition-fast: 0.1s ease;
+  --transition-normal: 0.15s ease;
+  --transition-slow: 0.2s ease;
+
+  --cta-bg: #d97706;
+  --cta-border: #f59e0b;
+  --cta-text: #0a0a0a;
+  --cta-bg-hover: #f59e0b;
+  --cta-border-hover: #fbbf24;
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 40%, transparent);
+  --logo-accent: var(--todo);
+  --color-info: #2563eb;
+  --accent: #d97706;
+  --accent-text: #0a0a0a;
+}
+
+[data-color-theme="factory"][data-theme="light"] {
+  --bg: #f5f5f5;
+  --surface: #ffffff;
+  --card: #fafafa;
+  --card-hover: #f0f0f0;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #d4d4d4;
+
+  --text: #1a1a1a;
+  --text-muted: #666666;
+  --text-dim: #999999;
+
+  --todo: #d97706;
+  --in-progress: #0891b2;
+  --in-progress-rgb: 8, 145, 178;
+  --in-review: #16a34a;
+  --triage: #dc2626;
+  --done: #4b5563;
+
+  --color-success: #16a34a;
+  --color-error: #dc2626;
+  --color-muted: #6b7280;
+
+  --shadow-sm: 0 1px 1px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-md: 0 2px 4px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 15%, transparent);
+  --shadow-glow: 0 0 6px color-mix(in srgb, var(--todo) 30%, transparent);
+  --glow-success: 0 0 8px color-mix(in srgb, var(--color-success) 25%, transparent);
+  --glow-warning: 0 0 8px color-mix(in srgb, var(--todo) 30%, transparent);
+  --glow-danger: 0 0 8px color-mix(in srgb, var(--color-error) 22%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--todo) 14%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 24%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #b45309;
+  --cta-border: #d97706;
+  --cta-text: #fff;
+  --cta-bg-hover: #d97706;
+  --cta-border-hover: #f59e0b;
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
+  --logo-accent: var(--todo);
+  --color-info: #1d4ed8;
+  --accent: #b45309;
+  --accent-text: #fff;
+}
+
+[data-color-theme="factory"] .card.agent-active {
+  border-color: var(--todo);
+  box-shadow:
+    0 0 6px color-mix(in srgb, #f59e0b 50%, transparent),
+    0 0 12px color-mix(in srgb, #f59e0b 20%, transparent);
+  animation: agent-glow-factory 2s ease-in-out infinite;
+}
+
+@keyframes agent-glow-factory {
+  0%,
+  100% {
+    box-shadow:
+      0 0 6px color-mix(in srgb, #f59e0b 50%, transparent),
+      0 0 12px color-mix(in srgb, #f59e0b 20%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 0 10px color-mix(in srgb, #f59e0b 70%, transparent),
+      0 0 20px color-mix(in srgb, #f59e0b 40%, transparent);
+  }
+}
+
+[data-color-theme="factory"][data-theme="light"] .card.agent-active {
+  box-shadow:
+    0 0 6px color-mix(in srgb, #d97706 40%, transparent),
+    0 0 12px color-mix(in srgb, #d97706 15%, transparent);
+  animation: agent-glow-factory-light 2s ease-in-out infinite;
+}
+
+@keyframes agent-glow-factory-light {
+  0%,
+  100% {
+    box-shadow:
+      0 0 6px color-mix(in srgb, #d97706 40%, transparent),
+      0 0 12px color-mix(in srgb, #d97706 15%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 0 10px color-mix(in srgb, #d97706 60%, transparent),
+      0 0 20px color-mix(in srgb, #d97706 30%, transparent);
+  }
+}
+
+[data-color-theme="factory"] .btn {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+[data-color-theme="factory"] .btn-primary,
+[data-color-theme="factory"] .btn-task-create {
+  background: transparent;
+  border-color: var(--todo);
+  color: var(--todo);
+  box-shadow: none;
+}
+
+[data-color-theme="factory"] .btn-primary:hover,
+[data-color-theme="factory"] .btn-task-create:hover {
+  background: var(--todo);
+  color: var(--bg);
+  box-shadow: var(--shadow-glow);
+}
+
+[data-color-theme="factory"] .card,
+[data-color-theme="factory"] .column {
+  border-width: 2px;
+}
+
+[data-color-theme="factory"] .column-header h2 {
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 0.75rem;
+}
+
+[data-color-theme="factory"] .column-count,
+[data-color-theme="factory"] .card-id {
+  font-family: var(--font-mono);
+  font-weight: 700;
+}
+
+/*
+FNXC:Theming 2026-06-19-00:00:
+Factory Mono is a monochrome Factory variant for FN-6724: keep the industrial monospace density, uppercase controls, and 2px border system while limiting color to red accents and removing pulsing glow effects.
+*/
+[data-color-theme="factory-mono"] {
+  --bg: #0a0a0a;
+  --surface: #111111;
+  --card: #1a1a1a;
+  --card-hover: #222222;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #333333;
+
+  --text: #f5f5f5;
+  --text-muted: #a3a3a3;
+  --text-dim: #737373;
+
+  --todo: #d4d4d4;
+  --in-progress: #a3a3a3;
+  --in-progress-rgb: 163, 163, 163;
+  --in-review: #e5e5e5;
+  --triage: #737373;
+  --done: #525252;
+
+  --color-success: #e5e5e5;
+  --color-warning: #d4d4d4;
+  --color-error: #ef4444;
+  --color-muted: #737373;
+
+  --font-primary: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
+  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
+
+  --space-xs: 2px;
+  --space-sm: 4px;
+  --space-md: 8px;
+  --space-lg: 12px;
+  --space-xl: 16px;
+  --space-2xl: 24px;
+
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 2px;
+  --card-padding: 8px 10px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-sm);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: none;
+  --shadow-md: 0 1px 0 color-mix(in srgb, #000000 60%, transparent);
+  --shadow-lg: 0 1px 0 color-mix(in srgb, #000000 70%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 30%, transparent);
+  --focus-ring-strong: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --transition-instant: 0.05s ease;
+  --transition-fast: 0.1s ease;
+  --transition-normal: 0.15s ease;
+  --transition-slow: 0.2s ease;
+
+  --cta-bg: transparent;
+  --cta-border: #ef4444;
+  --cta-text: #ef4444;
+  --cta-bg-hover: #ef4444;
+  --cta-border-hover: #f87171;
+  --cta-glow: none;
+  --logo-accent: #ef4444;
+  --color-info: #d4d4d4;
+  --accent: #ef4444;
+  --accent-text: #0a0a0a;
+}
+
+[data-color-theme="factory-mono"][data-theme="light"] {
+  --bg: #f5f5f5;
+  --surface: #ffffff;
+  --card: #fafafa;
+  --card-hover: #f0f0f0;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #d4d4d4;
+
+  --text: #1a1a1a;
+  --text-muted: #525252;
+  --text-dim: #737373;
+
+  --todo: #525252;
+  --in-progress: #737373;
+  --in-progress-rgb: 115, 115, 115;
+  --in-review: #404040;
+  --triage: #a3a3a3;
+  --done: #8a8a8a;
+
+  --color-success: #404040;
+  --color-warning: #525252;
+  --color-error: #dc2626;
+  --color-muted: #737373;
+
+  --shadow-sm: none;
+  --shadow-md: 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-lg: 0 1px 0 color-mix(in srgb, var(--text) 18%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 25%, transparent);
+  --focus-ring-strong: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 38%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: transparent;
+  --cta-border: #dc2626;
+  --cta-text: #dc2626;
+  --cta-bg-hover: #dc2626;
+  --cta-border-hover: #ef4444;
+  --cta-glow: none;
+  --logo-accent: #dc2626;
+  --color-info: #525252;
+  --accent: #dc2626;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="factory-mono"] .card.agent-active {
+  border-color: var(--accent);
+  box-shadow: none;
+  animation: none;
+}
+
+[data-color-theme="factory-mono"][data-theme="light"] .card.agent-active {
+  border-color: var(--accent);
+  box-shadow: none;
+  animation: none;
+}
+
+[data-color-theme="factory-mono"] .btn {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+[data-color-theme="factory-mono"] .btn-primary,
+[data-color-theme="factory-mono"] .btn-task-create {
+  background: transparent;
+  border-color: var(--accent);
+  color: var(--accent);
+  box-shadow: none;
+}
+
+[data-color-theme="factory-mono"] .btn-primary:hover,
+[data-color-theme="factory-mono"] .btn-task-create:hover {
+  background: var(--accent);
+  color: var(--accent-text);
+  box-shadow: none;
+}
+
+[data-color-theme="factory-mono"] .card,
+[data-color-theme="factory-mono"] .column {
+  border-width: var(--btn-border-width);
+}
+
+[data-color-theme="factory-mono"] .column-header h2 {
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 0.75rem;
+}
+
+[data-color-theme="factory-mono"] .column-count,
+[data-color-theme="factory-mono"] .card-id {
+  font-family: var(--font-mono);
+  font-weight: 700;
+}
+
+/*
+FNXC:Theming 2026-06-19-15:35:
+The shadcn theme for FN-6747 approximates the shadcn/ui new-york zinc aesthetic with sans-serif typography, tokenized comfortable spacing, 1px borders, subtle flat shadows, neutralized glow tokens, and a solid primary button instead of Factory-style outlined uppercase controls.
+
+FNXC:Theming 2026-06-20-00:00:
+FN-6758 makes the default shadcn highlight/accent orange for focus rings, active borders, links, and selection affordances while preserving the zinc-neutral surfaces, neutralized glows, and solid neutral primary button.
+*/
+[data-color-theme="shadcn"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #71717a;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --transition-instant: 0.05s ease;
+  --transition-fast: 0.1s ease;
+  --transition-normal: 0.15s ease;
+  --transition-slow: 0.2s ease;
+
+  --cta-bg: #fafafa;
+  --cta-border: #fafafa;
+  --cta-text: #18181b;
+  --cta-bg-hover: #e4e4e7;
+  --cta-border-hover: #e4e4e7;
+  --cta-glow: none;
+  --logo-accent: var(--text);
+  --color-info: #38bdf8;
+  --accent: #f97316;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
+  --in-review: #16a34a;
+  --triage: #d97706;
+  --done: #a1a1aa;
+
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #18181b;
+  --cta-border: #18181b;
+  --cta-text: #fafafa;
+  --cta-bg-hover: #27272a;
+  --cta-border-hover: #27272a;
+  --cta-glow: none;
+  --logo-accent: var(--text);
+  --color-info: #0284c7;
+  --accent: #ea580c;
+  --accent-text: #ffffff;
+}
+
+/*
+FNXC:Theming 2026-06-20-18:30:
+FN-6816 keeps shadcn-custom visually identical to the base shadcn theme until sanitized user token overrides are applied inline by the dashboard theme hook.
+*/
+[data-color-theme="shadcn-custom"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #71717a;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --transition-instant: 0.05s ease;
+  --transition-fast: 0.1s ease;
+  --transition-normal: 0.15s ease;
+  --transition-slow: 0.2s ease;
+
+  --cta-bg: #fafafa;
+  --cta-border: #fafafa;
+  --cta-text: #18181b;
+  --cta-bg-hover: #e4e4e7;
+  --cta-border-hover: #e4e4e7;
+  --cta-glow: none;
+  --logo-accent: var(--text);
+  --color-info: #38bdf8;
+  --accent: #f97316;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-custom"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
+  --in-review: #16a34a;
+  --triage: #d97706;
+  --done: #a1a1aa;
+
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #18181b;
+  --cta-border: #18181b;
+  --cta-text: #fafafa;
+  --cta-bg-hover: #27272a;
+  --cta-border-hover: #27272a;
+  --cta-glow: none;
+  --logo-accent: var(--text);
+  --color-info: #0284c7;
+  --accent: #ea580c;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn"] .card.agent-active,
+[data-color-theme="shadcn-custom"] .card.agent-active {
+  border-color: var(--accent);
+  box-shadow: none;
+  animation: none;
+}
+
+[data-color-theme="shadcn"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-custom"][data-theme="light"] .card.agent-active {
+  border-color: var(--accent);
+  box-shadow: none;
+  animation: none;
+}
+
+[data-color-theme="shadcn"] .btn,
+[data-color-theme="shadcn-custom"] .btn {
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 500;
+}
+
+[data-color-theme="shadcn"] .btn-primary,
+[data-color-theme="shadcn"] .btn-task-create,
+[data-color-theme="shadcn-custom"] .btn-primary,
+[data-color-theme="shadcn-custom"] .btn-task-create {
+  background: var(--cta-bg);
+  border-color: var(--cta-border);
+  color: var(--cta-text);
+  box-shadow: none;
+}
+
+[data-color-theme="shadcn"] .btn-primary:hover,
+[data-color-theme="shadcn"] .btn-task-create:hover,
+[data-color-theme="shadcn-custom"] .btn-primary:hover,
+[data-color-theme="shadcn-custom"] .btn-task-create:hover {
+  background: var(--cta-bg-hover);
+  border-color: var(--cta-border-hover);
+  color: var(--cta-text);
+  box-shadow: none;
+}
+
+[data-color-theme="shadcn"] .card,
+[data-color-theme="shadcn"] .column,
+[data-color-theme="shadcn-custom"] .card,
+[data-color-theme="shadcn-custom"] .column {
+  border-width: var(--btn-border-width);
+}
+
+/*
+FNXC:Theming 2026-06-19-16:12:
+FN-6756 adds shadcn color-family themes as exact zinc-neutral shadcn variants with only primary/accent/CTA/info tokens changed for the named color. Shadcn Mono keeps red as the single accent while desaturating workflow statuses toward zinc gray, and Shadcn Black removes chroma from all status tokens for a pure black-and-white option.
+*/
+[data-color-theme="shadcn-blue"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #71717a;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #3b82f6;
+  --cta-border: #3b82f6;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #2563eb;
+  --cta-border-hover: #2563eb;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #3b82f6;
+  --accent: #3b82f6;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-blue"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
+  --in-review: #16a34a;
+  --triage: #d97706;
+  --done: #a1a1aa;
+
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #2563eb;
+  --cta-border: #2563eb;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #1d4ed8;
+  --cta-border-hover: #1d4ed8;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #2563eb;
+  --accent: #2563eb;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-green"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #71717a;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #22c55e;
+  --cta-border: #22c55e;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #16a34a;
+  --cta-border-hover: #16a34a;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #22c55e;
+  --accent: #22c55e;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-green"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
+  --in-review: #16a34a;
+  --triage: #d97706;
+  --done: #a1a1aa;
+
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #16a34a;
+  --cta-border: #16a34a;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #15803d;
+  --cta-border-hover: #15803d;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #16a34a;
+  --accent: #16a34a;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-red"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #71717a;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #ef4444;
+  --cta-border: #ef4444;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #dc2626;
+  --cta-border-hover: #dc2626;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #ef4444;
+  --accent: #ef4444;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-red"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
+  --in-review: #16a34a;
+  --triage: #d97706;
+  --done: #a1a1aa;
+
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #dc2626;
+  --cta-border: #dc2626;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #b91c1c;
+  --cta-border-hover: #b91c1c;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #dc2626;
+  --accent: #dc2626;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-purple"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #71717a;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #8b5cf6;
+  --cta-border: #8b5cf6;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #7c3aed;
+  --cta-border-hover: #7c3aed;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #8b5cf6;
+  --accent: #8b5cf6;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-purple"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
+  --in-review: #16a34a;
+  --triage: #d97706;
+  --done: #a1a1aa;
+
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #7c3aed;
+  --cta-border: #7c3aed;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #6d28d9;
+  --cta-border-hover: #6d28d9;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #7c3aed;
+  --accent: #7c3aed;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-pink"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #71717a;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #ec4899;
+  --cta-border: #ec4899;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #db2777;
+  --cta-border-hover: #db2777;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #ec4899;
+  --accent: #ec4899;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-pink"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
+  --in-review: #16a34a;
+  --triage: #d97706;
+  --done: #a1a1aa;
+
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #db2777;
+  --cta-border: #db2777;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #be185d;
+  --cta-border-hover: #be185d;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #db2777;
+  --accent: #db2777;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-orange"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #71717a;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #f97316;
+  --cta-border: #f97316;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #ea580c;
+  --cta-border-hover: #ea580c;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #f97316;
+  --accent: #f97316;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-orange"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
+  --in-review: #16a34a;
+  --triage: #d97706;
+  --done: #a1a1aa;
+
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #ea580c;
+  --cta-border: #ea580c;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #c2410c;
+  --cta-border-hover: #c2410c;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #ea580c;
+  --accent: #ea580c;
+  --accent-text: #ffffff;
+}
+
+[data-color-theme="shadcn-yellow"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #71717a;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #eab308;
+  --cta-border: #eab308;
+  --cta-text: #18181b;
+  --cta-bg-hover: #ca8a04;
+  --cta-border-hover: #ca8a04;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #eab308;
+  --accent: #eab308;
+  --accent-text: #18181b;
+}
+
+[data-color-theme="shadcn-yellow"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
+  --in-review: #16a34a;
+  --triage: #d97706;
+  --done: #a1a1aa;
+
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #ca8a04;
+  --cta-border: #ca8a04;
+  --cta-text: #18181b;
+  --cta-bg-hover: #a16207;
+  --cta-border-hover: #a16207;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #ca8a04;
+  --accent: #ca8a04;
+  --accent-text: #18181b;
+}
+
+/*
+FNXC:DashboardTheming 2026-06-20-00:00:
+FN-6813 makes the shadcn mono theme a color family: shadcn-mono-red preserves the renamed legacy red accent while the other mono variants reuse the same zinc-neutral tokens and swap only accent/CTA values. Legacy stored shadcn-mono selections remap in bootstrap/theme hooks so users keep the red mono theme instead of falling back to default.
+*/
+[data-color-theme="shadcn-mono-red"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #a1a1aa;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #71717a;
+  --triage: #a1a1aa;
+  --done: #52525b;
+
+  --color-success: #71717a;
+  --color-warning: #a1a1aa;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #ef4444;
+  --cta-border: #ef4444;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #dc2626;
+  --cta-border-hover: #dc2626;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #a1a1aa;
+  --accent: #ef4444;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-red"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #71717a;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #52525b;
+  --triage: #71717a;
+  --done: #a1a1aa;
+
+  --color-success: #71717a;
+  --color-warning: #71717a;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #dc2626;
+  --cta-border: #dc2626;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #b91c1c;
+  --cta-border-hover: #b91c1c;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #71717a;
+  --accent: #dc2626;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-blue"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #a1a1aa;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #71717a;
+  --triage: #a1a1aa;
+  --done: #52525b;
+
+  --color-success: #71717a;
+  --color-warning: #a1a1aa;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #3b82f6;
+  --cta-border: #3b82f6;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #2563eb;
+  --cta-border-hover: #2563eb;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #a1a1aa;
+  --accent: #3b82f6;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-blue"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #71717a;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #52525b;
+  --triage: #71717a;
+  --done: #a1a1aa;
+
+  --color-success: #71717a;
+  --color-warning: #71717a;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #2563eb;
+  --cta-border: #2563eb;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #1d4ed8;
+  --cta-border-hover: #1d4ed8;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #71717a;
+  --accent: #2563eb;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-green"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #a1a1aa;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #71717a;
+  --triage: #a1a1aa;
+  --done: #52525b;
+
+  --color-success: #71717a;
+  --color-warning: #a1a1aa;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #22c55e;
+  --cta-border: #22c55e;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #16a34a;
+  --cta-border-hover: #16a34a;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #a1a1aa;
+  --accent: #22c55e;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-green"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #71717a;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #52525b;
+  --triage: #71717a;
+  --done: #a1a1aa;
+
+  --color-success: #71717a;
+  --color-warning: #71717a;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #16a34a;
+  --cta-border: #16a34a;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #15803d;
+  --cta-border-hover: #15803d;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #71717a;
+  --accent: #16a34a;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-purple"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #a1a1aa;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #71717a;
+  --triage: #a1a1aa;
+  --done: #52525b;
+
+  --color-success: #71717a;
+  --color-warning: #a1a1aa;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #8b5cf6;
+  --cta-border: #8b5cf6;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #7c3aed;
+  --cta-border-hover: #7c3aed;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #a1a1aa;
+  --accent: #8b5cf6;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-purple"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #71717a;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #52525b;
+  --triage: #71717a;
+  --done: #a1a1aa;
+
+  --color-success: #71717a;
+  --color-warning: #71717a;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #7c3aed;
+  --cta-border: #7c3aed;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #6d28d9;
+  --cta-border-hover: #6d28d9;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #71717a;
+  --accent: #7c3aed;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-pink"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #a1a1aa;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #71717a;
+  --triage: #a1a1aa;
+  --done: #52525b;
+
+  --color-success: #71717a;
+  --color-warning: #a1a1aa;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #ec4899;
+  --cta-border: #ec4899;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #db2777;
+  --cta-border-hover: #db2777;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #a1a1aa;
+  --accent: #ec4899;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-pink"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #71717a;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #52525b;
+  --triage: #71717a;
+  --done: #a1a1aa;
+
+  --color-success: #71717a;
+  --color-warning: #71717a;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #db2777;
+  --cta-border: #db2777;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #be185d;
+  --cta-border-hover: #be185d;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #71717a;
+  --accent: #db2777;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-orange"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #a1a1aa;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #71717a;
+  --triage: #a1a1aa;
+  --done: #52525b;
+
+  --color-success: #71717a;
+  --color-warning: #a1a1aa;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #f97316;
+  --cta-border: #f97316;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #ea580c;
+  --cta-border-hover: #ea580c;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #a1a1aa;
+  --accent: #f97316;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-orange"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #71717a;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #52525b;
+  --triage: #71717a;
+  --done: #a1a1aa;
+
+  --color-success: #71717a;
+  --color-warning: #71717a;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #ea580c;
+  --cta-border: #ea580c;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #c2410c;
+  --cta-border-hover: #c2410c;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #71717a;
+  --accent: #ea580c;
+  --accent-text: #ffffff;
+}
+
+
+[data-color-theme="shadcn-mono-yellow"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #a1a1aa;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #71717a;
+  --triage: #a1a1aa;
+  --done: #52525b;
+
+  --color-success: #71717a;
+  --color-warning: #a1a1aa;
+  --color-error: #ef4444;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #eab308;
+  --cta-border: #eab308;
+  --cta-text: #18181b;
+  --cta-bg-hover: #ca8a04;
+  --cta-border-hover: #ca8a04;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #a1a1aa;
+  --accent: #eab308;
+  --accent-text: #18181b;
+}
+
+
+[data-color-theme="shadcn-mono-yellow"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #71717a;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #52525b;
+  --triage: #71717a;
+  --done: #a1a1aa;
+
+  --color-success: #71717a;
+  --color-warning: #71717a;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #ca8a04;
+  --cta-border: #ca8a04;
+  --cta-text: #18181b;
+  --cta-bg-hover: #a16207;
+  --cta-border-hover: #a16207;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #71717a;
+  --accent: #ca8a04;
+  --accent-text: #18181b;
+}
+
+
+[data-color-theme="shadcn-black"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
+
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
+
+  --todo: #d4d4d8;
+  --in-progress: #a1a1aa;
+  --in-progress-rgb: 161, 161, 170;
+  --in-review: #a1a1aa;
+  --triage: #71717a;
+  --done: #52525b;
+
+  --color-success: #a1a1aa;
+  --color-warning: #71717a;
+  --color-error: #d4d4d8;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #fafafa;
+  --cta-border: #fafafa;
+  --cta-text: #18181b;
+  --cta-bg-hover: #e4e4e7;
+  --cta-border-hover: #e4e4e7;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #fafafa;
+  --accent: #fafafa;
+  --accent-text: #18181b;
+}
+
+[data-color-theme="shadcn-black"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #18181b;
+  --in-progress: #3f3f46;
+  --in-progress-rgb: 63, 63, 70;
+  --in-review: #52525b;
+  --triage: #71717a;
+  --done: #a1a1aa;
+
+  --color-success: #3f3f46;
+  --color-warning: #71717a;
+  --color-error: #18181b;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #09090b;
+  --cta-border: #09090b;
+  --cta-text: #fafafa;
+  --cta-bg-hover: #27272a;
+  --cta-border-hover: #27272a;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #09090b;
+  --accent: #09090b;
+  --accent-text: #fafafa;
+}
+
+/*
+FNXC:DashboardTheming 2026-06-20-00:00:
+Shadcn Gray is the fully-neutral zinc variant: it keeps the shadcn surfaces and button treatment while using only zinc/gray accent, CTA, and info tokens instead of red, blue, or other chroma.
+*/
+[data-color-theme="shadcn-gray"] {
+  --bg: #09090b;
+  --surface: #0c0c0e;
+  --card: #18181b;
+  --card-hover: #1f1f23;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #27272a;
 
-  --todo: #268bd2;
-  --in-progress: #2aa198;
-  --in-progress-rgb: 42, 161, 152;
-  --in-review: #859900;
-  --triage: #b58900;
-  --done: #93a1a1;
-  --color-success: #859900;
-  --color-error: #dc322f;
+  --text: #fafafa;
+  --text-muted: #a1a1aa;
+  --text-dim: #52525b;
 
-  --cta-bg: #719e00;
-  --cta-border: #859900;
-  --cta-text: #002b36;
-  --cta-bg-hover: #859900;
-  --cta-border-hover: #a4b800;
-  --cta-glow: 0 0 8px rgba(133, 153, 0, 0.3);
-  --logo-accent: var(--todo);
-  --color-info: #2aa198;
-  --accent: #859900;
-  --accent-text: #002b36;
+  --todo: #a1a1aa;
+  --in-progress: #71717a;
+  --in-progress-rgb: 113, 113, 122;
+  --in-review: #71717a;
+  --triage: #a1a1aa;
+  --done: #52525b;
+
+  --color-success: #71717a;
+  --color-warning: #a1a1aa;
+  --color-error: #d4d4d8;
+  --color-muted: #71717a;
+
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius: var(--radius-md);
+
+  --btn-padding: 6px 12px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
+  --modal-padding: var(--space-md) var(--space-lg);
+  --header-padding: var(--space-sm) var(--space-lg);
+  --column-gap: var(--space-md);
+  --board-padding: var(--space-md) var(--space-lg);
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
+  --shadow: var(--shadow-lg);
+
+  --cta-bg: #71717a;
+  --cta-border: #71717a;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #52525b;
+  --cta-border-hover: #52525b;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #a1a1aa;
+  --accent: #a1a1aa;
+  --accent-text: #18181b;
 }
 
-[data-color-theme="solarized"][data-theme="light"] {
-  --bg: #fdf6e3;
-  --surface: #eee8d5;
-  --card: #f5efdc;
-  --card-hover: #e8e2d0;
+[data-color-theme="shadcn-gray"][data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-hover: #f4f4f5;
   --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
-  --border: #93a1a1;
-  --text: #586e75;
-  --text-muted: #657b83;
-  --text-dim: #839496;
-
-  --todo: #268bd2;
-  --in-progress: #2aa198;
-  --in-progress-rgb: 42, 161, 152;
-  --in-review: #859900;
-  --triage: #b58900;
-  --done: #93a1a1;
-  --color-success: #859900;
-  --color-error: #dc322f;
+  --border: #e4e4e7;
+
+  --text: #09090b;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+
+  --todo: #71717a;
+  --in-progress: #52525b;
+  --in-progress-rgb: 82, 82, 91;
+  --in-review: #52525b;
+  --triage: #71717a;
+  --done: #a1a1aa;
+
+  --color-success: #52525b;
+  --color-warning: #71717a;
+  --color-error: #3f3f46;
+  --color-muted: #71717a;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
+  --shadow: var(--shadow-lg);
 
-  --cta-bg: #6a8800;
-  --cta-border: #719e00;
-  --cta-text: #fdf6e3;
-  --cta-bg-hover: #719e00;
-  --cta-border-hover: #859900;
-  --cta-glow: 0 0 8px rgba(133, 153, 0, 0.3);
-  --logo-accent: var(--todo);
-  --color-info: #2aa198;
-  --accent: #637b00;
-  --accent-text: #fdf6e3;
+  --cta-bg: #52525b;
+  --cta-border: #52525b;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #3f3f46;
+  --cta-border-hover: #3f3f46;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #52525b;
+  --accent: #52525b;
+  --accent-text: #ffffff;
 }
 
-/* FACTORY - Industrial Mission Control Theme
-   A comprehensive design theme that overrides fonts, spacing, and
-   component styling for an industrial sci-fi aesthetic.
+/*
+FNXC:Theming 2026-06-21-00:00:
+FN-6815 adds Shadcn Gray Blue as the slate-neutral shadcn variant: the whole surface ramp moves from zinc to blue-gray slate while CTA/accent tokens use muted slate-blue and the shadcn flat-shadow/no-glow treatment stays intact.
 */
-[data-color-theme="factory"] {
-  --bg: #0a0a0a;
-  --surface: #111111;
-  --card: #1a1a1a;
-  --card-hover: #222222;
+[data-color-theme="shadcn-gray-blue"] {
+  --bg: #020617;
+  --surface: #0b1220;
+  --card: #0f172a;
+  --card-hover: #1e293b;
   --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
-  --border: #333333;
+  --border: #1e293b;
 
-  --text: #e5e5e5;
-  --text-muted: #888888;
-  --text-dim: #555555;
+  --text: #f8fafc;
+  --text-muted: #94a3b8;
+  --text-dim: #475569;
 
-  --todo: #f59e0b;
-  --in-progress: #06b6d4;
-  --in-progress-rgb: 6, 182, 212;
-  --in-review: #22c55e;
-  --triage: #ef4444;
-  --done: #6b7280;
+  --todo: #60a5fa;
+  --in-progress: #38bdf8;
+  --in-progress-rgb: 56, 189, 248;
+  --in-review: #34d399;
+  --triage: #f59e0b;
+  --done: #64748b;
 
   --color-success: #22c55e;
+  --color-warning: #f59e0b;
   --color-error: #ef4444;
-  --color-muted: #6b7280;
+  --color-muted: #64748b;
 
-  --font-primary: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
-  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
+  --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
 
-  --space-xs: 2px;
-  --space-sm: 4px;
-  --space-md: 8px;
-  --space-lg: 12px;
-  --space-xl: 16px;
-  --space-2xl: 24px;
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 10px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 28px;
 
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 6px;
-  --radius-xl: 8px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
   --radius: var(--radius-md);
 
   --btn-padding: 6px 12px;
-  --btn-border-width: 2px;
-  --card-padding: 8px 10px;
+  --btn-border-width: 1px;
+  --card-padding: 10px 12px;
   --modal-padding: var(--space-md) var(--space-lg);
   --header-padding: var(--space-sm) var(--space-lg);
-  --column-gap: var(--space-sm);
+  --column-gap: var(--space-md);
   --board-padding: var(--space-md) var(--space-lg);
 
-  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.5);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5);
-  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
-  --shadow-glow: 0 0 6px rgba(245, 158, 11, 0.4);
-  --glow-success: 0 0 8px rgba(34, 197, 94, 0.35);
-  --glow-warning: 0 0 8px rgba(245, 158, 11, 0.4);
-  --glow-danger: 0 0 8px rgba(239, 68, 68, 0.35);
-  --focus-ring: 0 0 0 2px rgba(245, 158, 11, 0.18);
-  --focus-ring-strong: 0 0 0 2px rgba(245, 158, 11, 0.3);
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent);
   --shadow: var(--shadow-lg);
 
-  --transition-instant: 0.05s ease;
-  --transition-fast: 0.1s ease;
-  --transition-normal: 0.15s ease;
-  --transition-slow: 0.2s ease;
-
-  --cta-bg: #d97706;
-  --cta-border: #f59e0b;
-  --cta-text: #0a0a0a;
-  --cta-bg-hover: #f59e0b;
-  --cta-border-hover: #fbbf24;
-  --cta-glow: 0 0 8px rgba(245, 158, 11, 0.4);
-  --logo-accent: var(--todo);
-  --color-info: #2563eb;
-  --accent: #d97706;
-  --accent-text: #0a0a0a;
+  --cta-bg: #64748b;
+  --cta-border: #64748b;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #475569;
+  --cta-border-hover: #475569;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #64748b;
+  --accent: #64748b;
+  --accent-text: #ffffff;
 }
 
-[data-color-theme="factory"][data-theme="light"] {
-  --bg: #f5f5f5;
+[data-color-theme="shadcn-gray-blue"][data-theme="light"] {
+  --bg: #ffffff;
   --surface: #ffffff;
-  --card: #fafafa;
-  --card-hover: #f0f0f0;
+  --card: #ffffff;
+  --card-hover: #f1f5f9;
   --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
-  --border: #d4d4d4;
+  --border: #e2e8f0;
 
-  --text: #1a1a1a;
-  --text-muted: #666666;
-  --text-dim: #999999;
+  --text: #0f172a;
+  --text-muted: #64748b;
+  --text-dim: #94a3b8;
 
-  --todo: #d97706;
-  --in-progress: #0891b2;
-  --in-progress-rgb: 8, 145, 178;
+  --todo: #2563eb;
+  --in-progress: #0284c7;
+  --in-progress-rgb: 2, 132, 199;
   --in-review: #16a34a;
-  --triage: #dc2626;
-  --done: #4b5563;
+  --triage: #d97706;
+  --done: #94a3b8;
 
   --color-success: #16a34a;
+  --color-warning: #d97706;
   --color-error: #dc2626;
-  --color-muted: #6b7280;
+  --color-muted: #64748b;
 
-  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --shadow-glow: 0 0 6px rgba(217, 119, 6, 0.3);
-  --glow-success: 0 0 8px rgba(22, 163, 74, 0.25);
-  --glow-warning: 0 0 8px rgba(217, 119, 6, 0.3);
-  --glow-danger: 0 0 8px rgba(220, 38, 38, 0.22);
-  --focus-ring: 0 0 0 2px rgba(217, 119, 6, 0.14);
-  --focus-ring-strong: 0 0 0 2px rgba(217, 119, 6, 0.24);
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
+  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent);
   --shadow: var(--shadow-lg);
 
-  --cta-bg: #b45309;
-  --cta-border: #d97706;
-  --cta-text: #fff;
-  --cta-bg-hover: #d97706;
-  --cta-border-hover: #f59e0b;
-  --cta-glow: 0 0 8px rgba(217, 119, 6, 0.3);
-  --logo-accent: var(--todo);
-  --color-info: #1d4ed8;
-  --accent: #b45309;
-  --accent-text: #fff;
-}
-
-[data-color-theme="factory"] .card.agent-active {
-  border-color: var(--todo);
-  box-shadow:
-    0 0 6px rgba(245, 158, 11, 0.5),
-    0 0 12px rgba(245, 158, 11, 0.2);
-  animation: agent-glow-factory 2s ease-in-out infinite;
-}
-
-@keyframes agent-glow-factory {
-  0%,
-  100% {
-    box-shadow:
-      0 0 6px rgba(245, 158, 11, 0.5),
-      0 0 12px rgba(245, 158, 11, 0.2);
-  }
-  50% {
-    box-shadow:
-      0 0 10px rgba(245, 158, 11, 0.7),
-      0 0 20px rgba(245, 158, 11, 0.4);
-  }
-}
-
-[data-color-theme="factory"][data-theme="light"] .card.agent-active {
-  box-shadow:
-    0 0 6px rgba(217, 119, 6, 0.4),
-    0 0 12px rgba(217, 119, 6, 0.15);
-  animation: agent-glow-factory-light 2s ease-in-out infinite;
-}
-
-@keyframes agent-glow-factory-light {
-  0%,
-  100% {
-    box-shadow:
-      0 0 6px rgba(217, 119, 6, 0.4),
-      0 0 12px rgba(217, 119, 6, 0.15);
-  }
-  50% {
-    box-shadow:
-      0 0 10px rgba(217, 119, 6, 0.6),
-      0 0 20px rgba(217, 119, 6, 0.3);
-  }
-}
-
-[data-color-theme="factory"] .btn {
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 600;
+  --cta-bg: #475569;
+  --cta-border: #475569;
+  --cta-text: #ffffff;
+  --cta-bg-hover: #334155;
+  --cta-border-hover: #334155;
+  --cta-glow: none;
+  --logo-accent: var(--accent);
+  --color-info: #475569;
+  --accent: #475569;
+  --accent-text: #ffffff;
 }
 
-[data-color-theme="factory"] .btn-primary,
-[data-color-theme="factory"] .btn-task-create {
-  background: transparent;
-  border-color: var(--todo);
-  color: var(--todo);
+[data-color-theme="shadcn-blue"] .card.agent-active,
+[data-color-theme="shadcn-green"] .card.agent-active,
+[data-color-theme="shadcn-red"] .card.agent-active,
+[data-color-theme="shadcn-purple"] .card.agent-active,
+[data-color-theme="shadcn-pink"] .card.agent-active,
+[data-color-theme="shadcn-orange"] .card.agent-active,
+[data-color-theme="shadcn-yellow"] .card.agent-active,
+[data-color-theme="shadcn-mono-red"] .card.agent-active,
+[data-color-theme="shadcn-mono-blue"] .card.agent-active,
+[data-color-theme="shadcn-mono-green"] .card.agent-active,
+[data-color-theme="shadcn-mono-purple"] .card.agent-active,
+[data-color-theme="shadcn-mono-pink"] .card.agent-active,
+[data-color-theme="shadcn-mono-orange"] .card.agent-active,
+[data-color-theme="shadcn-mono-yellow"] .card.agent-active,
+[data-color-theme="shadcn-black"] .card.agent-active,
+[data-color-theme="shadcn-gray"] .card.agent-active,
+[data-color-theme="shadcn-gray-blue"] .card.agent-active {
+  border-color: var(--accent);
+  box-shadow: none;
+  animation: none;
+}
+
+[data-color-theme="shadcn-blue"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-green"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-red"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-purple"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-pink"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-orange"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-yellow"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-mono-red"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-mono-blue"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-mono-green"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-mono-purple"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-mono-pink"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-mono-orange"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-mono-yellow"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-black"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-gray"][data-theme="light"] .card.agent-active,
+[data-color-theme="shadcn-gray-blue"][data-theme="light"] .card.agent-active {
+  border-color: var(--accent);
+  box-shadow: none;
+  animation: none;
+}
+
+[data-color-theme="shadcn-blue"] .btn,
+[data-color-theme="shadcn-green"] .btn,
+[data-color-theme="shadcn-red"] .btn,
+[data-color-theme="shadcn-purple"] .btn,
+[data-color-theme="shadcn-pink"] .btn,
+[data-color-theme="shadcn-orange"] .btn,
+[data-color-theme="shadcn-yellow"] .btn,
+[data-color-theme="shadcn-mono-red"] .btn,
+[data-color-theme="shadcn-mono-blue"] .btn,
+[data-color-theme="shadcn-mono-green"] .btn,
+[data-color-theme="shadcn-mono-purple"] .btn,
+[data-color-theme="shadcn-mono-pink"] .btn,
+[data-color-theme="shadcn-mono-orange"] .btn,
+[data-color-theme="shadcn-mono-yellow"] .btn,
+[data-color-theme="shadcn-black"] .btn,
+[data-color-theme="shadcn-gray"] .btn,
+[data-color-theme="shadcn-gray-blue"] .btn {
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 500;
+}
+
+[data-color-theme="shadcn-blue"] .btn-primary,
+[data-color-theme="shadcn-blue"] .btn-task-create,
+[data-color-theme="shadcn-green"] .btn-primary,
+[data-color-theme="shadcn-green"] .btn-task-create,
+[data-color-theme="shadcn-red"] .btn-primary,
+[data-color-theme="shadcn-red"] .btn-task-create,
+[data-color-theme="shadcn-purple"] .btn-primary,
+[data-color-theme="shadcn-purple"] .btn-task-create,
+[data-color-theme="shadcn-pink"] .btn-primary,
+[data-color-theme="shadcn-pink"] .btn-task-create,
+[data-color-theme="shadcn-orange"] .btn-primary,
+[data-color-theme="shadcn-orange"] .btn-task-create,
+[data-color-theme="shadcn-yellow"] .btn-primary,
+[data-color-theme="shadcn-yellow"] .btn-task-create,
+[data-color-theme="shadcn-mono-red"] .btn-primary,
+[data-color-theme="shadcn-mono-red"] .btn-task-create,
+[data-color-theme="shadcn-mono-blue"] .btn-primary,
+[data-color-theme="shadcn-mono-blue"] .btn-task-create,
+[data-color-theme="shadcn-mono-green"] .btn-primary,
+[data-color-theme="shadcn-mono-green"] .btn-task-create,
+[data-color-theme="shadcn-mono-purple"] .btn-primary,
+[data-color-theme="shadcn-mono-purple"] .btn-task-create,
+[data-color-theme="shadcn-mono-pink"] .btn-primary,
+[data-color-theme="shadcn-mono-pink"] .btn-task-create,
+[data-color-theme="shadcn-mono-orange"] .btn-primary,
+[data-color-theme="shadcn-mono-orange"] .btn-task-create,
+[data-color-theme="shadcn-mono-yellow"] .btn-primary,
+[data-color-theme="shadcn-mono-yellow"] .btn-task-create,
+[data-color-theme="shadcn-black"] .btn-primary,
+[data-color-theme="shadcn-black"] .btn-task-create,
+[data-color-theme="shadcn-gray"] .btn-primary,
+[data-color-theme="shadcn-gray"] .btn-task-create,
+[data-color-theme="shadcn-gray-blue"] .btn-primary,
+[data-color-theme="shadcn-gray-blue"] .btn-task-create {
+  background: var(--cta-bg);
+  border-color: var(--cta-border);
+  color: var(--cta-text);
   box-shadow: none;
 }
 
-[data-color-theme="factory"] .btn-primary:hover,
-[data-color-theme="factory"] .btn-task-create:hover {
-  background: var(--todo);
-  color: var(--bg);
-  box-shadow: var(--shadow-glow);
-}
-
-[data-color-theme="factory"] .card,
-[data-color-theme="factory"] .column {
-  border-width: 2px;
-}
-
-[data-color-theme="factory"] .column-header h2 {
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  font-size: 0.75rem;
+[data-color-theme="shadcn-blue"] .btn-primary:hover,
+[data-color-theme="shadcn-blue"] .btn-task-create:hover,
+[data-color-theme="shadcn-green"] .btn-primary:hover,
+[data-color-theme="shadcn-green"] .btn-task-create:hover,
+[data-color-theme="shadcn-red"] .btn-primary:hover,
+[data-color-theme="shadcn-red"] .btn-task-create:hover,
+[data-color-theme="shadcn-purple"] .btn-primary:hover,
+[data-color-theme="shadcn-purple"] .btn-task-create:hover,
+[data-color-theme="shadcn-pink"] .btn-primary:hover,
+[data-color-theme="shadcn-pink"] .btn-task-create:hover,
+[data-color-theme="shadcn-orange"] .btn-primary:hover,
+[data-color-theme="shadcn-orange"] .btn-task-create:hover,
+[data-color-theme="shadcn-yellow"] .btn-primary:hover,
+[data-color-theme="shadcn-yellow"] .btn-task-create:hover,
+[data-color-theme="shadcn-mono-red"] .btn-primary:hover,
+[data-color-theme="shadcn-mono-red"] .btn-task-create:hover,
+[data-color-theme="shadcn-mono-blue"] .btn-primary:hover,
+[data-color-theme="shadcn-mono-blue"] .btn-task-create:hover,
+[data-color-theme="shadcn-mono-green"] .btn-primary:hover,
+[data-color-theme="shadcn-mono-green"] .btn-task-create:hover,
+[data-color-theme="shadcn-mono-purple"] .btn-primary:hover,
+[data-color-theme="shadcn-mono-purple"] .btn-task-create:hover,
+[data-color-theme="shadcn-mono-pink"] .btn-primary:hover,
+[data-color-theme="shadcn-mono-pink"] .btn-task-create:hover,
+[data-color-theme="shadcn-mono-orange"] .btn-primary:hover,
+[data-color-theme="shadcn-mono-orange"] .btn-task-create:hover,
+[data-color-theme="shadcn-mono-yellow"] .btn-primary:hover,
+[data-color-theme="shadcn-mono-yellow"] .btn-task-create:hover,
+[data-color-theme="shadcn-black"] .btn-primary:hover,
+[data-color-theme="shadcn-black"] .btn-task-create:hover,
+[data-color-theme="shadcn-gray"] .btn-primary:hover,
+[data-color-theme="shadcn-gray"] .btn-task-create:hover,
+[data-color-theme="shadcn-gray-blue"] .btn-primary:hover,
+[data-color-theme="shadcn-gray-blue"] .btn-task-create:hover {
+  background: var(--cta-bg-hover);
+  border-color: var(--cta-border-hover);
+  color: var(--cta-text);
+  box-shadow: none;
 }
 
-[data-color-theme="factory"] .column-count,
-[data-color-theme="factory"] .card-id {
-  font-family: var(--font-mono);
-  font-weight: 700;
+[data-color-theme="shadcn-blue"] .card,
+[data-color-theme="shadcn-blue"] .column,
+[data-color-theme="shadcn-green"] .card,
+[data-color-theme="shadcn-green"] .column,
+[data-color-theme="shadcn-red"] .card,
+[data-color-theme="shadcn-red"] .column,
+[data-color-theme="shadcn-purple"] .card,
+[data-color-theme="shadcn-purple"] .column,
+[data-color-theme="shadcn-pink"] .card,
+[data-color-theme="shadcn-pink"] .column,
+[data-color-theme="shadcn-orange"] .card,
+[data-color-theme="shadcn-orange"] .column,
+[data-color-theme="shadcn-yellow"] .card,
+[data-color-theme="shadcn-yellow"] .column,
+[data-color-theme="shadcn-mono-red"] .card,
+[data-color-theme="shadcn-mono-red"] .column,
+[data-color-theme="shadcn-mono-blue"] .card,
+[data-color-theme="shadcn-mono-blue"] .column,
+[data-color-theme="shadcn-mono-green"] .card,
+[data-color-theme="shadcn-mono-green"] .column,
+[data-color-theme="shadcn-mono-purple"] .card,
+[data-color-theme="shadcn-mono-purple"] .column,
+[data-color-theme="shadcn-mono-pink"] .card,
+[data-color-theme="shadcn-mono-pink"] .column,
+[data-color-theme="shadcn-mono-orange"] .card,
+[data-color-theme="shadcn-mono-orange"] .column,
+[data-color-theme="shadcn-mono-yellow"] .card,
+[data-color-theme="shadcn-mono-yellow"] .column,
+[data-color-theme="shadcn-black"] .card,
+[data-color-theme="shadcn-black"] .column,
+[data-color-theme="shadcn-gray"] .card,
+[data-color-theme="shadcn-gray"] .column,
+[data-color-theme="shadcn-gray-blue"] .card,
+[data-color-theme="shadcn-gray-blue"] .column {
+  border-width: var(--btn-border-width);
 }
 
 /* AYU - Popular code editor theme with dark and light variants */
@@ -967,7 +3842,7 @@
   --done: #6c7986;
   --color-success: #7ee787;
   --color-error: #f07178;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #5cb85c;
@@ -975,7 +3850,7 @@
   --cta-text: #0f1419;
   --cta-bg-hover: #7ee787;
   --cta-border-hover: #9af09a;
-  --cta-glow: 0 0 8px rgba(126, 231, 135, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #39bae6;
   --accent: #5cb85c;
@@ -1001,7 +3876,7 @@
   --done: #8a9199;
   --color-success: #86b300;
   --color-error: #f07178;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.15);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 15%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #6d9a00;
@@ -1009,7 +3884,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #86b300;
   --cta-border-hover: #9cc800;
-  --cta-glow: 0 0 8px rgba(134, 179, 0, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #007acc;
   --accent: #3a8a3a;
@@ -1036,7 +3911,7 @@
   --done: #828997;
   --color-success: #98c379;
   --color-error: #e06c75;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #7ec77a;
@@ -1044,7 +3919,7 @@
   --cta-text: #282c34;
   --cta-bg-hover: #98c379;
   --cta-border-hover: #b5d4a8;
-  --cta-glow: 0 0 8px rgba(152, 195, 121, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #61afef;
   --accent: #7ec77a;
@@ -1071,7 +3946,7 @@
   --done: #9da5b4;
   --color-success: #50a14f;
   --color-error: #e45649;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #3d8c3b;
@@ -1079,7 +3954,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #50a14f;
   --cta-border-hover: #66b865;
-  --cta-glow: 0 0 8px rgba(80, 161, 79, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #4078f2;
   --accent: #4a9e46;
@@ -1106,7 +3981,7 @@
   --done: #7b88a1;
   --color-success: #a3be8c;
   --color-error: #bf616a;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 40%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #8fa879;
@@ -1114,7 +3989,7 @@
   --cta-text: #2e3440;
   --cta-bg-hover: #a3be8c;
   --cta-border-hover: #b8cfab;
-  --cta-glow: 0 0 8px rgba(163, 190, 140, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #81a1c1;
   --accent: #88c0d0;
@@ -1140,7 +4015,7 @@
   --done: #4c566a;
   --color-success: #7ca373;
   --color-error: #b54a52;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #6a8f63;
@@ -1148,7 +4023,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #7ca373;
   --cta-border-hover: #8fb588;
-  --cta-glow: 0 0 8px rgba(124, 163, 115, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #5e81ac;
   --accent: #5e81ac;
@@ -1175,7 +4050,7 @@
   --done: #6272a4;
   --color-success: #50fa7b;
   --color-error: #ff5555;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #40d870;
@@ -1183,7 +4058,7 @@
   --cta-text: #282a36;
   --cta-bg-hover: #50fa7b;
   --cta-border-hover: #70ff95;
-  --cta-glow: 0 0 8px rgba(80, 250, 123, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #8be9fd;
   --accent: #bd93f9;
@@ -1209,7 +4084,7 @@
   --done: #5a5a72;
   --color-success: #2e8b57;
   --color-error: #cc3333;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #267a4d;
@@ -1217,7 +4092,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #2e8b57;
   --cta-border-hover: #3aa870;
-  --cta-glow: 0 0 8px rgba(46, 139, 87, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #00838f;
   --accent: #8662c7;
@@ -1244,7 +4119,7 @@
   --done: #928374;
   --color-success: #b8bb26;
   --color-error: #fb4934;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #a0a325;
@@ -1252,7 +4127,7 @@
   --cta-text: #282828;
   --cta-bg-hover: #b8bb26;
   --cta-border-hover: #d0d340;
-  --cta-glow: 0 0 8px rgba(184, 187, 38, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #83a598;
   --accent: #d4a017;
@@ -1278,7 +4153,7 @@
   --done: #504945;
   --color-success: #427b58;
   --color-error: #9d0006;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #3a6a4e;
@@ -1286,7 +4161,7 @@
   --cta-text: #fbf1c7;
   --cta-bg-hover: #427b58;
   --cta-border-hover: #528c68;
-  --cta-glow: 0 0 8px rgba(66, 123, 88, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #076678;
   --accent: #a08010;
@@ -1313,7 +4188,7 @@
   --done: #565f89;
   --color-success: #9ece6a;
   --color-error: #f7768e;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #8ab855;
@@ -1321,7 +4196,7 @@
   --cta-text: #1a1b26;
   --cta-bg-hover: #9ece6a;
   --cta-border-hover: #b8e080;
-  --cta-glow: 0 0 8px rgba(158, 206, 106, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #7aa2f7;
   --accent: #7aa2f7;
@@ -1347,7 +4222,7 @@
   --done: #414868;
   --color-success: #48703e;
   --color-error: #c53b53;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #3d6035;
@@ -1355,7 +4230,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #48703e;
   --cta-border-hover: #5a8550;
-  --cta-glow: 0 0 8px rgba(72, 112, 62, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #3b5ea5;
   --accent: #5b7ec7;
@@ -1382,7 +4257,7 @@
   --done: #6c7086;
   --color-success: #a6e3a1;
   --color-error: #f38ba8;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #8ad985;
@@ -1390,7 +4265,7 @@
   --cta-text: #1e1e2e;
   --cta-bg-hover: #a6e3a1;
   --cta-border-hover: #b8edb4;
-  --cta-glow: 0 0 8px rgba(166, 227, 161, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #89b4fa;
   --accent: #cba6f7;
@@ -1416,7 +4291,7 @@
   --done: #7c7f93;
   --color-success: #40a02b;
   --color-error: #d20f39;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #36891f;
@@ -1424,7 +4299,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #40a02b;
   --cta-border-hover: #52b93d;
-  --cta-glow: 0 0 8px rgba(64, 160, 43, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #1e66f5;
   --accent: #9a6fd9;
@@ -1451,7 +4326,7 @@
   --done: #484f58;
   --color-success: #3fb950;
   --color-error: #f85149;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #2ea043;
@@ -1459,7 +4334,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #3fb950;
   --cta-border-hover: #56d364;
-  --cta-glow: 0 0 8px rgba(63, 185, 80, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #58a6ff;
   --accent: #58a6ff;
@@ -1485,7 +4360,7 @@
   --done: #656d76;
   --color-success: #1a7f37;
   --color-error: #cf222e;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #1a7f37;
@@ -1493,7 +4368,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #1a7f37;
   --cta-border-hover: #2da44e;
-  --cta-glow: 0 0 8px rgba(26, 127, 55, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #0969da;
   --accent: #0969da;
@@ -1520,7 +4395,7 @@
   --done: #859289;
   --color-success: #a7c080;
   --color-error: #e67e80;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #8aad75;
@@ -1528,7 +4403,7 @@
   --cta-text: #2d353b;
   --cta-bg-hover: #a7c080;
   --cta-border-hover: #bcd09a;
-  --cta-glow: 0 0 8px rgba(167, 192, 128, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #7fbbb3;
   --accent: #a7c080;
@@ -1554,7 +4429,7 @@
   --done: #8da489;
   --color-success: #6d9b3a;
   --color-error: #c44040;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #5a8a2e;
@@ -1562,7 +4437,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #6d9b3a;
   --cta-border-hover: #80b34c;
-  --cta-glow: 0 0 8px rgba(109, 155, 58, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #3a94a5;
   --accent: #6b8f55;
@@ -1589,7 +4464,7 @@
   --done: #6e6a86;
   --color-success: #9ccfd8;
   --color-error: #eb6f92;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #7dbbc4;
@@ -1597,7 +4472,7 @@
   --cta-text: #191724;
   --cta-bg-hover: #9ccfd8;
   --cta-border-hover: #b3dfe6;
-  --cta-glow: 0 0 8px rgba(156, 207, 216, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #c4a7e7;
   --accent: #c4a7e7;
@@ -1623,7 +4498,7 @@
   --done: #9893a5;
   --color-success: #56949f;
   --color-error: #b4637a;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #428089;
@@ -1631,7 +4506,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #56949f;
   --cta-border-hover: #6daab4;
-  --cta-glow: 0 0 8px rgba(86, 148, 159, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #907aa9;
   --accent: #907aac;
@@ -1658,7 +4533,7 @@
   --done: #727169;
   --color-success: #98bb6c;
   --color-error: #c34043;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #7da55a;
@@ -1666,7 +4541,7 @@
   --cta-text: #1f1f28;
   --cta-bg-hover: #98bb6c;
   --cta-border-hover: #aed085;
-  --cta-glow: 0 0 8px rgba(152, 187, 108, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #7e9cd8;
   --accent: #957fb8;
@@ -1692,7 +4567,7 @@
   --done: #81818c;
   --color-success: #5a8249;
   --color-error: #b03438;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #49703f;
@@ -1700,7 +4575,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #5a8249;
   --cta-border-hover: #6b9a5c;
-  --cta-glow: 0 0 8px rgba(90, 130, 73, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #4e76b5;
   --accent: #7560a0;
@@ -1727,7 +4602,7 @@
   --done: #5c7a99;
   --color-success: #4ec9b0;
   --color-error: #ef5350;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 60%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #3da890;
@@ -1735,7 +4610,7 @@
   --cta-text: #011627;
   --cta-bg-hover: #4ec9b0;
   --cta-border-hover: #70dbc9;
-  --cta-glow: 0 0 8px rgba(78, 201, 176, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #82aaff;
   --accent: #82aaff;
@@ -1761,7 +4636,7 @@
   --done: #8a95a5;
   --color-success: #2b8a73;
   --color-error: #c0392b;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #257a68;
@@ -1769,7 +4644,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #2b8a73;
   --cta-border-hover: #3a9f8a;
-  --cta-glow: 0 0 8px rgba(43, 138, 115, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #2563eb;
   --accent: #5a7fd4;
@@ -1796,7 +4671,7 @@
   --done: #676e95;
   --color-success: #c3e88d;
   --color-error: #ff5370;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #a3c570;
@@ -1804,7 +4679,7 @@
   --cta-text: #292d3e;
   --cta-bg-hover: #c3e88d;
   --cta-border-hover: #d4f0a5;
-  --cta-glow: 0 0 8px rgba(195, 232, 141, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #82aaff;
   --accent: #c792ea;
@@ -1830,7 +4705,7 @@
   --done: #8a8fa0;
   --color-success: #5a9e2f;
   --color-error: #c0392b;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #4a8c28;
@@ -1838,7 +4713,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #5a9e2f;
   --cta-border-hover: #6db23c;
-  --cta-glow: 0 0 8px rgba(90, 158, 47, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #3b6fcf;
   --accent: #9a60c0;
@@ -1865,7 +4740,7 @@
   --done: #727072;
   --color-success: #a9dc76;
   --color-error: #ff6188;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #88c060;
@@ -1873,7 +4748,7 @@
   --cta-text: #2d2a2e;
   --cta-bg-hover: #a9dc76;
   --cta-border-hover: #c2ec92;
-  --cta-glow: 0 0 8px rgba(169, 220, 118, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #78dce8;
   --accent: #ffd866;
@@ -1899,7 +4774,7 @@
   --done: #9a9490;
   --color-success: #5a9030;
   --color-error: #c4405e;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #4a7a28;
@@ -1907,7 +4782,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #5a9030;
   --cta-border-hover: #6da63c;
-  --cta-glow: 0 0 8px rgba(90, 144, 48, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #2d8fa0;
   --accent: #d4a830;
@@ -1934,7 +4809,7 @@
   --done: #5a7a40;
   --color-success: #a0ff60;
   --color-error: #ff4040;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.7);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 70%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #78d840;
@@ -1942,7 +4817,7 @@
   --cta-text: #0a0e09;
   --cta-bg-hover: #a0ff60;
   --cta-border-hover: #b8ff80;
-  --cta-glow: 0 0 8px rgba(160, 255, 96, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #60d8a0;
   --accent: #78d840;
@@ -1968,7 +4843,7 @@
   --done: #7a8a70;
   --color-success: #4a8a20;
   --color-error: #b03030;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #3a7a18;
@@ -1976,7 +4851,7 @@
   --cta-text: #fff;
   --cta-bg-hover: #4a8a20;
   --cta-border-hover: #5a9a2c;
-  --cta-glow: 0 0 8px rgba(74, 138, 32, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #1a7a5a;
   --accent: #5ab030;
@@ -2033,8 +4908,8 @@
   --shadow-md: none;
   --shadow-lg: none;
   --shadow-glow: none;
-  --focus-ring: 0 0 0 3px rgba(255, 106, 0, 0.28);
-  --focus-ring-strong: 0 0 0 3px rgba(255, 106, 0, 0.44);
+  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
+  --focus-ring-strong: 0 0 0 3px color-mix(in srgb, var(--accent) 44%, transparent);
   --shadow: none;
 
   --transition-instant: 0.04s linear;
@@ -2074,8 +4949,8 @@
   --color-success: #4f8f00;
   --color-error: #b32000;
 
-  --focus-ring: 0 0 0 3px rgba(217, 72, 15, 0.22);
-  --focus-ring-strong: 0 0 0 3px rgba(217, 72, 15, 0.35);
+  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--todo) 22%, transparent);
+  --focus-ring-strong: 0 0 0 3px color-mix(in srgb, var(--todo) 35%, transparent);
 
   --cta-bg: #c2410c;
   --cta-border: #d9480f;
@@ -2170,15 +5045,15 @@
   --btn-border-width: 2px;
   --card-padding: 10px 12px;
 
-  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
-  --shadow-md: 0 0 10px rgba(255, 45, 149, 0.25);
-  --shadow-lg: 0 0 26px rgba(0, 240, 255, 0.2);
-  --shadow-glow: 0 0 10px rgba(255, 45, 149, 0.45);
-  --glow-success: 0 0 10px rgba(120, 255, 77, 0.45);
-  --glow-warning: 0 0 10px rgba(255, 171, 0, 0.45);
-  --glow-danger: 0 0 10px rgba(255, 86, 143, 0.42);
-  --focus-ring: 0 0 0 2px rgba(0, 240, 255, 0.2);
-  --focus-ring-strong: 0 0 0 2px rgba(255, 45, 149, 0.34);
+  --shadow-sm: 0 2px 6px color-mix(in srgb, #000000 35%, transparent);
+  --shadow-md: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
+  --shadow-lg: 0 0 26px color-mix(in srgb, var(--color-info) 20%, transparent);
+  --shadow-glow: 0 0 10px color-mix(in srgb, var(--todo) 45%, transparent);
+  --glow-success: 0 0 10px color-mix(in srgb, var(--color-success) 45%, transparent);
+  --glow-warning: 0 0 10px color-mix(in srgb, var(--triage) 45%, transparent);
+  --glow-danger: 0 0 10px color-mix(in srgb, var(--color-error) 42%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-info) 20%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent);
   --shadow: var(--shadow-lg);
 
   --transition-instant: 0.08s ease;
@@ -2191,7 +5066,7 @@
   --cta-text: #0d0d15;
   --cta-bg-hover: #ff4aa4;
   --cta-border-hover: #7ff7ff;
-  --cta-glow: 0 0 12px rgba(255, 45, 149, 0.45);
+  --cta-glow: 0 0 12px color-mix(in srgb, var(--cta-bg) 45%, transparent);
   --logo-accent: var(--todo);
   --color-info: #00f0ff;
   --accent: #ff2d95;
@@ -2218,21 +5093,21 @@
   --color-success: #3a8a2e;
   --color-error: #b11f5b;
 
-  --shadow-md: 0 0 10px rgba(204, 22, 110, 0.14);
-  --shadow-lg: 0 0 22px rgba(0, 142, 155, 0.12);
-  --shadow-glow: 0 0 10px rgba(204, 22, 110, 0.24);
-  --glow-success: 0 0 10px rgba(58, 138, 46, 0.24);
-  --glow-warning: 0 0 10px rgba(181, 114, 0, 0.24);
-  --glow-danger: 0 0 10px rgba(177, 31, 91, 0.2);
-  --focus-ring: 0 0 0 2px rgba(0, 142, 155, 0.17);
-  --focus-ring-strong: 0 0 0 2px rgba(204, 22, 110, 0.24);
+  --shadow-md: 0 0 10px color-mix(in srgb, var(--todo) 14%, transparent);
+  --shadow-lg: 0 0 22px color-mix(in srgb, var(--color-info) 12%, transparent);
+  --shadow-glow: 0 0 10px color-mix(in srgb, var(--todo) 24%, transparent);
+  --glow-success: 0 0 10px color-mix(in srgb, var(--color-success) 24%, transparent);
+  --glow-warning: 0 0 10px color-mix(in srgb, var(--triage) 24%, transparent);
+  --glow-danger: 0 0 10px color-mix(in srgb, var(--color-error) 20%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-info) 17%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 24%, transparent);
 
   --cta-bg: #b1145f;
   --cta-border: #008e9b;
   --cta-text: #ffffff;
   --cta-bg-hover: #cc166e;
   --cta-border-hover: #00a8b8;
-  --cta-glow: 0 0 10px rgba(177, 20, 95, 0.26);
+  --cta-glow: 0 0 10px color-mix(in srgb, var(--cta-bg) 26%, transparent);
   --logo-accent: var(--todo);
   --color-info: #008e9b;
   --accent: #d63384;
@@ -2249,7 +5124,7 @@
 [data-color-theme="neon-city"] .btn-task-create {
   border-color: color-mix(in srgb, var(--todo) 70%, var(--in-progress) 30%);
   color: var(--todo);
-  box-shadow: 0 0 10px rgba(255, 45, 149, 0.25);
+  box-shadow: 0 0 10px color-mix(in srgb, #ff2d95 25%, transparent);
 }
 
 [data-color-theme="neon-city"] .btn-primary:hover,
@@ -2257,8 +5132,8 @@
   color: var(--text);
   border-color: var(--in-progress);
   box-shadow:
-    0 0 8px rgba(255, 45, 149, 0.6),
-    0 0 14px rgba(0, 240, 255, 0.45);
+    0 0 8px color-mix(in srgb, #ff2d95 60%, transparent),
+    0 0 14px color-mix(in srgb, #00f0ff 45%, transparent);
 }
 
 [data-color-theme="neon-city"] .card,
@@ -2284,13 +5159,13 @@
   0%,
   100% {
     box-shadow:
-      0 0 8px rgba(255, 45, 149, 0.35),
-      0 0 16px rgba(0, 240, 255, 0.25);
+      0 0 8px color-mix(in srgb, #ff2d95 35%, transparent),
+      0 0 16px color-mix(in srgb, #00f0ff 25%, transparent);
   }
   50% {
     box-shadow:
-      0 0 14px rgba(255, 45, 149, 0.65),
-      0 0 24px rgba(0, 240, 255, 0.45);
+      0 0 14px color-mix(in srgb, #ff2d95 65%, transparent),
+      0 0 24px color-mix(in srgb, #00f0ff 45%, transparent);
   }
 }
 
@@ -2302,13 +5177,13 @@
   0%,
   100% {
     box-shadow:
-      0 0 8px rgba(177, 20, 95, 0.22),
-      0 0 16px rgba(0, 142, 155, 0.18);
+      0 0 8px color-mix(in srgb, #b1145f 22%, transparent),
+      0 0 16px color-mix(in srgb, #008e9b 18%, transparent);
   }
   50% {
     box-shadow:
-      0 0 12px rgba(177, 20, 95, 0.32),
-      0 0 20px rgba(0, 142, 155, 0.26);
+      0 0 12px color-mix(in srgb, #b1145f 32%, transparent),
+      0 0 20px color-mix(in srgb, #008e9b 26%, transparent);
   }
 }
 
@@ -2356,12 +5231,12 @@
   --modal-padding: var(--space-lg) calc(var(--space-xl) + 2px);
   --header-padding: var(--space-md) var(--space-xl);
 
-  --shadow-sm: 0 1px 2px rgba(10, 8, 5, 0.45);
-  --shadow-md: 0 4px 12px rgba(10, 8, 5, 0.35);
-  --shadow-lg: 0 12px 28px rgba(10, 8, 5, 0.4);
-  --shadow-glow: 0 0 8px rgba(208, 138, 75, 0.25);
-  --focus-ring: 0 0 0 2px rgba(208, 138, 75, 0.22);
-  --focus-ring-strong: 0 0 0 2px rgba(208, 138, 75, 0.34);
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #0a0805 45%, transparent);
+  --shadow-md: 0 4px 12px color-mix(in srgb, #0a0805 35%, transparent);
+  --shadow-lg: 0 12px 28px color-mix(in srgb, #0a0805 40%, transparent);
+  --shadow-glow: 0 0 8px color-mix(in srgb, var(--todo) 25%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-info) 22%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--color-info) 34%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #be6e3c;
@@ -2369,7 +5244,7 @@
   --cta-text: #f8eedf;
   --cta-bg-hover: #d08a4b;
   --cta-border-hover: #dda165;
-  --cta-glow: 0 0 10px rgba(208, 138, 75, 0.25);
+  --cta-glow: 0 0 10px color-mix(in srgb, var(--cta-border) 25%, transparent);
   --logo-accent: var(--todo);
   --color-info: #d08a4b;
   --accent: #d08a4b;
@@ -2396,19 +5271,19 @@
   --color-success: #5f7d3f;
   --color-error: #b24f2f;
 
-  --shadow-sm: 0 1px 2px rgba(74, 55, 35, 0.12);
-  --shadow-md: 0 5px 14px rgba(74, 55, 35, 0.14);
-  --shadow-lg: 0 14px 30px rgba(74, 55, 35, 0.16);
-  --shadow-glow: 0 0 8px rgba(168, 86, 47, 0.2);
-  --focus-ring: 0 0 0 2px rgba(168, 86, 47, 0.15);
-  --focus-ring-strong: 0 0 0 2px rgba(168, 86, 47, 0.24);
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #4a3723 12%, transparent);
+  --shadow-md: 0 5px 14px color-mix(in srgb, #4a3723 14%, transparent);
+  --shadow-lg: 0 14px 30px color-mix(in srgb, #4a3723 16%, transparent);
+  --shadow-glow: 0 0 8px color-mix(in srgb, var(--todo) 20%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--todo) 15%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 24%, transparent);
 
   --cta-bg: #99502d;
   --cta-border: #a8562f;
   --cta-text: #fff9f2;
   --cta-bg-hover: #a8562f;
   --cta-border-hover: #bf6a3f;
-  --cta-glow: 0 0 8px rgba(168, 86, 47, 0.2);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 20%, transparent);
   --logo-accent: var(--todo);
   --color-info: #8f4e2a;
   --accent: #a66b35;
@@ -2418,7 +5293,7 @@
 [data-color-theme="parchment"] .btn {
   font-family: var(--font-primary);
   border-color: color-mix(in srgb, var(--todo) 40%, var(--border) 60%);
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
+  box-shadow: inset 0 -1px 0 color-mix(in srgb, #000000 18%, transparent);
 }
 
 [data-color-theme="parchment"] .btn-primary,
@@ -2431,18 +5306,18 @@
 [data-color-theme="parchment"] .column {
   border-color: color-mix(in srgb, var(--border) 76%, var(--todo) 24%);
   background-image:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06)),
-    linear-gradient(0deg, rgba(201, 160, 112, 0.08), rgba(201, 160, 112, 0.08));
+    linear-gradient(180deg, color-mix(in srgb, #ffffff 2%, transparent), color-mix(in srgb, #000000 6%, transparent)),
+    linear-gradient(0deg, color-mix(in srgb, #c9a070 8%, transparent), color-mix(in srgb, #c9a070 8%, transparent));
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    0 2px 10px rgba(26, 20, 14, 0.2);
+    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
+    0 2px 10px color-mix(in srgb, #1a140e 20%, transparent);
 }
 
 [data-color-theme="parchment"][data-theme="light"] .card,
 [data-color-theme="parchment"][data-theme="light"] .column {
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.45),
-    0 3px 12px rgba(121, 90, 58, 0.15);
+    inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent),
+    0 3px 12px color-mix(in srgb, #795a3a 15%, transparent);
 }
 
 [data-color-theme="parchment"] .column-header h2 {
@@ -2493,12 +5368,12 @@
   --btn-border-width: 2px;
   --card-padding: 9px 10px;
 
-  --shadow-sm: 0 0 4px rgba(51, 255, 0, 0.15);
-  --shadow-md: 0 0 10px rgba(51, 255, 0, 0.18);
-  --shadow-lg: 0 0 22px rgba(51, 255, 0, 0.22);
-  --shadow-glow: 0 0 10px rgba(51, 255, 0, 0.35);
-  --focus-ring: 0 0 0 2px rgba(51, 255, 0, 0.26);
-  --focus-ring-strong: 0 0 0 2px rgba(51, 255, 0, 0.42);
+  --shadow-sm: 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
+  --shadow-md: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
+  --shadow-lg: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
+  --shadow-glow: 0 0 10px color-mix(in srgb, var(--todo) 35%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent);
   --shadow: var(--shadow-lg);
 
   --transition-instant: 0.02s steps(2, end);
@@ -2511,7 +5386,7 @@
   --cta-text: #061004;
   --cta-bg-hover: #6dff2f;
   --cta-border-hover: #b2ff67;
-  --cta-glow: 0 0 10px rgba(51, 255, 0, 0.35);
+  --cta-glow: 0 0 10px color-mix(in srgb, var(--cta-bg) 35%, transparent);
   --logo-accent: var(--todo);
   --color-info: #8fff38;
   --accent: #33ff00;
@@ -2538,19 +5413,19 @@
   --color-success: #5e9c2d;
   --color-error: #8f5f00;
 
-  --shadow-sm: 0 0 4px rgba(45, 107, 20, 0.1);
-  --shadow-md: 0 0 8px rgba(45, 107, 20, 0.12);
-  --shadow-lg: 0 0 14px rgba(45, 107, 20, 0.15);
-  --shadow-glow: 0 0 8px rgba(45, 107, 20, 0.2);
-  --focus-ring: 0 0 0 2px rgba(45, 107, 20, 0.16);
-  --focus-ring-strong: 0 0 0 2px rgba(45, 107, 20, 0.24);
+  --shadow-sm: 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
+  --shadow-md: 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent);
+  --shadow-lg: 0 0 14px color-mix(in srgb, var(--accent) 15%, transparent);
+  --shadow-glow: 0 0 8px color-mix(in srgb, var(--todo) 20%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
 
   --cta-bg: #2d6b14;
   --cta-border: #4c8f25;
   --cta-text: #f4fbef;
   --cta-bg-hover: #3d7d1c;
   --cta-border-hover: #5ea82f;
-  --cta-glow: 0 0 8px rgba(45, 107, 20, 0.2);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 20%, transparent);
   --logo-accent: var(--todo);
   --color-info: #4c8f25;
   --accent: #2d6b14;
@@ -2601,8 +5476,8 @@ body[data-color-theme="terminal"]::before {
   inset: 0;
   background: repeating-linear-gradient(
     to bottom,
-    rgba(51, 255, 0, 0.08) 0px,
-    rgba(51, 255, 0, 0.08) 1px,
+    color-mix(in srgb, #33ff00 8%, transparent) 0px,
+    color-mix(in srgb, #33ff00 8%, transparent) 1px,
     transparent 1px,
     transparent 3px
   );
@@ -2616,8 +5491,8 @@ body[data-color-theme="terminal"]::before {
 body[data-color-theme="terminal"][data-theme="light"]::before {
   background: repeating-linear-gradient(
     to bottom,
-    rgba(17, 52, 12, 0.07) 0px,
-    rgba(17, 52, 12, 0.07) 1px,
+    color-mix(in srgb, #11340c 7%, transparent) 0px,
+    color-mix(in srgb, #11340c 7%, transparent) 1px,
     transparent 1px,
     transparent 3px
   );
@@ -2628,11 +5503,11 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
 /* GLASS - Frosted translucent surfaces */
 [data-color-theme="glass"] {
   --bg: #13111f;
-  --surface: rgba(34, 27, 52, 0.78);
-  --card: rgba(54, 44, 82, 0.55);
-  --card-hover: rgba(66, 56, 99, 0.65);
+  --surface: color-mix(in srgb, #221b34 78%, transparent);
+  --card: color-mix(in srgb, #362c52 55%, transparent);
+  --card-hover: color-mix(in srgb, #423863 65%, transparent);
   --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
-  --border: rgba(255, 255, 255, 0.22);
+  --border: color-mix(in srgb, #ffffff 22%, transparent);
   --text: #f2effa;
   --text-muted: #b8b0d2;
   --text-dim: #827aa1;
@@ -2668,12 +5543,12 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --card-padding: 12px 14px;
   --modal-padding: var(--space-lg) var(--space-xl);
 
-  --shadow-sm: 0 8px 16px rgba(5, 2, 18, 0.24);
-  --shadow-md: 0 14px 30px rgba(6, 3, 24, 0.3);
-  --shadow-lg: 0 22px 42px rgba(8, 4, 30, 0.35);
-  --shadow-glow: 0 0 12px rgba(200, 107, 255, 0.26);
-  --focus-ring: 0 0 0 2px rgba(200, 107, 255, 0.2);
-  --focus-ring-strong: 0 0 0 2px rgba(200, 107, 255, 0.3);
+  --shadow-sm: 0 8px 16px color-mix(in srgb, #050212 24%, transparent);
+  --shadow-md: 0 14px 30px color-mix(in srgb, #060318 30%, transparent);
+  --shadow-lg: 0 22px 42px color-mix(in srgb, #08041e 35%, transparent);
+  --shadow-glow: 0 0 12px color-mix(in srgb, var(--todo) 26%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
   --shadow: var(--shadow-lg);
 
   --transition-instant: 0.08s ease;
@@ -2681,12 +5556,12 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --transition-normal: 0.22s ease;
   --transition-slow: 0.34s ease;
 
-  --cta-bg: rgba(200, 107, 255, 0.32);
-  --cta-border: rgba(255, 255, 255, 0.38);
+  --cta-bg: color-mix(in srgb, var(--accent) 32%, transparent);
+  --cta-border: color-mix(in srgb, #ffffff 38%, transparent);
   --cta-text: #f8f5ff;
-  --cta-bg-hover: rgba(200, 107, 255, 0.46);
-  --cta-border-hover: rgba(255, 255, 255, 0.5);
-  --cta-glow: 0 0 12px rgba(200, 107, 255, 0.24);
+  --cta-bg-hover: color-mix(in srgb, var(--accent) 46%, transparent);
+  --cta-border-hover: color-mix(in srgb, #ffffff 50%, transparent);
+  --cta-glow: 0 0 12px color-mix(in srgb, var(--accent) 24%, transparent);
   --logo-accent: var(--todo);
   --color-info: #ff7aa8;
   --accent: #c86bff;
@@ -2695,11 +5570,11 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
 
 [data-color-theme="glass"][data-theme="light"] {
   --bg: #eceaf5;
-  --surface: rgba(255, 255, 255, 0.75);
-  --card: rgba(255, 255, 255, 0.6);
-  --card-hover: rgba(255, 255, 255, 0.75);
+  --surface: color-mix(in srgb, #ffffff 75%, transparent);
+  --card: color-mix(in srgb, #ffffff 60%, transparent);
+  --card-hover: color-mix(in srgb, #ffffff 75%, transparent);
   --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
-  --border: rgba(114, 91, 156, 0.22);
+  --border: color-mix(in srgb, #725b9c 22%, transparent);
   --text: #2f2448;
   --text-muted: #66597f;
   --text-dim: #948aa8;
@@ -2713,19 +5588,19 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --color-success: #3e8f6b;
   --color-error: #c74b7a;
 
-  --shadow-sm: 0 8px 16px rgba(63, 44, 102, 0.08);
-  --shadow-md: 0 14px 30px rgba(63, 44, 102, 0.1);
-  --shadow-lg: 0 22px 42px rgba(63, 44, 102, 0.14);
-  --shadow-glow: 0 0 10px rgba(157, 64, 207, 0.2);
-  --focus-ring: 0 0 0 2px rgba(157, 64, 207, 0.15);
-  --focus-ring-strong: 0 0 0 2px rgba(157, 64, 207, 0.24);
+  --shadow-sm: 0 8px 16px color-mix(in srgb, #3f2c66 8%, transparent);
+  --shadow-md: 0 14px 30px color-mix(in srgb, #3f2c66 10%, transparent);
+  --shadow-lg: 0 22px 42px color-mix(in srgb, #3f2c66 14%, transparent);
+  --shadow-glow: 0 0 10px color-mix(in srgb, var(--todo) 20%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
 
-  --cta-bg: rgba(157, 64, 207, 0.24);
-  --cta-border: rgba(157, 64, 207, 0.38);
+  --cta-bg: color-mix(in srgb, var(--accent) 24%, transparent);
+  --cta-border: color-mix(in srgb, var(--accent) 38%, transparent);
   --cta-text: #2f2448;
-  --cta-bg-hover: rgba(157, 64, 207, 0.34);
-  --cta-border-hover: rgba(157, 64, 207, 0.48);
-  --cta-glow: 0 0 10px rgba(157, 64, 207, 0.22);
+  --cta-bg-hover: color-mix(in srgb, var(--accent) 34%, transparent);
+  --cta-border-hover: color-mix(in srgb, var(--accent) 48%, transparent);
+  --cta-glow: 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent);
   --logo-accent: var(--todo);
   --color-info: #c74b7a;
   --accent: #9d40cf;
@@ -2736,43 +5611,48 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
 [data-color-theme="glass"] .column {
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.24);
+  background: color-mix(in srgb, #ffffff 8%, transparent);
+  border-color: color-mix(in srgb, #ffffff 24%, transparent);
 }
 
 [data-color-theme="glass"][data-theme="light"] .card,
 [data-color-theme="glass"][data-theme="light"] .column {
-  background: rgba(255, 255, 255, 0.6);
-  border-color: rgba(114, 91, 156, 0.24);
+  background: color-mix(in srgb, #ffffff 60%, transparent);
+  border-color: color-mix(in srgb, #725b9c 24%, transparent);
 }
 
 [data-color-theme="glass"] .btn {
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  border-color: rgba(255, 255, 255, 0.34);
-  background: rgba(255, 255, 255, 0.1);
+  border-color: color-mix(in srgb, #ffffff 34%, transparent);
+  background: color-mix(in srgb, #ffffff 10%, transparent);
 }
 
 [data-color-theme="glass"] .btn-primary,
 [data-color-theme="glass"] .btn-task-create {
-  background: linear-gradient(135deg, rgba(200, 107, 255, 0.35), rgba(255, 122, 168, 0.3));
-  border-color: rgba(255, 255, 255, 0.42);
+  background: linear-gradient(135deg, color-mix(in srgb, #c86bff 35%, transparent), color-mix(in srgb, #ff7aa8 30%, transparent));
+  border-color: color-mix(in srgb, #ffffff 42%, transparent);
 }
 
 [data-color-theme="glass"] .btn-primary:hover,
 [data-color-theme="glass"] .btn-task-create:hover {
-  background: linear-gradient(135deg, rgba(200, 107, 255, 0.5), rgba(255, 122, 168, 0.42));
-  box-shadow: 0 12px 24px rgba(24, 14, 44, 0.28);
+  background: linear-gradient(135deg, color-mix(in srgb, #c86bff 50%, transparent), color-mix(in srgb, #ff7aa8 42%, transparent));
+  box-shadow: 0 12px 24px color-mix(in srgb, #180e2c 28%, transparent);
 }
 
 [data-color-theme="glass"][data-theme="light"] .btn {
-  background: rgba(255, 255, 255, 0.52);
-  border-color: rgba(114, 91, 156, 0.28);
+  background: color-mix(in srgb, #ffffff 52%, transparent);
+  border-color: color-mix(in srgb, #725b9c 28%, transparent);
 }
 
 [data-color-theme="glass"] .modal-overlay {
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
+  /*
+  FNXC:ModalChrome 2026-06-23-21:36:
+  Even glass-style themes should keep modal overlays non-dimming/non-blurring; modal panels provide depth with shadows and their own translucent surfaces.
+  */
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
 
 /* HORIZON - Warm sunset-inspired palette */
@@ -2795,7 +5675,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #7a7d91;
   --color-success: #29d398;
   --color-error: #e8646a;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #e8646a;
@@ -2803,7 +5683,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #1c1e26;
   --cta-bg-hover: #f08c42;
   --cta-border-hover: #f8c967;
-  --cta-glow: 0 0 8px rgba(233, 99, 112, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, #e96370 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #f8c967;
   --accent: #e59371;
@@ -2829,7 +5709,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #8a7d78;
   --color-success: #29a87c;
   --color-error: #d84050;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #e8646a;
@@ -2837,7 +5717,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #f08c42;
   --cta-border-hover: #f8c967;
-  --cta-glow: 0 0 8px rgba(232, 100, 106, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #d88030;
   --accent: #e8646a;
@@ -2864,7 +5744,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #5a5850;
   --color-success: #7cb586;
   --color-error: #cb4b16;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #4c9a91;
@@ -2872,7 +5752,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #0d1210;
   --cta-bg-hover: #7cb586;
   --cta-border-hover: #9cd4a6;
-  --cta-glow: 0 0 8px rgba(76, 154, 145, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #dca561;
   --accent: #4c9a91;
@@ -2898,7 +5778,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #8a8880;
   --color-success: #5a9a68;
   --color-error: #b04820;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #3a8578;
@@ -2906,7 +5786,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #5a9a68;
   --cta-border-hover: #7aba88;
-  --cta-glow: 0 0 8px rgba(90, 154, 104, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #c08040;
   --accent: #3a8578;
@@ -2933,7 +5813,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #6a60a0;
   --color-success: #00e5ff;
   --color-error: #ff2d95;
-  --shadow-lg: 0 4px 24px rgba(181, 55, 242, 0.4);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--accent) 40%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #b537f2;
@@ -2941,7 +5821,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #ff2d95;
   --cta-border-hover: #ff6bbf;
-  --cta-glow: 0 0 8px rgba(255, 45, 149, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #00e5ff;
   --accent: #b537f2;
@@ -2967,7 +5847,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #8080a0;
   --color-success: #00a8b8;
   --color-error: #d02080;
-  --shadow-lg: 0 4px 24px rgba(144, 48, 200, 0.15);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--accent) 15%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #9030c8;
@@ -2975,7 +5855,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #d02080;
   --cta-border-hover: #e04090;
-  --cta-glow: 0 0 8px rgba(208, 32, 128, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #00a8b8;
   --accent: #9030c8;
@@ -3002,7 +5882,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #707080;
   --color-success: #5af78e;
   --color-error: #ff5c57;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #50fa7b;
@@ -3010,7 +5890,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #282a36;
   --cta-bg-hover: #5af78e;
   --cta-border-hover: #8afaaa;
-  --cta-glow: 0 0 8px rgba(90, 247, 142, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #f3f99d;
   --accent: #ff6f91;
@@ -3036,7 +5916,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #808088;
   --color-success: #30a050;
   --color-error: #d04040;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #28a048;
@@ -3044,7 +5924,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #30a050;
   --cta-border-hover: #50c070;
-  --cta-glow: 0 0 8px rgba(48, 160, 80, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #a0a030;
   --accent: #d06070;
@@ -3071,7 +5951,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #707488;
   --color-success: #c3e88d;
   --color-error: #f07178;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 40%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #9a7ee8;
@@ -3079,7 +5959,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #1e2030;
   --cta-bg-hover: #c792ea;
   --cta-border-hover: #d8b0ff;
-  --cta-glow: 0 0 8px rgba(199, 146, 234, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #ffcb6b;
   --accent: #c792ea;
@@ -3105,7 +5985,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #8080a0;
   --color-success: #60a050;
   --color-error: #c04050;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #8058c8;
@@ -3113,7 +5993,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #9060d8;
   --cta-border-hover: #a080e8;
-  --cta-glow: 0 0 8px rgba(144, 96, 216, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #d0a030;
   --accent: #9060d8;
@@ -3140,7 +6020,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #706050;
   --color-success: #8f6552;
   --color-error: #d47a6a;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #c17d56;
@@ -3148,7 +6028,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #231813;
   --cta-bg-hover: #d4a574;
   --cta-border-hover: #e4b884;
-  --cta-glow: 0 0 8px rgba(212, 165, 116, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #8f6552;
   --accent: #d4a574;
@@ -3174,7 +6054,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #8a7a68;
   --color-success: #706050;
   --color-error: #b06050;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #906040;
@@ -3182,7 +6062,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #a07050;
   --cta-border-hover: #b08060;
-  --cta-glow: 0 0 8px rgba(160, 112, 80, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #806040;
   --accent: #a07050;
@@ -3209,7 +6089,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #706050;
   --color-success: #d4874d;
   --color-error: #c44030;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #c1440e;
@@ -3217,7 +6097,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #e77d3d;
   --cta-border-hover: #f7a060;
-  --cta-glow: 0 0 8px rgba(193, 68, 14, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #d4874d;
   --accent: #c1440e;
@@ -3243,7 +6123,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #8a7a68;
   --color-success: #b07040;
   --color-error: #a03020;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #a03010;
@@ -3251,7 +6131,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #c06030;
   --cta-border-hover: #d08050;
-  --cta-glow: 0 0 8px rgba(160, 48, 16, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #b07040;
   --accent: #a03010;
@@ -3278,7 +6158,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #5d5f78;
   --color-success: #5de4c7;
   --color-error: #d0679d;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, #000000 40%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #5de4c7;
@@ -3286,7 +6166,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #14151f;
   --cta-bg-hover: #89ddff;
   --cta-border-hover: #aae8ff;
-  --cta-glow: 0 0 8px rgba(93, 228, 199, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #b4bcff;
   --accent: #89ddff;
@@ -3312,7 +6192,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --done: #8080a0;
   --color-success: #30a090;
   --color-error: #c04080;
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
   --shadow: var(--shadow-lg);
 
   --cta-bg: #30a090;
@@ -3320,7 +6200,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #4090c0;
   --cta-border-hover: #60a8d8;
-  --cta-glow: 0 0 8px rgba(48, 160, 144, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #8070c0;
   --accent: #4090c0;
@@ -3353,7 +6233,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #c05828;
   --cta-border-hover: #d87038;
-  --cta-glow: 0 0 8px rgba(199, 91, 42, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #58a8d0;
   --accent: #c75b2a;
@@ -3385,7 +6265,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #a04820;
   --cta-border-hover: #b85a28;
-  --cta-glow: 0 0 8px rgba(160, 72, 32, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #2878a0;
   --accent: #a04520;
@@ -3418,7 +6298,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #c87840;
   --cta-border-hover: #d88a50;
-  --cta-glow: 0 0 8px rgba(212, 133, 74, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #60a8d8;
   --accent: #d4854a;
@@ -3450,7 +6330,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #906828;
   --cta-border-hover: #a87830;
-  --cta-glow: 0 0 8px rgba(144, 84, 32, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, #905420 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #306090;
   --accent: #b06830;
@@ -3483,7 +6363,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #1a1008;
   --cta-bg-hover: #e08a10;
   --cta-border-hover: #f09a18;
-  --cta-glow: 0 0 12px rgba(240, 154, 24, 0.4);
+  --cta-glow: 0 0 12px color-mix(in srgb, var(--cta-border-hover) 40%, transparent);
   --logo-accent: var(--todo);
   --color-info: #60b0e0;
   --accent: #f0960a;
@@ -3515,7 +6395,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #b07810;
   --cta-border-hover: #c08818;
-  --cta-glow: 0 0 8px rgba(192, 120, 16, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, #c07810 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #3070a0;
   --accent: #c07808;
@@ -3548,7 +6428,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #5a7898;
   --cta-border-hover: #6a8aac;
-  --cta-glow: 0 0 8px rgba(90, 122, 160, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, #5a7aa0 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #6090c0;
   --accent: #5a8abf;
@@ -3580,7 +6460,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #4070a0;
   --cta-border-hover: #5080b0;
-  --cta-glow: 0 0 8px rgba(64, 112, 160, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #306090;
   --accent: #3a6a9f;
@@ -3613,7 +6493,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #b08850;
   --cta-border-hover: #d0a070;
-  --cta-glow: 0 0 8px rgba(192, 144, 96, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #90a8c0;
   --accent: #c4905a;
@@ -3645,7 +6525,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #9a7840;
   --cta-border-hover: #b09060;
-  --cta-glow: 0 0 8px rgba(160, 128, 80, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #5888a8;
   --accent: #a07040;
@@ -3678,7 +6558,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #409898;
   --cta-border-hover: #50b8b0;
-  --cta-glow: 0 0 8px rgba(64, 168, 160, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #50a8c0;
   --accent: #40c8b0;
@@ -3710,7 +6590,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #308070;
   --cta-border-hover: #40a090;
-  --cta-glow: 0 0 8px rgba(56, 144, 128, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #2880a0;
   --accent: #2a9080;
@@ -3743,7 +6623,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #5080b8;
   --cta-border-hover: #6898d0;
-  --cta-glow: 0 0 8px rgba(88, 136, 192, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #60a0c8;
   --accent: #7ab8e8;
@@ -3775,7 +6655,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #3080b0;
   --cta-border-hover: #4898c8;
-  --cta-glow: 0 0 8px rgba(56, 136, 184, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #2080a8;
   --accent: #4a90c0;
@@ -3808,7 +6688,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #9070b0;
   --cta-border-hover: #a888c8;
-  --cta-glow: 0 0 8px rgba(152, 120, 184, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #9090c0;
   --accent: #b890d8;
@@ -3840,7 +6720,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #7860a0;
   --cta-border-hover: #9078b8;
-  --cta-glow: 0 0 8px rgba(128, 104, 168, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #6868a0;
   --accent: #8060a8;
@@ -3873,7 +6753,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #b058a8;
   --cta-border-hover: #d070c8;
-  --cta-glow: 0 0 8px rgba(192, 96, 184, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #b090d0;
   --accent: #e870c0;
@@ -3905,7 +6785,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #9040b0;
   --cta-border-hover: #a858c8;
-  --cta-glow: 0 0 8px rgba(152, 72, 184, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #7878c0;
   --accent: #c040a0;
@@ -3938,7 +6818,7 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #a08858;
   --cta-border-hover: #b8a078;
-  --cta-glow: 0 0 8px rgba(168, 144, 104, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #a8a0b0;
   --accent: #c8a868;
@@ -3970,10 +6850,9 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
   --cta-text: #fff;
   --cta-bg-hover: #887038;
   --cta-border-hover: #a08848;
-  --cta-glow: 0 0 8px rgba(144, 120, 64, 0.3);
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
   --logo-accent: var(--todo);
   --color-info: #888098;
   --accent: #9a8050;
   --accent-text: #fff;
 }
-