phase 3 complete

frontend/src/pages/Automation/Dashboard.tsx

@@ -123,7 +123,7 @@ export default function AutomationDashboard() {
       nextRun: "4 hours",
       coverage: 85,
       icon: PaperPlaneIcon,
-      color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
+      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
     },
     {
       id: 2,
@@ -135,7 +135,7 @@ export default function AutomationDashboard() {
       nextRun: "2 hours",
       coverage: 92,
       icon: FileTextIcon,
-      color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
+      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
     },
     {
       id: 3,
@@ -147,7 +147,7 @@ export default function AutomationDashboard() {
       nextRun: "3 hours",
       coverage: 78,
       icon: ListIcon,
-      color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
+      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
     },
   ];
 
@@ -225,7 +225,7 @@ export default function AutomationDashboard() {
       position: "top",
       labels: { colors: "#6b7280" },
     },
-    colors: ["var(--igny8-blue)", "var(--igny8-green)", "var(--igny8-purple)"],
+    colors: ["var(--color-primary)", "var(--color-success)", "var(--color-purple)"],
     grid: {
       borderColor: "#e5e7eb",
     },
@@ -319,7 +319,7 @@ export default function AutomationDashboard() {
                     </div>
                     <div className="flex items-center justify-between text-xs text-slate-600">
                       <span>Next Run:</span>
-                      <span className="font-semibold text-[var(--igny8-blue)]">{workflow.nextRun}</span>
+                      <span className="font-semibold text-[var(--color-primary)]">{workflow.nextRun}</span>
                     </div>
                   </div>
                   <div className="mb-4">
@@ -334,7 +334,7 @@ export default function AutomationDashboard() {
                       <CloseIcon className="h-4 w-4" />
                       Pause
                     </button>
-                    <button className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white px-4 py-2 text-sm font-semibold hover:shadow-lg transition">
+                    <button className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-4 py-2 text-sm font-semibold hover:shadow-lg transition">
                       <PaperPlaneIcon className="h-4 w-4" />
                       Run Now
                     </button>
@@ -360,14 +360,14 @@ export default function AutomationDashboard() {
                   <div className="flex items-center justify-between mb-3">
                     <div className={`inline-flex size-10 rounded-lg bg-gradient-to-br ${
                       isEnabled 
-                        ? "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]" 
+                        ? "from-[var(--color-success)] to-[var(--color-success-dark)]" 
                         : "from-slate-300 to-slate-400"
                     } items-center justify-center text-white shadow-md`}>
                       <Icon className="h-5 w-5" />
                     </div>
                     <div className={`size-5 rounded-full border-2 flex items-center justify-center ${
                       isEnabled 
-                        ? "border-[var(--igny8-green)] bg-[var(--igny8-green)]" 
+                        ? "border-[var(--color-success)] bg-[var(--color-success)]" 
                         : "border-slate-300 bg-white"
                     }`}>
                       {isEnabled && <CheckCircleIcon className="h-3 w-3 text-white" />}
@@ -375,7 +375,7 @@ export default function AutomationDashboard() {
                   </div>
                   <h4 className="font-semibold text-slate-900 mb-1">{step.step}</h4>
                   <p className="text-xs text-slate-600">{step.description}</p>
-                  <div className="mt-3 flex items-center gap-1 text-xs text-[var(--igny8-blue)] opacity-0 group-hover:opacity-100 transition">
+                  <div className="mt-3 flex items-center gap-1 text-xs text-[var(--color-primary)] opacity-0 group-hover:opacity-100 transition">
                     <span>Configure</span>
                     <ArrowRightIcon className="h-3 w-3" />
                   </div>
@@ -401,7 +401,7 @@ export default function AutomationDashboard() {
                   key={activity.id}
                   className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white"
                 >
-                  <div className="size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-md">
+                  <div className="size-10 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md">
                     <BoltIcon className="h-5 w-5" />
                   </div>
                   <div className="flex-1">
@@ -434,21 +434,21 @@ export default function AutomationDashboard() {
               onClick={() => navigate("/planner/keyword-opportunities")}
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
                 <ListIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
                 <h4 className="font-semibold text-slate-900 mb-1">Run Planner Workflow</h4>
                 <p className="text-sm text-slate-600">Keywords → Clusters → Ideas</p>
               </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] transition" />
+              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
             </button>
 
             <button
               onClick={() => navigate("/writer/tasks")}
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
                 <FileTextIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -462,7 +462,7 @@ export default function AutomationDashboard() {
               onClick={() => navigate("/writer/published")}
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-purple)] to-[var(--color-purple-dark)] flex items-center justify-center text-white shadow-lg">
                 <PaperPlaneIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">