diff --git a/backend/src/api/app.ts b/backend/src/api/app.ts
index 0f8fbbeb..2281c880 100644
--- a/backend/src/api/app.ts
+++ b/backend/src/api/app.ts
@@ -12,13 +12,18 @@ import { createServer, Server as HttpServer } from "http";
 import swaggerUi from "swagger-ui-express";
 
 import {
+  createTaskJobHandler,
   type DispatchFn,
   type PaymentReleaseFn,
 } from "../coordinator/coordinator";
 import { httpDispatch } from "../coordinator/dispatch";
-import type { AgentRegistry } from "../types/agent";
-import { getTask } from "../coordinator/taskStore";
 import { eventBus } from "../coordinator/eventBus";
+import { getTask } from "../coordinator/taskStore";
+import { getTaskDb } from "../db/tasks";
+import { createPaymentReleaseFn, type StellarReleasePaymentFn } from "../payment";
+import { getGlobalJobQueue, JobWorker, type JobQueue } from "../queue";
+import { createHeartbeatService, type HeartbeatServiceOptions } from "../services/heartbeat";
+import { metricsMiddleware, metricsService } from "../services/metrics";
 import type { EventStore } from "../events/eventStore";
 import {
   attachTaskStream,
@@ -39,10 +44,20 @@ import { rateLimitMiddleware, registerRateLimitMiddleware, publicLimiter, authed
 import { authMiddleware } from "./middleware/auth";
 import { createCorsMiddleware } from "./middleware/cors";
 import { compressionMiddleware } from "./middleware/compression";
+import { createCorsMiddleware } from "./middleware/cors";
+import { errorHandler } from "./middleware/errorHandler";
+import { readOnlyMiddleware } from "./middleware/readOnly";
+import { registerRateLimitMiddleware } from "./middleware/rateLimit";
 import { requestId } from "./middleware/requestId";
 import { requestLogger } from "./middleware/requestLogger";
-import { errorHandler } from "./middleware/errorHandler";
 import { versioningMiddleware } from "./middleware/versioning";
+import { getOpenapiJson, getOpenapiYaml, openapiSpec, swaggerUiOptions } from "./docs";
+import { agentsRouter } from "./routes/agents";
+import { createAdminRouter } from "./routes/admin";
+import { healthRouter } from "./routes/health";
+import { createReconciliationRouter, type ReconciliationRouterOptions } from "./routes/reconciliation";
+import { createStatsRouter } from "./routes/stats";
+import { attachTaskStream, getStreamConnectionCount, type TaskStreamOptions } from "./routes/stream";
 import { createV1TasksRouter } from "./routes/v1/tasks";
 import { createV2TasksRouter } from "./routes/v2/tasks";
 import { createAuthRouter } from "./routes/auth";
@@ -114,6 +129,11 @@ export function createApp(opts: AppOptions = {}): {
   app.use(requestLogger);
   app.use(metricsMiddleware);
   app.use(versioningMiddleware);
+  app.use(
+    readOnlyMiddleware({
+      exemptPaths: ["/api/admin", "/api/reconciliation"],
+    }),
+  );
 
   if (!opts.disableCompression && config.NODE_ENV !== "test") {
     app.use(...compressionMiddleware());
@@ -188,6 +208,7 @@ export function createApp(opts: AppOptions = {}): {
     } else {
       return v2TasksRouter(req, res, next);
     }
+    return v2TasksRouter(req, res, next);
   });
 
   // ── Admin Queue routes ─────────────────────────────────────────────────────
diff --git a/backend/src/api/middleware/readOnly.ts b/backend/src/api/middleware/readOnly.ts
new file mode 100644
index 00000000..d89c0368
--- /dev/null
+++ b/backend/src/api/middleware/readOnly.ts
@@ -0,0 +1,36 @@
+import type { NextFunction, Request, Response } from "express";
+import { getReadOnlyState, isReadOnly } from "../../services/adminControl";
+
+const MUTATION_METHODS = new Set(["POST", "PUT", "PATCH", "DELETE"]);
+
+export interface ReadOnlyMiddlewareOptions {
+  exemptPaths?: string[];
+}
+
+export function readOnlyMiddleware(options: ReadOnlyMiddlewareOptions = {}) {
+  const exemptPaths = options.exemptPaths ?? [];
+
+  return (req: Request, res: Response, next: NextFunction): void => {
+    if (!MUTATION_METHODS.has(req.method)) {
+      next();
+      return;
+    }
+
+    if (exemptPaths.some((prefix) => req.path === prefix || req.path.startsWith(`${prefix}/`))) {
+      next();
+      return;
+    }
+
+    if (!isReadOnly()) {
+      next();
+      return;
+    }
+
+    const state = getReadOnlyState();
+    res.status(503).json({
+      error: "READ_ONLY",
+      message: "Mutations are temporarily disabled by an operator.",
+      readOnly: state,
+    });
+  };
+}
diff --git a/backend/src/api/routes/admin.ts b/backend/src/api/routes/admin.ts
index 2bd290e4..98023dfb 100644
--- a/backend/src/api/routes/admin.ts
+++ b/backend/src/api/routes/admin.ts
@@ -1,5 +1,204 @@
-import { Router, Request, Response } from "express";
+import { Router, type NextFunction, type Request, type Response } from "express";
+import { z } from "zod";
 import { getGlobalJobQueue, type JobQueue, type JobStatus } from "../../queue";
+import {
+  actorFromRequest,
+  auditLogToCsv,
+  backupDatabases,
+  getReadOnlyState,
+  listAdminAuditLog,
+  listAgentsForAdmin,
+  recordAdminAudit,
+  setAgentEnabled,
+  setReadOnlyState,
+  vacuumDatabases,
+} from "../../services/adminControl";
+import {
+  ReconciliationService,
+  createDefaultReconciliationService,
+} from "../../services/reconciliation";
+import type { ReconciliationRouterOptions } from "./reconciliation";
+import type { ReconciliationTrigger } from "../../services/reconciliation.types";
+import { createLogger } from "../../utils/logger";
+
+const logger = createLogger({ module: "admin" });
+
+const readOnlySchema = z.object({
+  enabled: z.boolean(),
+  reason: z.string().max(500).optional(),
+});
+
+const agentListSchema = z.object({
+  status: z.enum(["online", "offline"]).optional(),
+});
+
+const auditLogQuerySchema = z.object({
+  limit: z.coerce.number().int().min(1).max(1000).default(200),
+  offset: z.coerce.number().int().min(0).default(0),
+  format: z.enum(["json", "csv"]).default("json"),
+});
+
+const reconciliationSchema = z.object({
+  triggeredBy: z.enum(["manual", "scheduled", "release"]).default("manual"),
+});
+
+const backupSchema = z.object({
+  directory: z.string().min(1).optional(),
+});
+
+export interface AdminRouterOptions {
+  queue?: JobQueue;
+  reconciliation?: ReconciliationRouterOptions;
+}
+
+function asyncHandler(
+  handler: (req: Request, res: Response, next: NextFunction) => Promise<void>,
+) {
+  return (req: Request, res: Response, next: NextFunction): void => {
+    void handler(req, res, next).catch(next);
+  };
+}
+
+function auditAdminRequests(req: Request, res: Response, next: NextFunction): void {
+  res.on("finish", () => {
+    recordAdminAudit({
+      at: new Date().toISOString(),
+      actor: actorFromRequest(req),
+      action: `${req.method} ${req.baseUrl}${req.path}`,
+      target: req.params.id,
+      statusCode: res.statusCode,
+      requestId:
+        (res.locals.requestId as string | undefined) ??
+        (res.locals.correlationId as string | undefined),
+      details: {
+        params: req.params,
+        query: req.query,
+        body: req.method === "GET" ? undefined : req.body,
+      },
+    });
+  });
+  next();
+}
+
+function getReconciliationService(options?: ReconciliationRouterOptions): ReconciliationService {
+  return options?.service ?? createDefaultReconciliationService();
+}
+
+export function createAdminRouter(options: AdminRouterOptions = {}): Router {
+  const router = Router();
+  const jobQueue = options.queue ?? getGlobalJobQueue();
+  const reconciliationService = getReconciliationService(options.reconciliation);
+
+  router.use(auditAdminRequests);
+
+  router.get("/read-only", (_req: Request, res: Response) => {
+    res.json(getReadOnlyState());
+  });
+
+  router.put("/read-only", (req: Request, res: Response) => {
+    const parsed = readOnlySchema.safeParse(req.body);
+    if (!parsed.success) {
+      res.status(400).json({ error: "INVALID_BODY", details: parsed.error.flatten() });
+      return;
+    }
+
+    const state = setReadOnlyState(
+      parsed.data.enabled,
+      actorFromRequest(req),
+      parsed.data.reason,
+    );
+    res.json(state);
+  });
+
+  router.get("/agents", (req: Request, res: Response) => {
+    const parsed = agentListSchema.safeParse(req.query);
+    if (!parsed.success) {
+      res.status(400).json({ error: "INVALID_QUERY", details: parsed.error.flatten() });
+      return;
+    }
+    res.json({ agents: listAgentsForAdmin(parsed.data.status) });
+  });
+
+  router.post("/agents/:id/enable", (req: Request, res: Response) => {
+    const agent = setAgentEnabled(req.params.id, true);
+    if (!agent) {
+      res.status(404).json({ error: "AGENT_NOT_FOUND" });
+      return;
+    }
+    res.json({ enabled: true, agent });
+  });
+
+  router.post("/agents/:id/disable", (req: Request, res: Response) => {
+    const agent = setAgentEnabled(req.params.id, false);
+    if (!agent) {
+      res.status(404).json({ error: "AGENT_NOT_FOUND" });
+      return;
+    }
+    res.json({ enabled: false, agent });
+  });
+
+  router.post(
+    "/reconciliation/run",
+    asyncHandler(async (req: Request, res: Response) => {
+      const parsed = reconciliationSchema.safeParse(req.body ?? {});
+      if (!parsed.success) {
+        res.status(400).json({ error: "INVALID_BODY", details: parsed.error.flatten() });
+        return;
+      }
+
+      const triggeredBy = parsed.data.triggeredBy as ReconciliationTrigger;
+      const report = await reconciliationService.run(triggeredBy);
+      res.status(200).json(report);
+    }),
+  );
+
+  router.post("/maintenance/vacuum", (_req: Request, res: Response) => {
+    res.json({ results: vacuumDatabases() });
+  });
+
+  router.post(
+    "/maintenance/backup",
+    asyncHandler(async (req: Request, res: Response) => {
+      const parsed = backupSchema.safeParse(req.body ?? {});
+      if (!parsed.success) {
+        res.status(400).json({ error: "INVALID_BODY", details: parsed.error.flatten() });
+        return;
+      }
+
+      const results = await backupDatabases(parsed.data.directory);
+      res.json({ results });
+    }),
+  );
+
+  router.get("/audit-log", (req: Request, res: Response) => {
+    const parsed = auditLogQuerySchema.safeParse(req.query);
+    if (!parsed.success) {
+      res.status(400).json({ error: "INVALID_QUERY", details: parsed.error.flatten() });
+      return;
+    }
+
+    const entries = listAdminAuditLog(parsed.data.limit, parsed.data.offset);
+    if (parsed.data.format === "csv") {
+      res.setHeader("Content-Type", "text/csv; charset=utf-8");
+      res.send(auditLogToCsv(entries));
+      return;
+    }
+    res.json({ entries });
+  });
+
+  router.use("/queue", createAdminQueueRouter(jobQueue));
+  router.use("/", createAdminQueueRouter(jobQueue));
+
+  router.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
+    logger.error({ err }, "admin operation failed");
+    res.status(500).json({
+      error: "ADMIN_OPERATION_FAILED",
+      message: err.message,
+    });
+  });
+
+  return router;
+}
 
 export function createAdminQueueRouter(queue?: JobQueue): Router {
   const router = Router();
diff --git a/backend/src/services/adminControl.ts b/backend/src/services/adminControl.ts
new file mode 100644
index 00000000..f0e82cfa
--- /dev/null
+++ b/backend/src/services/adminControl.ts
@@ -0,0 +1,248 @@
+import fs from "fs";
+import path from "path";
+import type { Request } from "express";
+import Database from "better-sqlite3";
+import { createAgentDb, getAgentDb, type AgentRecord } from "../db/agents";
+import { getDb as getPaymentDb } from "../db";
+import { getTaskDb } from "../db/tasks";
+import { getJobDb } from "../queue";
+import { createLogger } from "../utils/logger";
+
+const logger = createLogger({ component: "admin-control" });
+
+const DEFAULT_AUDIT_DB = path.join(process.cwd(), "admin_audit.db");
+const DEFAULT_BACKUP_DIR = path.join(process.cwd(), "backups", "admin");
+
+export interface ReadOnlyState {
+  enabled: boolean;
+  reason?: string;
+  changedAt?: string;
+  changedBy?: string;
+}
+
+export interface AdminAuditEntry {
+  id?: number;
+  at: string;
+  actor: string;
+  action: string;
+  target?: string;
+  statusCode: number;
+  requestId?: string;
+  details?: unknown;
+}
+
+let readOnlyState: ReadOnlyState = {
+  enabled: process.env.AI_NET_READ_ONLY === "true",
+  reason: process.env.AI_NET_READ_ONLY_REASON,
+  changedAt: new Date().toISOString(),
+  changedBy: "boot",
+};
+
+let auditDb: Database.Database | null = null;
+
+function getAuditDb(): Database.Database {
+  if (!auditDb) {
+    const dbPath = process.env.ADMIN_AUDIT_DB_PATH ?? DEFAULT_AUDIT_DB;
+    auditDb = new Database(dbPath);
+    auditDb.pragma("busy_timeout = 5000");
+    auditDb.pragma("journal_mode = WAL");
+    auditDb.exec(`
+      CREATE TABLE IF NOT EXISTS admin_audit_log (
+        id         INTEGER PRIMARY KEY AUTOINCREMENT,
+        at         TEXT NOT NULL,
+        actor      TEXT NOT NULL,
+        action     TEXT NOT NULL,
+        target     TEXT,
+        statusCode INTEGER NOT NULL,
+        requestId  TEXT,
+        details    TEXT
+      );
+      CREATE INDEX IF NOT EXISTS idx_admin_audit_log_at
+        ON admin_audit_log (at);
+      CREATE INDEX IF NOT EXISTS idx_admin_audit_log_action
+        ON admin_audit_log (action);
+    `);
+  }
+  return auditDb;
+}
+
+export function getReadOnlyState(): ReadOnlyState {
+  return { ...readOnlyState };
+}
+
+export function isReadOnly(): boolean {
+  return readOnlyState.enabled;
+}
+
+export function setReadOnlyState(enabled: boolean, actor: string, reason?: string): ReadOnlyState {
+  readOnlyState = {
+    enabled,
+    reason: reason?.trim() || undefined,
+    changedAt: new Date().toISOString(),
+    changedBy: actor,
+  };
+  return getReadOnlyState();
+}
+
+export function actorFromRequest(req: Request): string {
+  const actorHeader = req.headers["x-admin-actor"];
+  const actor = Array.isArray(actorHeader) ? actorHeader[0] : actorHeader;
+  if (actor?.trim()) return actor.trim();
+  return req.ip || "admin";
+}
+
+function redact(value: unknown): unknown {
+  if (!value || typeof value !== "object") return value;
+  if (Array.isArray(value)) return value.map(redact);
+
+  const redacted: Record<string, unknown> = {};
+  for (const [key, item] of Object.entries(value)) {
+    if (/key|secret|token|authorization|password/i.test(key)) {
+      redacted[key] = "[redacted]";
+    } else {
+      redacted[key] = redact(item);
+    }
+  }
+  return redacted;
+}
+
+export function recordAdminAudit(entry: AdminAuditEntry): void {
+  try {
+    getAuditDb()
+      .prepare(
+        `
+        INSERT INTO admin_audit_log (at, actor, action, target, statusCode, requestId, details)
+        VALUES (@at, @actor, @action, @target, @statusCode, @requestId, @details)
+      `,
+      )
+      .run({
+        at: entry.at,
+        actor: entry.actor,
+        action: entry.action,
+        target: entry.target ?? null,
+        statusCode: entry.statusCode,
+        requestId: entry.requestId ?? null,
+        details: entry.details === undefined ? null : JSON.stringify(redact(entry.details)),
+      });
+  } catch (err) {
+    logger.error({ err, action: entry.action }, "failed to write admin audit entry");
+  }
+}
+
+export function listAdminAuditLog(limit = 200, offset = 0): AdminAuditEntry[] {
+  const rows = getAuditDb()
+    .prepare(
+      `
+      SELECT id, at, actor, action, target, statusCode, requestId, details
+      FROM admin_audit_log
+      ORDER BY id DESC
+      LIMIT ? OFFSET ?
+    `,
+    )
+    .all(Math.min(Math.max(limit, 1), 1000), Math.max(offset, 0)) as Array<
+    AdminAuditEntry & { details: string | null }
+  >;
+
+  return rows.map((row) => ({
+    ...row,
+    details: row.details ? JSON.parse(row.details) : undefined,
+  }));
+}
+
+export function auditLogToCsv(entries: AdminAuditEntry[]): string {
+  const escape = (value: unknown): string => {
+    const text = value === undefined || value === null ? "" : String(value);
+    return `"${text.replace(/"/g, '""')}"`;
+  };
+  const header = ["id", "at", "actor", "action", "target", "statusCode", "requestId", "details"];
+  const rows = entries.map((entry) =>
+    [
+      entry.id,
+      entry.at,
+      entry.actor,
+      entry.action,
+      entry.target,
+      entry.statusCode,
+      entry.requestId,
+      entry.details === undefined ? "" : JSON.stringify(entry.details),
+    ]
+      .map(escape)
+      .join(","),
+  );
+  return [header.join(","), ...rows].join("\n");
+}
+
+export function listAgentsForAdmin(status?: "online" | "offline"): AgentRecord[] {
+  const db = createAgentDb(getAgentDb());
+  return db.list(status ? { status } : undefined);
+}
+
+export function setAgentEnabled(agentId: string, enabled: boolean): AgentRecord | undefined {
+  const db = createAgentDb(getAgentDb());
+  const agent = db.findById(agentId);
+  if (!agent) return undefined;
+
+  const updated: AgentRecord = {
+    ...agent,
+    status: enabled ? "online" : "offline",
+    lastSeenAt: new Date().toISOString(),
+  };
+  db.upsert(updated);
+  return updated;
+}
+
+export interface MaintenanceResult {
+  database: string;
+  ok: boolean;
+  file?: string;
+  error?: string;
+}
+
+function databases(): Array<{ name: string; db: Database.Database }> {
+  return [
+    { name: "tasks", db: getTaskDb() },
+    { name: "agents", db: getAgentDb() },
+    { name: "jobs", db: getJobDb() },
+    { name: "payments", db: getPaymentDb() },
+    { name: "admin_audit", db: getAuditDb() },
+  ];
+}
+
+export function vacuumDatabases(): MaintenanceResult[] {
+  return databases().map(({ name, db }) => {
+    try {
+      db.pragma("wal_checkpoint(TRUNCATE)");
+      db.exec("VACUUM");
+      return { database: name, ok: true };
+    } catch (err) {
+      return {
+        database: name,
+        ok: false,
+        error: err instanceof Error ? err.message : String(err),
+      };
+    }
+  });
+}
+
+export async function backupDatabases(directory?: string): Promise<MaintenanceResult[]> {
+  const targetDir = directory ?? process.env.ADMIN_BACKUP_DIR ?? DEFAULT_BACKUP_DIR;
+  fs.mkdirSync(targetDir, { recursive: true });
+  const stamp = new Date().toISOString().replace(/[:.]/g, "-");
+
+  const results: MaintenanceResult[] = [];
+  for (const { name, db } of databases()) {
+    const file = path.join(targetDir, `${name}-${stamp}.sqlite`);
+    try {
+      await db.backup(file);
+      results.push({ database: name, ok: true, file });
+    } catch (err) {
+      results.push({
+        database: name,
+        ok: false,
+        file,
+        error: err instanceof Error ? err.message : String(err),
+      });
+    }
+  }
+  return results;
+}
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 00000000..fd2ca936
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,11 @@
+# ai-net Documentation
+
+Use these docs as the navigation entry point for implementation and operations work.
+
+| Document | Purpose |
+|---|---|
+| [Architecture](architecture/index.md) | System context, Mermaid diagrams, task lifecycle, payment/escrow sequence, layer responsibilities, and test map |
+| [Design System](design-system.md) | Frontend semantic tokens, theme model, and component conventions |
+| [REST API Reference](API_REFERENCE.md) | Public API endpoints, schemas, errors, and examples |
+| [Node Operators Guide](NODE_OPERATORS_GUIDE.md) | Production/testnet node setup, secrets, deployment, monitoring, backup, and troubleshooting |
+| [End-to-End Testing](e2e-testing.md) | E2E setup and validation |
diff --git a/docs/design-system.md b/docs/design-system.md
new file mode 100644
index 00000000..925b9278
--- /dev/null
+++ b/docs/design-system.md
@@ -0,0 +1,60 @@
+# ai-net Design System
+
+The design system is driven by `frontend/src/styles/tokens.css` and exposed to Tailwind through `frontend/tailwind.config.js`. Components should consume semantic tokens instead of raw colors, radii, shadows, or spacing values.
+
+## Token Groups
+
+| Group | Examples | Usage |
+|---|---|---|
+| Surface | `--surface-canvas`, `--surface-primary`, `--surface-raised`, `--surface-overlay` | Page backgrounds, panels, popovers, scrims |
+| Text | `--text-primary`, `--text-secondary`, `--text-muted`, `--text-inverse` | Body copy, labels, metadata, text on filled accents |
+| Border | `--border-primary`, `--border-subtle`, `--border-muted`, `--border-strong` | Input, panel, table, and divider borders |
+| Accent | `--accent`, `--accent-info`, `--accent-text`, `--accent-surface`, `--accent-border` | Primary actions, focus states, selected states |
+| Status | `--status-success-*`, `--status-warning-*`, `--status-danger-*` | Success, pending, warning, failed, destructive states |
+| Agent | `--agent-research`, `--agent-risk`, `--agent-coding`, `--agent-design`, `--agent-report` | Agent labels, badges, timeline markers |
+| Layout | `--space-*`, `--radius-*`, `--shadow-*`, `--focus-ring` | Component spacing, shape, elevation, focus treatment |
+
+## Theme Model
+
+The dark theme is defined on `:root` and `.theme-dark`; `.theme-light` overrides the same semantic variables. Components should not branch manually for light and dark themes. Prefer:
+
+```css
+.panel {
+  background: var(--surface-primary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+```
+
+Tailwind names mirror the semantic layer:
+
+```tsx
+<section className="bg-surface-primary text-text-primary border border-border-subtle rounded-lg shadow-sm">
+  ...
+</section>
+```
+
+## Component Conventions
+
+Buttons use semantic accent and status tokens. Primary actions use `--gradient-primary` or `--accent`; destructive actions use `--status-danger` and `--status-danger-surface`. Disabled controls use `--text-muted` or `--text-disabled`.
+
+Form fields use `--surface-primary`, `--border-primary`, `--focus-ring`, and status tokens for validation. Use `--radius-lg` or `--radius-xl`; avoid one-off pixel radii.
+
+Cards are for repeated items, modals, and framed tools only. Keep card radius at `--radius-lg` or `--radius-xl`; page sections should be full-width bands or unframed layouts.
+
+Tables, lists, timelines, and dashboards should use `--surface-*`, `--border-*`, and `--text-*` tokens for dense, scan-friendly operational UI.
+
+Agent visuals use the `--agent-*` token set. Do not hard-code agent hex colors in components.
+
+Shadows and glow effects use `--shadow-*`, `--glow-*`, or `--info-glow-*`. Do not add raw `rgba()` shadows in component CSS.
+
+## Review Checklist
+
+Before merging UI changes:
+
+1. Check new CSS/TSX for raw `#hex`, `rgb()`, `rgba()`, one-off shadow values, and arbitrary radii.
+2. Confirm any remaining raw values are user content, canvas drawing internals, or a new value that belongs in `tokens.css`.
+3. Verify light and dark themes inherit from the same semantic token names.
+4. Prefer Tailwind semantic names over arbitrary values when the token exists.
diff --git a/frontend/src/components/agents/AgentDetailModal.module.css b/frontend/src/components/agents/AgentDetailModal.module.css
index 51d6db29..7bd09bd5 100644
--- a/frontend/src/components/agents/AgentDetailModal.module.css
+++ b/frontend/src/components/agents/AgentDetailModal.module.css
@@ -63,22 +63,22 @@
 .status {
   display: inline-block;
   padding: 3px 10px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: capitalize;
 }
 
 .statusActive {
-  background: rgba(16, 185, 129, 0.15);
-  border: 1px solid rgba(16, 185, 129, 0.3);
-  color: #6ee7b7;
+  background: var(--status-success-surface);
+  border: 1px solid var(--status-success-border);
+  color: var(--status-success-text-strong);
 }
 
 .statusInactive {
-  background: rgba(239, 68, 68, 0.12);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  color: #fca5a5;
+  background: var(--status-danger-surface);
+  border: 1px solid var(--status-danger-surface-strong);
+  color: var(--status-danger-text);
 }
 
 .pills {
@@ -88,11 +88,11 @@
 }
 
 .pill {
-  background: rgba(99, 102, 241, 0.15);
-  border: 1px solid rgba(99, 102, 241, 0.3);
-  color: #a5b4fc;
+  background: var(--accent-surface);
+  border: 1px solid var(--accent-border);
+  color: var(--accent-text-soft);
   padding: 4px 12px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: capitalize;
@@ -102,12 +102,12 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  color: #818cf8;
+  color: var(--accent-text-muted);
   text-decoration: none;
 }
 
 .txLink:hover {
-  color: #a5b4fc;
+  color: var(--accent-text-soft);
   text-decoration: underline;
 }
 
diff --git a/frontend/src/components/agents/AgentFilterBar.module.css b/frontend/src/components/agents/AgentFilterBar.module.css
index b30aaf5d..b28cbdfd 100644
--- a/frontend/src/components/agents/AgentFilterBar.module.css
+++ b/frontend/src/components/agents/AgentFilterBar.module.css
@@ -5,9 +5,9 @@
   gap: 24px;
   padding: 16px;
   margin-bottom: 16px;
-  background: rgba(15, 23, 42, 0.4);
+  background: var(--surface-glass-subtle);
   border: 1px solid var(--panel-border);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
 }
 
 .group {
@@ -44,11 +44,11 @@
 }
 
 .capChip {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--white-alpha-04);
   border: 1px solid var(--panel-border);
   color: var(--text-secondary);
   padding: 5px 12px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-size: 0.78rem;
   font-weight: 600;
   box-shadow: none;
@@ -56,7 +56,7 @@
 }
 
 .capChip:hover {
-  background: rgba(99, 102, 241, 0.12);
+  background: var(--accent-surface-muted);
   color: var(--text-primary);
   transform: none;
   box-shadow: none;
@@ -64,9 +64,9 @@
 
 .capChipActive,
 .capChipActive:hover {
-  background: rgba(99, 102, 241, 0.25);
+  background: var(--accent-surface-strong);
   border-color: var(--primary);
-  color: #c7d2fe;
+  color: var(--accent-text);
 }
 
 /* Price slider */
@@ -85,7 +85,7 @@
 .toggle {
   display: inline-flex;
   border: 1px solid var(--panel-border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
 }
 
@@ -101,7 +101,7 @@
 }
 
 .toggleButton:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--white-alpha-05);
   color: var(--text-primary);
   transform: none;
   box-shadow: none;
@@ -110,7 +110,7 @@
 .toggleButtonActive,
 .toggleButtonActive:hover {
   background: var(--primary);
-  color: #fff;
+  color: var(--text-inverse);
 }
 
 /* Actions */
@@ -127,15 +127,15 @@
   justify-content: center;
   width: 34px;
   height: 34px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--white-alpha-04);
   border: 1px solid var(--panel-border);
   color: var(--text-secondary);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   box-shadow: none;
 }
 
 .iconAction:hover {
-  background: rgba(99, 102, 241, 0.15);
+  background: var(--accent-surface);
   color: var(--text-primary);
   transform: none;
   box-shadow: none;
@@ -149,16 +149,16 @@
   border: 1px solid var(--panel-border);
   color: var(--text-secondary);
   padding: 7px 12px;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.8rem;
   font-weight: 600;
   box-shadow: none;
 }
 
 .resetButton:hover {
-  background: rgba(239, 68, 68, 0.12);
-  border-color: rgba(239, 68, 68, 0.3);
-  color: #fca5a5;
+  background: var(--status-danger-surface);
+  border-color: var(--status-danger-surface-strong);
+  color: var(--status-danger-text);
   transform: none;
   box-shadow: none;
 }
diff --git a/frontend/src/components/agents/AgentOutputRenderer.tsx b/frontend/src/components/agents/AgentOutputRenderer.tsx
index 485d93fe..28b22001 100644
--- a/frontend/src/components/agents/AgentOutputRenderer.tsx
+++ b/frontend/src/components/agents/AgentOutputRenderer.tsx
@@ -41,9 +41,9 @@ const AgentOutputRenderer: React.FC<Props> = ({ agentType, result }) => {
           padding: '24px',
           textAlign: 'center',
           color: 'var(--text-secondary)',
-          background: 'rgba(255, 255, 255, 0.02)',
+          background: 'var(--white-alpha-02)',
           borderRadius: '8px',
-          border: '1px dashed rgba(255, 255, 255, 0.1)',
+          border: '1px dashed var(--white-alpha-10)',
         }}
       >
         {t('agent.output.empty')}
diff --git a/frontend/src/components/agents/AgentReputationRadar.tsx b/frontend/src/components/agents/AgentReputationRadar.tsx
index 00cd7882..fe2ba379 100644
--- a/frontend/src/components/agents/AgentReputationRadar.tsx
+++ b/frontend/src/components/agents/AgentReputationRadar.tsx
@@ -20,9 +20,9 @@ export const AgentReputationRadar: React.FC<AgentReputationRadarProps> = ({ dime
       <ResponsiveContainer width="100%" height={250}>
         <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
           <PolarGrid />
-          <PolarAngleAxis dataKey="subject" tick={{ fill: '#8884d8', fontSize: 12 }} />
+          <PolarAngleAxis dataKey="subject" tick={{ fill: 'var(--accent)', fontSize: 12 }} />
           <PolarRadiusAxis angle={30} domain={[0, 100]} tick={false} />
-          <Radar name="Reputation" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
+          <Radar name="Reputation" dataKey="A" stroke="var(--accent)" fill="var(--accent)" fillOpacity={0.6} />
           <Tooltip />
         </RadarChart>
       </ResponsiveContainer>
diff --git a/frontend/src/components/agents/AgentReputationTrend.tsx b/frontend/src/components/agents/AgentReputationTrend.tsx
index a44af598..5702b4d8 100644
--- a/frontend/src/components/agents/AgentReputationTrend.tsx
+++ b/frontend/src/components/agents/AgentReputationTrend.tsx
@@ -25,8 +25,8 @@ export const AgentReputationTrend: React.FC<AgentReputationTrendProps> = ({ hist
           <XAxis dataKey="displayDate" />
           <YAxis domain={[0, 100]} />
           <Tooltip />
-          <Line type="monotone" dataKey="score" stroke="#8884d8" strokeWidth={2} dot={{ r: 3 }} activeDot={{ r: 5 }} />
-          <Brush dataKey="displayDate" height={30} stroke="#8884d8" />
+          <Line type="monotone" dataKey="score" stroke="var(--accent)" strokeWidth={2} dot={{ r: 3 }} activeDot={{ r: 5 }} />
+          <Brush dataKey="displayDate" height={30} stroke="var(--accent)" />
         </LineChart>
       </ResponsiveContainer>
     </div>
diff --git a/frontend/src/components/agents/AgentTable.module.css b/frontend/src/components/agents/AgentTable.module.css
index e2cc842a..e066d1c8 100644
--- a/frontend/src/components/agents/AgentTable.module.css
+++ b/frontend/src/components/agents/AgentTable.module.css
@@ -51,7 +51,7 @@
 }
 
 .row:hover td {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--surface-hover-subtle);
 }
 
 .row:focus-visible {
@@ -77,11 +77,11 @@
 }
 
 .pill {
-  background: rgba(99, 102, 241, 0.15);
-  border: 1px solid rgba(99, 102, 241, 0.3);
-  color: #a5b4fc;
+  background: var(--accent-surface);
+  border: 1px solid var(--accent-border);
+  color: var(--accent-text-soft);
   padding: 3px 10px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-size: 0.72rem;
   font-weight: 600;
   white-space: nowrap;
@@ -106,7 +106,7 @@
 }
 
 .starBg {
-  color: #475569;
+  color: var(--border-strong);
 }
 
 .starFill {
@@ -119,8 +119,8 @@
 }
 
 .starFg {
-  color: #fbbf24;
-  fill: #fbbf24;
+  color: var(--status-warning);
+  fill: var(--status-warning);
 }
 
 .starValue {
@@ -134,22 +134,22 @@
 .status {
   display: inline-block;
   padding: 3px 10px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: capitalize;
 }
 
 .statusActive {
-  background: rgba(16, 185, 129, 0.15);
-  border: 1px solid rgba(16, 185, 129, 0.3);
-  color: #6ee7b7;
+  background: var(--status-success-surface);
+  border: 1px solid var(--status-success-border);
+  color: var(--status-success-text-strong);
 }
 
 .statusInactive {
-  background: rgba(239, 68, 68, 0.12);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  color: #fca5a5;
+  background: var(--status-danger-surface);
+  border: 1px solid var(--status-danger-surface-strong);
+  color: var(--status-danger-text);
 }
 
 .detailsButton {
@@ -157,15 +157,15 @@
   border: 1px solid var(--panel-border);
   color: var(--text-primary);
   padding: 5px 12px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.8rem;
   font-weight: 600;
   box-shadow: none;
 }
 
 .detailsButton:hover {
-  background: rgba(99, 102, 241, 0.15);
-  border-color: rgba(99, 102, 241, 0.4);
+  background: var(--accent-surface);
+  border-color: var(--accent-border-strong);
   transform: none;
   box-shadow: none;
 }
@@ -179,8 +179,8 @@
   display: block;
   height: 14px;
   width: 80%;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-md);
+  background: var(--white-alpha-08);
   animation: agentPulse 1.5s ease-in-out infinite;
 }
 
diff --git a/frontend/src/components/agents/CodingRenderer.tsx b/frontend/src/components/agents/CodingRenderer.tsx
index e45d69e4..456d18ab 100644
--- a/frontend/src/components/agents/CodingRenderer.tsx
+++ b/frontend/src/components/agents/CodingRenderer.tsx
@@ -23,9 +23,9 @@ const CodingRenderer: React.FC<Props> = ({ result }) => {
           padding: '24px',
           textAlign: 'center',
           color: 'var(--text-secondary)',
-          background: 'rgba(255, 255, 255, 0.02)',
+          background: 'var(--white-alpha-02)',
           borderRadius: '8px',
-          border: '1px dashed rgba(255, 255, 255, 0.1)',
+          border: '1px dashed var(--white-alpha-10)',
         }}
       >
         {t('agent.coding.empty')}
@@ -51,8 +51,8 @@ const CodingRenderer: React.FC<Props> = ({ result }) => {
         position: 'relative',
         borderRadius: '8px',
         overflow: 'hidden',
-        border: '1px solid rgba(255, 255, 255, 0.1)',
-        backgroundColor: '#1e1e1e',
+        border: '1px solid var(--white-alpha-10)',
+        backgroundColor: 'var(--surface-black)',
       }}
     >
       <button
@@ -64,9 +64,9 @@ const CodingRenderer: React.FC<Props> = ({ result }) => {
           top: '12px',
           right: '12px',
           zIndex: 10,
-          background: copied ? 'var(--success)' : 'rgba(255, 255, 255, 0.08)',
-          border: '1px solid rgba(255, 255, 255, 0.15)',
-          color: '#fff',
+          background: copied ? 'var(--success)' : 'var(--white-alpha-08)',
+          border: '1px solid var(--white-alpha-15)',
+          color: 'var(--text-inverse)',
           padding: '6px 12px',
           borderRadius: '6px',
           cursor: 'pointer',
diff --git a/frontend/src/components/agents/DAGPreview.module.css b/frontend/src/components/agents/DAGPreview.module.css
index 2d4e05a8..f8326e60 100644
--- a/frontend/src/components/agents/DAGPreview.module.css
+++ b/frontend/src/components/agents/DAGPreview.module.css
@@ -1,9 +1,9 @@
 .container {
   width: 100%;
   min-height: 240px;
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   overflow: hidden;
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--text-primary);
 }
 
 @media (min-width: 768px) {
diff --git a/frontend/src/components/agents/DAGPreview.tsx b/frontend/src/components/agents/DAGPreview.tsx
index 1c5f6441..f1b73477 100644
--- a/frontend/src/components/agents/DAGPreview.tsx
+++ b/frontend/src/components/agents/DAGPreview.tsx
@@ -21,10 +21,10 @@ const PreviewNode = ({ id, data }: NodeProps<PreviewNodeData>) => {
 
   return (
     <div id={id} className="dag-node p-3 rounded-xl border border-slate-700 bg-slate-800 text-slate-100 min-w-[140px] text-center font-semibold shadow-md">
-      <Handle type="target" position={Position.Left} style={{ background: '#475569', width: 6, height: 6 }} />
+      <Handle type="target" position={Position.Left} style={{ background: 'var(--border-strong)', width: 6, height: 6 }} />
       <div className="text-[10px] uppercase tracking-wider opacity-65 mb-0.5">{t('agent.dagPreview')}</div>
       <div className="text-sm font-bold truncate">{data.label}</div>
-      <Handle type="source" position={Position.Right} style={{ background: '#475569', width: 6, height: 6 }} />
+      <Handle type="source" position={Position.Right} style={{ background: 'var(--border-strong)', width: 6, height: 6 }} />
     </div>
   );
 };
@@ -56,10 +56,10 @@ export function DAGPreview({ dagPreview }: DAGPreviewProps) {
         source: edge.source,
         target: edge.target,
         animated: true,
-        style: { stroke: '#4b5563', strokeWidth: 2 },
+        style: { stroke: 'var(--text-secondary)', strokeWidth: 2 },
         markerEnd: {
           type: MarkerType.ArrowClosed,
-          color: '#4b5563',
+          color: 'var(--text-secondary)',
         },
       })),
     [edges],
@@ -72,9 +72,9 @@ export function DAGPreview({ dagPreview }: DAGPreviewProps) {
         style={{
           padding: '24px',
           borderRadius: '12px',
-          border: '1px dashed #cbd5e1',
-          color: '#475569',
-          background: '#f8fafc',
+          border: '1px dashed var(--border-strong)',
+          color: 'var(--border-strong)',
+          background: 'var(--surface-primary)',
           minHeight: 180,
           display: 'flex',
           alignItems: 'center',
@@ -97,7 +97,7 @@ export function DAGPreview({ dagPreview }: DAGPreviewProps) {
         attributionPosition="bottom-left"
       >
         <Controls showInteractive={false} />
-        <Background color="#f8fafc" gap={16} />
+        <Background color="var(--surface-primary)" gap={16} />
       </ReactFlow>
     </div>
   );
diff --git a/frontend/src/components/agents/DesignRenderer.tsx b/frontend/src/components/agents/DesignRenderer.tsx
index cb4d16d7..83fa84af 100644
--- a/frontend/src/components/agents/DesignRenderer.tsx
+++ b/frontend/src/components/agents/DesignRenderer.tsx
@@ -33,16 +33,16 @@ const TreeNode: React.FC<{ node: ComponentNode; depth: number }> = ({ node, dept
           padding: '6px 10px',
           borderRadius: '6px',
           cursor: hasChildren ? 'pointer' : 'default',
-          backgroundColor: 'rgba(255, 255, 255, 0.02)',
+          backgroundColor: 'var(--white-alpha-02)',
           transition: 'background-color 0.2s ease',
           fontSize: '0.9rem',
           userSelect: 'none',
         }}
         onMouseEnter={(e) => {
-          if (hasChildren) e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
+          if (hasChildren) e.currentTarget.style.backgroundColor = 'var(--white-alpha-05)';
         }}
         onMouseLeave={(e) => {
-          if (hasChildren) e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.02)';
+          if (hasChildren) e.currentTarget.style.backgroundColor = 'var(--white-alpha-02)';
         }}
       >
         {hasChildren ? (
@@ -50,18 +50,18 @@ const TreeNode: React.FC<{ node: ComponentNode; depth: number }> = ({ node, dept
             ▶
           </span>
         ) : (
-          <span style={{ fontSize: '0.75rem', color: 'rgba(255, 255, 255, 0.15)' }}>●</span>
+          <span style={{ fontSize: '0.75rem', color: 'var(--white-alpha-15)' }}>●</span>
         )}
-        <span style={{ color: 'rgba(255, 255, 255, 0.3)', fontFamily: 'monospace', fontSize: '0.8rem' }}>&lt;</span>
-        <span style={{ fontWeight: 600, color: hasChildren ? '#38bdf8' : '#e2e8f0' }}>{node.name}</span>
-        <span style={{ color: 'rgba(255, 255, 255, 0.3)', fontFamily: 'monospace', fontSize: '0.8rem' }}>/&gt;</span>
+        <span style={{ color: 'var(--white-alpha-30)', fontFamily: 'monospace', fontSize: '0.8rem' }}>&lt;</span>
+        <span style={{ fontWeight: 600, color: hasChildren ? 'var(--accent-info)' : 'var(--text-primary)' }}>{node.name}</span>
+        <span style={{ color: 'var(--white-alpha-30)', fontFamily: 'monospace', fontSize: '0.8rem' }}>/&gt;</span>
       </div>
 
       {hasChildren && isOpen && (
         <div
           className="tree-node-children"
           style={{
-            borderLeft: '1px solid rgba(255, 255, 255, 0.08)',
+            borderLeft: '1px solid var(--white-alpha-08)',
             marginLeft: '18px',
             paddingLeft: '12px',
           }}
@@ -90,9 +90,9 @@ const DesignRenderer: React.FC<Props> = ({ result }) => {
           padding: '24px',
           textAlign: 'center',
           color: 'var(--text-secondary)',
-          background: 'rgba(255, 255, 255, 0.02)',
-          borderRadius: '8px',
-          border: '1px dashed rgba(255, 255, 255, 0.1)',
+          background: 'var(--white-alpha-02)',
+          borderRadius: 'var(--radius-lg)',
+          border: '1px dashed var(--white-alpha-10)',
         }}
       >
         {t('agent.design.empty')}
@@ -131,9 +131,9 @@ const DesignRenderer: React.FC<Props> = ({ result }) => {
                 onClick={() => lightbox.openLightbox(details.images, idx)}
                 style={{
                   position: 'relative',
-                  backgroundColor: 'rgba(255, 255, 255, 0.03)',
-                  border: '1px solid rgba(255, 255, 255, 0.08)',
-                  borderRadius: '10px',
+                  backgroundColor: 'var(--surface-hover-subtle)',
+                  border: '1px solid var(--white-alpha-08)',
+                  borderRadius: 'var(--radius-xl)',
                   overflow: 'hidden',
                   cursor: 'pointer',
                   transition: 'all 0.2s ease',
@@ -142,16 +142,16 @@ const DesignRenderer: React.FC<Props> = ({ result }) => {
                 data-testid={`design-image-card-${idx}`}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.transform = 'translateY(-2px)';
-                  e.currentTarget.style.borderColor = 'rgba(56, 189, 248, 0.4)';
-                  e.currentTarget.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.4)';
+                  e.currentTarget.style.borderColor = 'var(--info-border)';
+                  e.currentTarget.style.boxShadow = 'var(--shadow-sm)';
                 }}
                 onMouseLeave={(e) => {
                   e.currentTarget.style.transform = 'none';
-                  e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
+                  e.currentTarget.style.borderColor = 'var(--white-alpha-08)';
                   e.currentTarget.style.boxShadow = 'none';
                 }}
               >
-                <div style={{ position: 'relative', height: '160px', overflow: 'hidden', backgroundColor: '#000' }}>
+                <div style={{ position: 'relative', height: '160px', overflow: 'hidden', backgroundColor: 'var(--surface-black)' }}>
                   <img
                     src={img.url}
                     alt={img.alt || img.title || t('a11y.designOutput', { index: idx + 1 })}
@@ -162,14 +162,14 @@ const DesignRenderer: React.FC<Props> = ({ result }) => {
                       position: 'absolute',
                       top: '8px',
                       right: '8px',
-                      background: 'rgba(0, 0, 0, 0.6)',
+                      background: 'var(--surface-scrim)',
                       backdropFilter: 'blur(4px)',
-                      borderRadius: '6px',
+                      borderRadius: 'var(--radius-md)',
                       padding: '4px 8px',
                       display: 'flex',
                       alignItems: 'center',
                       gap: '4px',
-                      color: '#fff',
+                      color: 'var(--text-inverse)',
                       fontSize: '0.75rem',
                     }}
                   >
@@ -209,9 +209,9 @@ const DesignRenderer: React.FC<Props> = ({ result }) => {
                   key={`color-${idx}`}
                   onClick={() => handleCopyColor(hexVal)}
                   style={{
-                    backgroundColor: 'rgba(255, 255, 255, 0.03)',
-                    border: '1px solid rgba(255, 255, 255, 0.05)',
-                    borderRadius: '8px',
+                    backgroundColor: 'var(--surface-hover-subtle)',
+                    border: '1px solid var(--white-alpha-05)',
+                    borderRadius: 'var(--radius-lg)',
                     padding: '8px',
                     cursor: 'pointer',
                     transition: 'all 0.2s ease',
@@ -219,26 +219,26 @@ const DesignRenderer: React.FC<Props> = ({ result }) => {
                   }}
                   onMouseEnter={(e) => {
                     e.currentTarget.style.transform = 'translateY(-2px)';
-                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.15)';
+                    e.currentTarget.style.borderColor = 'var(--white-alpha-15)';
                   }}
                   onMouseLeave={(e) => {
                     e.currentTarget.style.transform = 'none';
-                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.05)';
+                    e.currentTarget.style.borderColor = 'var(--white-alpha-05)';
                   }}
                 >
                   <div
                     style={{
                       height: '50px',
                       backgroundColor: hexVal,
-                      borderRadius: '6px',
+                      borderRadius: 'var(--radius-md)',
                       marginBottom: '8px',
-                      border: '1px solid rgba(255, 255, 255, 0.1)',
+                      border: '1px solid var(--white-alpha-10)',
                     }}
                   />
-                  <div style={{ fontSize: '0.75rem', fontWeight: 600, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', color: '#fff' }}>
+                  <div style={{ fontSize: '0.75rem', fontWeight: 600, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', color: 'var(--text-inverse)' }}>
                     {nameVal}
                   </div>
-                  <div style={{ fontSize: '0.7rem', color: isCopied ? '#10b981' : 'var(--text-secondary)', marginTop: '2px', fontFamily: 'monospace' }}>
+                  <div style={{ fontSize: '0.7rem', color: isCopied ? 'var(--status-success)' : 'var(--text-secondary)', marginTop: '2px', fontFamily: 'monospace' }}>
                     {isCopied ? t('agent.design.copied') : hexVal}
                   </div>
                 </div>
@@ -255,9 +255,9 @@ const DesignRenderer: React.FC<Props> = ({ result }) => {
           <div
             style={{
               padding: '16px',
-              backgroundColor: 'rgba(0, 0, 0, 0.2)',
-              borderRadius: '8px',
-              border: '1px solid rgba(255, 255, 255, 0.05)',
+              backgroundColor: 'var(--surface-black-subtle)',
+              borderRadius: 'var(--radius-lg)',
+              border: '1px solid var(--white-alpha-05)',
               overflowX: 'auto',
             }}
           >
diff --git a/frontend/src/components/agents/ResearchReportRenderer.tsx b/frontend/src/components/agents/ResearchReportRenderer.tsx
index 093ae166..1bbb973b 100644
--- a/frontend/src/components/agents/ResearchReportRenderer.tsx
+++ b/frontend/src/components/agents/ResearchReportRenderer.tsx
@@ -22,9 +22,9 @@ const ResearchReportRenderer: React.FC<Props> = ({ result }) => {
           padding: '24px',
           textAlign: 'center',
           color: 'var(--text-secondary)',
-          background: 'rgba(255, 255, 255, 0.02)',
+          background: 'var(--white-alpha-02)',
           borderRadius: '8px',
-          border: '1px dashed rgba(255, 255, 255, 0.1)',
+          border: '1px dashed var(--white-alpha-10)',
         }}
       >
         {t('agent.research.empty')}
@@ -37,7 +37,7 @@ const ResearchReportRenderer: React.FC<Props> = ({ result }) => {
       className="markdown-body"
       id="research-markdown"
       style={{
-        color: '#f8fafc',
+        color: 'var(--surface-primary)',
         lineHeight: '1.7',
         fontSize: '1rem',
       }}
diff --git a/frontend/src/components/agents/RiskMatrix.tsx b/frontend/src/components/agents/RiskMatrix.tsx
index b78faefa..b44d9926 100644
--- a/frontend/src/components/agents/RiskMatrix.tsx
+++ b/frontend/src/components/agents/RiskMatrix.tsx
@@ -16,17 +16,17 @@ export function getCellSeverity(likelihood: number, impact: number): 'low' | 'me
 }
 
 const severityColors = {
-  low: '#10b981',      // Emerald Green
-  medium: '#eab308',   // Amber Yellow
-  high: '#f97316',     // Orange
-  critical: '#ef4444', // Red
+  low: 'var(--status-success)',      // Emerald Green
+  medium: 'var(--status-warning-strong)',   // Amber Yellow
+  high: 'var(--status-warning)',     // Orange
+  critical: 'var(--status-danger)', // Red
 };
 
 const heatmapColors = {
-  low: 'rgba(16, 185, 129, 0.12)',
-  medium: 'rgba(234, 179, 8, 0.12)',
-  high: 'rgba(249, 115, 22, 0.15)',
-  critical: 'rgba(239, 68, 68, 0.2)',
+  low: 'var(--status-success-surface-muted)',
+  medium: 'var(--status-warning-surface-muted)',
+  high: 'var(--status-warning-surface)',
+  critical: 'var(--status-danger-surface-strong)',
 };
 
 const RiskMatrix: React.FC<Props> = ({ result }) => {
@@ -43,9 +43,9 @@ const RiskMatrix: React.FC<Props> = ({ result }) => {
           padding: '24px',
           textAlign: 'center',
           color: 'var(--text-secondary)',
-          background: 'rgba(255, 255, 255, 0.02)',
-          borderRadius: '8px',
-          border: '1px dashed rgba(255, 255, 255, 0.1)',
+          background: 'var(--white-alpha-02)',
+          borderRadius: 'var(--radius-lg)',
+          border: '1px dashed var(--white-alpha-10)',
         }}
       >
         {t('agent.risk.empty')}
@@ -84,9 +84,9 @@ const RiskMatrix: React.FC<Props> = ({ result }) => {
         style={{
           width: '100%',
           height: 'auto',
-          backgroundColor: 'rgba(0, 0, 0, 0.2)',
-          borderRadius: '12px',
-          border: '1px solid rgba(255, 255, 255, 0.05)',
+          backgroundColor: 'var(--surface-black-subtle)',
+          borderRadius: 'var(--radius-xl)',
+          border: '1px solid var(--white-alpha-05)',
         }}
         id="risk-matrix-svg"
       >
@@ -109,7 +109,7 @@ const RiskMatrix: React.FC<Props> = ({ result }) => {
                 width={cellSize}
                 height={cellSize}
                 fill={fillColor}
-                stroke="rgba(255, 255, 255, 0.05)"
+                stroke="var(--white-alpha-05)"
                 strokeWidth="1"
                 className="risk-cell"
                 data-testid={`risk-cell-${likelihood}-${impact}`}
@@ -125,7 +125,7 @@ const RiskMatrix: React.FC<Props> = ({ result }) => {
           width={gridWidth}
           height={gridHeight}
           fill="none"
-          stroke="rgba(255, 255, 255, 0.15)"
+          stroke="var(--white-alpha-15)"
           strokeWidth="1.5"
         />
 
@@ -172,7 +172,7 @@ const RiskMatrix: React.FC<Props> = ({ result }) => {
         <text
           x={gridPaddingLeft + gridWidth / 2}
           y={svgHeight - 15}
-          fill="#f8fafc"
+          fill="var(--text-primary)"
           fontSize="14"
           textAnchor="middle"
           style={{ fontWeight: 600, letterSpacing: '0.05em' }}
@@ -184,7 +184,7 @@ const RiskMatrix: React.FC<Props> = ({ result }) => {
           transform={`rotate(-90, 18, ${gridPaddingTop + gridHeight / 2})`}
           x={18}
           y={gridPaddingTop + gridHeight / 2}
-          fill="#f8fafc"
+          fill="var(--text-primary)"
           fontSize="14"
           textAnchor="middle"
           style={{ fontWeight: 600, letterSpacing: '0.05em' }}
@@ -265,14 +265,14 @@ const RiskMatrix: React.FC<Props> = ({ result }) => {
             top: `${(hoveredRisk.cy / svgHeight) * 100}%`,
             left: `${(hoveredRisk.cx / svgWidth) * 100}%`,
             transform: 'translate(-50%, -100%) translateY(-12px)',
-            backgroundColor: '#0f172a',
-            color: '#f8fafc',
+            backgroundColor: 'var(--surface-canvas)',
+            color: 'var(--text-primary)',
             border: `1px solid ${severityColors[hoveredRisk.risk.severity || getCellSeverity(hoveredRisk.risk.likelihood, hoveredRisk.risk.impact)]}`,
-            borderRadius: '6px',
+            borderRadius: 'var(--radius-md)',
             padding: '10px 14px',
             fontSize: '0.8rem',
             width: '200px',
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
+            boxShadow: 'var(--shadow-sm)',
             zIndex: 100,
             pointerEvents: 'none',
             lineHeight: '1.4',
@@ -283,8 +283,8 @@ const RiskMatrix: React.FC<Props> = ({ result }) => {
             {hoveredRisk.risk.description}
           </div>
           {hoveredRisk.risk.mitigations && hoveredRisk.risk.mitigations.length > 0 && (
-            <div style={{ color: '#94a3b8', fontSize: '0.75rem', borderTop: '1px solid rgba(255, 255, 255, 0.1)', paddingTop: '4px', marginTop: '4px' }}>
-              <span style={{ fontWeight: 600, color: '#e2e8f0' }}>{t('agent.risk.mitigation')}</span>
+            <div style={{ color: 'var(--text-muted)', fontSize: '0.75rem', borderTop: '1px solid var(--white-alpha-10)', paddingTop: '4px', marginTop: '4px' }}>
+              <span style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{t('agent.risk.mitigation')}</span>
               {hoveredRisk.risk.mitigations[0]}
             </div>
           )}
@@ -297,7 +297,7 @@ const RiskMatrix: React.FC<Props> = ({ result }) => {
               transform: 'translateX(-50%) rotate(45deg)',
               width: '10px',
               height: '10px',
-              backgroundColor: '#0f172a',
+              backgroundColor: 'var(--surface-canvas)',
               borderBottom: `1px solid ${severityColors[hoveredRisk.risk.severity || getCellSeverity(hoveredRisk.risk.likelihood, hoveredRisk.risk.impact)]}`,
               borderRight: `1px solid ${severityColors[hoveredRisk.risk.severity || getCellSeverity(hoveredRisk.risk.likelihood, hoveredRisk.risk.impact)]}`,
             }}
diff --git a/frontend/src/components/agents/TaskSubmissionForm.tsx b/frontend/src/components/agents/TaskSubmissionForm.tsx
index e88a8446..c08c359f 100644
--- a/frontend/src/components/agents/TaskSubmissionForm.tsx
+++ b/frontend/src/components/agents/TaskSubmissionForm.tsx
@@ -128,7 +128,7 @@ export function TaskSubmissionForm() {
             {...register('prompt')}
             rows={6}
             maxLength={1000}
-            style={{ width: '100%', padding: 12, borderRadius: 10, border: '1px solid var(--border-color)' }}
+            style={{ width: '100%', padding: 'var(--space-3)', borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-color)' }}
             aria-invalid={Boolean(errors.prompt)}
             aria-describedby="prompt-error"
           />
@@ -147,7 +147,7 @@ export function TaskSubmissionForm() {
             step="0.1"
             min="0.1"
             {...register('maxBudgetXLM', { valueAsNumber: true })}
-            style={{ width: 180, padding: 12, borderRadius: 10, border: '1px solid var(--border-color)' }}
+            style={{ width: 180, padding: 'var(--space-3)', borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-color)' }}
             aria-invalid={Boolean(errors.maxBudgetXLM)}
             aria-describedby="budget-error"
           />
@@ -179,8 +179,8 @@ export function TaskSubmissionForm() {
                       display: 'flex',
                       alignItems: 'center',
                       gap: 10,
-                      padding: 12,
-                      borderRadius: 10,
+                      padding: 'var(--space-3)',
+                      borderRadius: 'var(--radius-xl)',
                       border: '1px solid var(--border-color)',
                       cursor: 'pointer',
                     }}
@@ -208,7 +208,7 @@ export function TaskSubmissionForm() {
           />
           <div aria-live="polite" id="agentPreferences-error">
             {errors.agentPreferences && (
-              <p style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#b91c1c', marginTop: 8, fontSize: '0.875rem' }}>
+              <p style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--status-danger-strong)', marginTop: 8, fontSize: '0.875rem' }}>
                 <AlertCircle size={16} />
                 {errors.agentPreferences.message}
               </p>
@@ -223,7 +223,7 @@ export function TaskSubmissionForm() {
             disabled={isLoading}
             style={{
               padding: '12px 20px',
-              borderRadius: 10,
+              borderRadius: 'var(--radius-xl)',
               border: 'none',
               background: isLoading ? '#9ca3af' : '#2563eb',
               color: '#ffffff',
@@ -242,10 +242,10 @@ export function TaskSubmissionForm() {
       <section style={{ marginBottom: 24 }}>
         <h2>{t('task.submit.dagTitle')}</h2>
         {isLoading && (
-          <div aria-busy="true" style={{ padding: 24, background: 'var(--bg-secondary)', borderRadius: 12 }}>
-            <div style={{ height: 18, width: '45%', background: 'var(--bg-surface-alt)', borderRadius: 8, marginBottom: 12 }} />
-            <div style={{ height: 18, width: '70%', background: 'var(--bg-surface-alt)', borderRadius: 8, marginBottom: 12 }} />
-            <div style={{ height: 18, width: '55%', background: 'var(--bg-surface-alt)', borderRadius: 8 }} />
+          <div aria-busy="true" style={{ padding: 'var(--space-6)', background: 'var(--bg-secondary)', borderRadius: 'var(--radius-xl)' }}>
+            <div style={{ height: 18, width: '45%', background: 'var(--bg-surface-alt)', borderRadius: 'var(--radius-lg)', marginBottom: 'var(--space-3)' }} />
+            <div style={{ height: 18, width: '70%', background: 'var(--bg-surface-alt)', borderRadius: 'var(--radius-lg)', marginBottom: 'var(--space-3)' }} />
+            <div style={{ height: 18, width: '55%', background: 'var(--bg-surface-alt)', borderRadius: 'var(--radius-lg)' }} />
           </div>
         )}
         {!isLoading && <DAGPreview dagPreview={previewData ?? undefined} />}
@@ -257,7 +257,7 @@ export function TaskSubmissionForm() {
           style={{
             marginTop: 24,
             padding: 16,
-            borderRadius: 12,
+            borderRadius: 'var(--radius-xl)',
             background: 'var(--bg-secondary)',
             color: 'var(--danger)',
             border: '1px solid var(--danger)',
diff --git a/frontend/src/components/common/CommandPalette.module.css b/frontend/src/components/common/CommandPalette.module.css
index 62e35879..c9ad4b87 100644
--- a/frontend/src/components/common/CommandPalette.module.css
+++ b/frontend/src/components/common/CommandPalette.module.css
@@ -1,7 +1,7 @@
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.65);
+  background: var(--surface-scrim);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   display: flex;
@@ -20,12 +20,12 @@
 .modal {
   width: 100%;
   max-width: 560px;
-  background: rgba(30, 41, 59, 0.92);
+  background: var(--surface-panel-translucent);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  border-radius: var(--radius-2xl);
+  border: 1px solid var(--white-alpha-08);
+  box-shadow: var(--shadow-popover), 0 0 0 1px var(--white-alpha-04);
   overflow: hidden;
   max-height: 60vh;
   display: flex;
@@ -37,11 +37,11 @@
   align-items: center;
   gap: 12px;
   padding: 14px 18px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--white-alpha-06);
 }
 
 .searchIcon {
-  color: rgba(148, 163, 184, 0.6);
+  color: var(--text-subtle);
   flex-shrink: 0;
 }
 
@@ -50,7 +50,7 @@
   background: transparent;
   border: none;
   outline: none;
-  color: #e2e8f0;
+  color: var(--text-primary);
   font-size: 16px;
   font-weight: 400;
   font-family: inherit;
@@ -58,14 +58,14 @@
 }
 
 .input::placeholder {
-  color: rgba(148, 163, 184, 0.5);
+  color: var(--text-subtle);
 }
 
 .shortcutHint {
   display: flex;
   align-items: center;
   gap: 4px;
-  color: rgba(148, 163, 184, 0.4);
+  color: var(--text-disabled);
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.5px;
@@ -74,12 +74,12 @@
 .keyHint {
   display: inline-block;
   padding: 2px 8px;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-sm);
+  background: var(--white-alpha-06);
+  border: 1px solid var(--white-alpha-08);
   font-size: 10px;
   font-weight: 600;
-  color: rgba(148, 163, 184, 0.5);
+  color: var(--text-subtle);
   font-family: inherit;
 }
 
@@ -89,16 +89,16 @@
   justify-content: center;
   background: transparent;
   border: none;
-  color: rgba(148, 163, 184, 0.4);
+  color: var(--text-disabled);
   cursor: pointer;
   padding: 4px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   transition: all 0.2s ease;
 }
 
 .closeButton:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: #e2e8f0;
+  background: var(--white-alpha-06);
+  color: var(--text-primary);
 }
 
 .resultsWrapper {
@@ -117,12 +117,12 @@
 }
 
 .resultsWrapper::-webkit-scrollbar-thumb {
-  background: rgba(148, 163, 184, 0.2);
-  border-radius: 4px;
+  background: var(--text-disabled);
+  border-radius: var(--radius-sm);
 }
 
 .resultsWrapper::-webkit-scrollbar-thumb:hover {
-  background: rgba(148, 163, 184, 0.3);
+  background: var(--text-disabled);
 }
 
 .loadingState {
@@ -136,8 +136,8 @@
 .loadingDot {
   width: 6px;
   height: 6px;
-  border-radius: 50%;
-  background: rgba(99, 102, 241, 0.5);
+  border-radius: var(--radius-round);
+  background: var(--accent-surface-strong);
   animation: bounce 1.2s ease-in-out infinite;
 }
 
@@ -170,14 +170,14 @@
 }
 
 .emptyText {
-  color: rgba(148, 163, 184, 0.7);
+  color: var(--text-subtle);
   font-size: 14px;
   font-weight: 500;
   margin: 0;
 }
 
 .emptySubtext {
-  color: rgba(148, 163, 184, 0.4);
+  color: var(--text-disabled);
   font-size: 12px;
   margin: 4px 0 0 0;
 }
@@ -195,7 +195,7 @@
   font-weight: 600;
   letter-spacing: 0.8px;
   text-transform: uppercase;
-  color: rgba(148, 163, 184, 0.35);
+  color: var(--text-disabled);
   padding: 8px 16px 4px 16px;
 }
 
@@ -210,17 +210,17 @@
   cursor: pointer;
   text-align: left;
   transition: background 0.15s ease;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   margin: 0 4px;
   width: calc(100% - 8px);
 }
 
 .resultItem.selected {
-  background: rgba(99, 102, 241, 0.12);
+  background: var(--accent-surface-muted);
 }
 
 .resultItem:hover {
-  background: rgba(99, 102, 241, 0.08);
+  background: var(--accent-surface-muted);
 }
 
 .resultIcon {
@@ -229,9 +229,9 @@
   justify-content: center;
   width: 28px;
   height: 28px;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(148, 163, 184, 0.6);
+  border-radius: var(--radius-md);
+  background: var(--white-alpha-04);
+  color: var(--text-subtle);
   flex-shrink: 0;
 }
 
@@ -242,7 +242,7 @@
 
 .resultTitle {
   font-size: 13px;
-  color: #e2e8f0;
+  color: var(--text-primary);
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
@@ -251,7 +251,7 @@
 
 .resultSubtitle {
   font-size: 11px;
-  color: rgba(148, 163, 184, 0.5);
+  color: var(--text-subtle);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -259,10 +259,10 @@
 
 .resultMetadata {
   font-size: 10px;
-  color: rgba(148, 163, 184, 0.3);
-  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-disabled);
+  background: var(--white-alpha-04);
   padding: 2px 10px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-weight: 500;
   flex-shrink: 0;
 }
@@ -270,7 +270,7 @@
 .resultShortcut {
   display: flex;
   align-items: center;
-  color: rgba(148, 163, 184, 0.3);
+  color: var(--text-disabled);
 }
 
 /* Fuzzy-match highlight: the characters the query actually matched. */
@@ -314,7 +314,7 @@
   .modal {
     max-width: 94%;
     max-height: 80vh;
-    border-radius: 12px;
+    border-radius: var(--radius-xl);
     margin-top: 12px;
   }
 
diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
index 570e2468..ebb90571 100644
--- a/frontend/src/components/common/ErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -29,29 +29,29 @@ function ErrorFallback({ errorCode }: { errorCode: string | null }) {
         minHeight: '400px',
         padding: '40px',
         textAlign: 'center',
-        background: 'var(--panel-bg, rgba(30, 41, 59, 0.7))',
+        background: 'var(--panel-bg, var(--surface-panel-translucent))',
         backdropFilter: 'blur(12px)',
-        border: '1px solid var(--panel-border, rgba(255, 255, 255, 0.08))',
+        border: '1px solid var(--panel-border, var(--white-alpha-08))',
         borderRadius: '16px',
         margin: '40px auto',
         maxWidth: '600px',
-        boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.37)'
+        boxShadow: 'var(--shadow-md)'
       }}
     >
-      <h2 style={{ color: 'var(--danger, #ef4444)', marginBottom: '16px', fontSize: '1.8rem' }}>
+      <h2 style={{ color: 'var(--danger, var(--status-danger))', marginBottom: '16px', fontSize: '1.8rem' }}>
         {t('error.title')}
       </h2>
-      <p style={{ color: 'var(--text-secondary, #94a3b8)', marginBottom: '24px' }}>
+      <p style={{ color: 'var(--text-secondary, var(--text-muted))', marginBottom: '24px' }}>
         {t('error.description')}
       </p>
       <div style={{
-        background: 'rgba(0, 0, 0, 0.2)',
+        background: 'var(--surface-black-subtle)',
         padding: '12px 24px',
         borderRadius: '8px',
         fontFamily: 'monospace',
         fontSize: '1.1rem',
-        color: '#f8fafc',
-        border: '1px dashed rgba(255, 255, 255, 0.1)',
+        color: 'var(--surface-primary)',
+        border: '1px dashed var(--white-alpha-10)',
         marginBottom: '24px'
       }}>
         {t('error.code')} <span id="error-code">{errorCode}</span>
@@ -60,8 +60,8 @@ function ErrorFallback({ errorCode }: { errorCode: string | null }) {
         onClick={() => window.location.reload()}
         style={{
           padding: '10px 20px',
-          background: 'var(--primary, #6366f1)',
-          color: '#ffffff',
+          background: 'var(--primary, var(--accent-secondary))',
+          color: 'var(--text-inverse)',
           border: 'none',
           borderRadius: '8px',
           cursor: 'pointer',
diff --git a/frontend/src/components/common/FormField.tsx b/frontend/src/components/common/FormField.tsx
index 68383153..f63c3b41 100644
--- a/frontend/src/components/common/FormField.tsx
+++ b/frontend/src/components/common/FormField.tsx
@@ -20,14 +20,14 @@ export const FormField = React.forwardRef<HTMLInputElement | HTMLTextAreaElement
 
     let borderColor = 'var(--border-color)';
     if (isInvalid) {
-      borderColor = '#b91c1c'; // Red for invalid
+      borderColor = 'var(--status-danger-strong)'; // Red for invalid
     } else if (isValid) {
-      borderColor = '#16a34a'; // Green for valid
+      borderColor = 'var(--status-success-strong)'; // Green for valid
     }
 
     return (
-      <div style={{ marginBottom: 20 }} className={className}>
-        <label htmlFor={fieldId} style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
+      <div style={{ marginBottom: 'var(--space-5)' }} className={className}>
+        <label htmlFor={fieldId} style={{ display: 'block', marginBottom: 'var(--space-2)', fontWeight: 600 }}>
           {label}
         </label>
         
@@ -38,8 +38,8 @@ export const FormField = React.forwardRef<HTMLInputElement | HTMLTextAreaElement
           aria-describedby={error ? errorId : undefined}
           style={{
             width: '100%',
-            padding: 12,
-            borderRadius: 10,
+            padding: 'var(--space-3)',
+            borderRadius: 'var(--radius-xl)',
             border: `1px solid ${borderColor}`,
             outline: 'none',
             ...props.style,
@@ -48,14 +48,14 @@ export const FormField = React.forwardRef<HTMLInputElement | HTMLTextAreaElement
         />
         
         {helperText && !isInvalid && (
-          <p style={{ marginTop: 8, fontSize: '0.875rem', color: '#6b7280' }}>
+          <p style={{ marginTop: 'var(--space-2)', fontSize: '0.875rem', color: 'var(--text-muted)' }}>
             {helperText}
           </p>
         )}
 
         <div aria-live="polite" id={errorId}>
           {isInvalid && (
-            <p style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#b91c1c', marginTop: 8, fontSize: '0.875rem' }}>
+            <p style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', color: 'var(--status-danger-strong)', marginTop: 'var(--space-2)', fontSize: '0.875rem' }}>
               <AlertCircle size={16} />
               {error}
             </p>
diff --git a/frontend/src/components/common/ImageLightbox.module.css b/frontend/src/components/common/ImageLightbox.module.css
index c8a9b923..9723b013 100644
--- a/frontend/src/components/common/ImageLightbox.module.css
+++ b/frontend/src/components/common/ImageLightbox.module.css
@@ -4,10 +4,10 @@
   z-index: 9999;
   display: flex;
   flex-direction: column;
-  background: rgba(10, 14, 20, 0.88);
+  background: var(--surface-overlay);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  color: var(--text-primary, #F5F7FA);
+  color: var(--text-primary, var(--text-primary));
   user-select: none;
   overflow: hidden;
 }
@@ -17,8 +17,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 24px;
-  background: rgba(17, 21, 29, 0.6);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--surface-glass);
+  border-bottom: 1px solid var(--white-alpha-08);
   z-index: 10;
 }
 
@@ -29,11 +29,11 @@
 }
 
 .counterBadge {
-  background: rgba(56, 189, 248, 0.15);
-  border: 1px solid rgba(56, 189, 248, 0.3);
-  color: #38bdf8;
+  background: var(--info-surface);
+  border: 1px solid var(--info-border);
+  color: var(--accent-info);
   padding: 4px 10px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-size: 0.85rem;
   font-weight: 600;
   font-family: monospace;
@@ -42,7 +42,7 @@
 .imageTitle {
   font-size: 0.95rem;
   font-weight: 600;
-  color: #e2e8f0;
+  color: var(--text-primary);
   max-width: 400px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -59,10 +59,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #f5f7fa;
-  border-radius: 8px;
+  background: var(--white-alpha-05);
+  border: 1px solid var(--white-alpha-10);
+  color: var(--text-primary);
+  border-radius: var(--radius-lg);
   padding: 8px 12px;
   font-size: 0.85rem;
   cursor: pointer;
@@ -71,9 +71,9 @@
 }
 
 .iconBtn:hover {
-  background: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.25);
-  color: #ffffff;
+  background: var(--white-alpha-12);
+  border-color: var(--white-alpha-25);
+  color: var(--text-inverse);
 }
 
 .iconBtn:active {
@@ -86,15 +86,15 @@
 }
 
 .closeBtn {
-  background: rgba(239, 68, 68, 0.15);
-  border-color: rgba(239, 68, 68, 0.3);
-  color: #f87171;
+  background: var(--status-danger-surface);
+  border-color: var(--status-danger-surface-strong);
+  color: var(--status-danger);
 }
 
 .closeBtn:hover {
-  background: rgba(239, 68, 68, 0.3);
-  border-color: rgba(239, 68, 68, 0.5);
-  color: #ffffff;
+  background: var(--status-danger-surface-strong);
+  border-color: var(--status-danger-border-strong);
+  color: var(--text-inverse);
 }
 
 .mainStage {
@@ -124,8 +124,8 @@
   max-width: 85vw;
   max-height: 75vh;
   object-fit: contain;
-  border-radius: 8px;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   pointer-events: auto;
 }
 
@@ -134,10 +134,10 @@
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
-  background: rgba(17, 21, 29, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: #ffffff;
-  border-radius: 50%;
+  background: var(--surface-panel-translucent);
+  border: 1px solid var(--white-alpha-15);
+  color: var(--text-inverse);
+  border-radius: var(--radius-round);
   width: 44px;
   height: 44px;
   display: flex;
@@ -149,8 +149,8 @@
 }
 
 .navBtn:hover {
-  background: rgba(56, 189, 248, 0.3);
-  border-color: #38bdf8;
+  background: var(--info-border);
+  border-color: var(--accent-info);
   transform: translateY(-50%) scale(1.08);
 }
 
@@ -168,8 +168,8 @@
   justify-content: center;
   gap: 10px;
   padding: 12px 24px;
-  background: rgba(17, 21, 29, 0.6);
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--surface-glass);
+  border-top: 1px solid var(--white-alpha-08);
   overflow-x: auto;
   z-index: 10;
 }
@@ -177,7 +177,7 @@
 .thumbItem {
   width: 48px;
   height: 48px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   overflow: hidden;
   border: 2px solid transparent;
   cursor: pointer;
@@ -188,13 +188,13 @@
 
 .thumbItem:hover {
   opacity: 0.9;
-  border-color: rgba(255, 255, 255, 0.4);
+  border-color: var(--border-strong);
 }
 
 .thumbActive {
   opacity: 1;
-  border-color: #38bdf8;
-  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
+  border-color: var(--accent-info);
+  box-shadow: 0 0 10px var(--info-border);
 }
 
 .thumbImg {
diff --git a/frontend/src/components/common/Skeleton.module.css b/frontend/src/components/common/Skeleton.module.css
index e23e525a..32f812c9 100644
--- a/frontend/src/components/common/Skeleton.module.css
+++ b/frontend/src/components/common/Skeleton.module.css
@@ -10,7 +10,7 @@
   background-size: 200% 100%;
   background-repeat: no-repeat;
   animation: shimmer 1.5s ease-in-out infinite;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   color: transparent;
   user-select: none;
   pointer-events: none;
@@ -27,15 +27,15 @@
 
 /* Variants */
 .text {
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .pill {
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
 }
 
 .circular {
-  border-radius: 50%;
+  border-radius: var(--radius-round);
 }
 
 .rectangular {
@@ -46,7 +46,7 @@
 .card {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   padding: 1rem;
 }
 
diff --git a/frontend/src/components/common/Toast.css b/frontend/src/components/common/Toast.css
index 3a597d05..257bc822 100644
--- a/frontend/src/components/common/Toast.css
+++ b/frontend/src/components/common/Toast.css
@@ -16,12 +16,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
   min-width: 280px;
   max-width: 360px;
   padding: 14px 16px;
-  border-radius: 12px;
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-md);
   border: 1px solid transparent;
   background: rgba(15, 23, 42, 0.96);
   color: #f8fafc;
@@ -32,23 +32,27 @@
 }
 
 .toast--success {
-  background: rgba(20, 83, 45, 0.96);
-  border-color: rgba(34, 197, 94, 0.65);
+  background: var(--status-success-surface-muted);
+  border-color: var(--status-success-border);
+  color: var(--status-success-text);
 }
 
 .toast--error {
-  background: rgba(127, 29, 29, 0.96);
-  border-color: rgba(248, 113, 113, 0.7);
+  background: var(--status-danger-surface);
+  border-color: var(--status-danger-border-strong);
+  color: var(--status-danger-text);
 }
 
 .toast--warning {
-  background: rgba(120, 53, 15, 0.96);
-  border-color: rgba(251, 191, 36, 0.7);
+  background: var(--status-warning-surface);
+  border-color: var(--status-warning-border-strong);
+  color: var(--status-warning-text);
 }
 
 .toast--info {
-  background: rgba(30, 41, 59, 0.96);
-  border-color: rgba(96, 165, 250, 0.6);
+  background: var(--info-surface);
+  border-color: var(--info-border);
+  color: var(--accent-info);
 }
 
 .toast__message {
@@ -59,6 +63,7 @@
 .toast__dismiss {
   flex-shrink: 0;
   appearance: none;
+  flex-shrink: 0;
   border: none;
   background: transparent;
   color: inherit;
@@ -87,8 +92,8 @@
 
 @media (max-width: 480px) {
   .toast-container {
-    left: 12px;
-    right: 12px;
+    left: var(--space-3);
+    right: var(--space-3);
     max-width: none;
   }
 
diff --git a/frontend/src/components/dashboard/KpiCard.module.css b/frontend/src/components/dashboard/KpiCard.module.css
index cb4e9507..e97f3961 100644
--- a/frontend/src/components/dashboard/KpiCard.module.css
+++ b/frontend/src/components/dashboard/KpiCard.module.css
@@ -1,7 +1,7 @@
 .card {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 1rem;
   display: flex;
   flex-direction: column;
@@ -10,7 +10,7 @@
 }
 
 .card:hover {
-  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
+  box-shadow: var(--shadow-sm);
 }
 
 .sparkline {
@@ -24,7 +24,7 @@
   background: linear-gradient(90deg, var(--bg-surface-alt) 25%, var(--bg-surface) 50%, var(--bg-surface-alt) 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 @keyframes shimmer {
diff --git a/frontend/src/components/dashboard/NetworkHealthBadge.module.css b/frontend/src/components/dashboard/NetworkHealthBadge.module.css
index d95bbcbd..eb72f445 100644
--- a/frontend/src/components/dashboard/NetworkHealthBadge.module.css
+++ b/frontend/src/components/dashboard/NetworkHealthBadge.module.css
@@ -7,13 +7,13 @@
 .dot {
   width: 10px;
   height: 10px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   display: inline-block;
 }
 
-.green { background-color: #22c55e; }
-.yellow { background-color: #eab308; }
-.red { background-color: #ef4444; }
+.green { background-color: var(--status-success); }
+.yellow { background-color: var(--status-warning-strong); }
+.red { background-color: var(--status-danger); }
 
 .label {
   font-size: 0.875rem;
diff --git a/frontend/src/components/dashboard/RecentTasksTable.module.css b/frontend/src/components/dashboard/RecentTasksTable.module.css
index 65139302..c9538eb7 100644
--- a/frontend/src/components/dashboard/RecentTasksTable.module.css
+++ b/frontend/src/components/dashboard/RecentTasksTable.module.css
@@ -41,7 +41,7 @@
   text-decoration: underline;
 }
 
-.pending { color: #eab308; }
-.completed { color: #22c55e; }
-.failed { color: #ef4444; }
-.default { color: #64748b; }
+.pending { color: var(--status-warning-strong); }
+.completed { color: var(--status-success); }
+.failed { color: var(--status-danger); }
+.default { color: var(--text-muted); }
diff --git a/frontend/src/components/landing/AgentCard.tsx b/frontend/src/components/landing/AgentCard.tsx
index 37952ebc..c736504e 100644
--- a/frontend/src/components/landing/AgentCard.tsx
+++ b/frontend/src/components/landing/AgentCard.tsx
@@ -93,7 +93,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, index }) => {
 
       <div className="flex items-start justify-between mb-3 relative">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-xl bg-background-surface-alt border border-border-subtle flex items-center justify-center group-hover:border-accent-cyan/30 group-hover:shadow-[0_0_12px_rgba(56,189,248,0.15)] transition-all duration-300">
+          <div className="w-10 h-10 rounded-xl bg-background-surface-alt border border-border-subtle flex items-center justify-center group-hover:border-accent-cyan/30 group-hover:shadow-info-glow transition-all duration-300">
             {agent.icon}
           </div>
           <div className="flex flex-col">
diff --git a/frontend/src/components/landing/Footer.tsx b/frontend/src/components/landing/Footer.tsx
index 32ed6db5..3d9de716 100644
--- a/frontend/src/components/landing/Footer.tsx
+++ b/frontend/src/components/landing/Footer.tsx
@@ -83,7 +83,7 @@ const Footer: React.FC = () => {
           {/* Brand */}
           <div className="col-span-2 md:col-span-1">
             <Link to="/" className="flex items-center gap-2.5 mb-3">
-              <div className="w-[28px] h-[28px] rounded-[7px] bg-gradient-primary flex items-center justify-center font-bold text-white text-sm shadow-[0_0_12px_rgba(56,189,248,0.3)]">
+              <div className="w-[28px] h-[28px] rounded-[7px] bg-gradient-primary flex items-center justify-center font-bold text-white text-sm shadow-info-glow">
                 a
               </div>
               <span className="font-bold text-[15px] text-text-primary tracking-wide">ai-net</span>
diff --git a/frontend/src/components/landing/Hero.module.css b/frontend/src/components/landing/Hero.module.css
index e59db16d..d6e69cfd 100644
--- a/frontend/src/components/landing/Hero.module.css
+++ b/frontend/src/components/landing/Hero.module.css
@@ -20,7 +20,7 @@
   width: 100%;
   height: 100%;
   z-index: -1;
-  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
+  background: radial-gradient(circle at center, var(--info-surface) 0%, transparent 70%);
   pointer-events: none;
 }
 
diff --git a/frontend/src/components/landing/Hero.tsx b/frontend/src/components/landing/Hero.tsx
index e29a1b15..8e33ef18 100644
--- a/frontend/src/components/landing/Hero.tsx
+++ b/frontend/src/components/landing/Hero.tsx
@@ -33,7 +33,7 @@ const Hero: React.FC = () => {
         style={{ animationDelay: '100ms' }}
       >
         <div className="absolute inset-0 bg-gradient-primary opacity-20 blur-xl" />
-        <div className="w-[42px] h-[42px] rounded-xl bg-gradient-primary flex items-center justify-center font-bold text-white text-2xl relative z-10 shadow-[0_0_20px_rgba(56,189,248,0.4)]">
+        <div className="w-[42px] h-[42px] rounded-xl bg-gradient-primary flex items-center justify-center font-bold text-white text-2xl relative z-10 shadow-info-glow-strong">
           a
         </div>
       </div>
@@ -43,7 +43,7 @@ const Hero: React.FC = () => {
         className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-background-surface-alt border border-border-subtle mb-8 slide-up"
         style={{ animationDelay: '200ms' }}
       >
-        <div className="w-1.5 h-1.5 rounded-full bg-accent-green shadow-[0_0_8px_rgba(52,211,153,0.6)] animate-pulse" />
+        <div className="w-1.5 h-1.5 rounded-full bg-accent-green shadow-success-glow animate-pulse" />
         <span className="text-xs font-semibold text-accent-green tracking-wide">{t('landing.hero.badge')}</span>
       </div>
 
@@ -76,7 +76,7 @@ const Hero: React.FC = () => {
       >
         <button
           onClick={() => navigate('/tasks/new')}
-          className="group w-full sm:w-auto flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl bg-gradient-primary text-white font-semibold shadow-[0_0_20px_rgba(139,92,246,0.3)] hover:shadow-[0_0_35px_rgba(139,92,246,0.5)] transition-all hover-scale focus-ring"
+          className="group w-full sm:w-auto flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl bg-gradient-primary text-white font-semibold shadow-info-glow hover:shadow-info-glow-strong transition-all hover-scale focus-ring"
         >
           <Sparkles size={18} className="group-hover:rotate-12 transition-transform" />
           <span>{t('landing.hero.startTask')}</span>
diff --git a/frontend/src/components/landing/Navbar.tsx b/frontend/src/components/landing/Navbar.tsx
index 51f6f78b..077587a8 100644
--- a/frontend/src/components/landing/Navbar.tsx
+++ b/frontend/src/components/landing/Navbar.tsx
@@ -66,7 +66,7 @@ const Navbar: React.FC = () => {
 
   return (
     <>
-      <header className="sticky top-0 z-40 flex items-center justify-between px-4 sm:px-8 h-[60px] bg-background-primary/75 backdrop-blur-2xl border-b border-border-subtle/80 shadow-[0_1px_0_rgba(255,255,255,0.02)]">
+      <header className="sticky top-0 z-40 flex items-center justify-between px-4 sm:px-8 h-[60px] bg-background-primary/75 backdrop-blur-2xl border-b border-border-subtle/80 shadow-sm">
         {/* Left: Hamburger + Logo */}
         <div className="flex items-center gap-1.5">
           <motion.button
@@ -89,7 +89,7 @@ const Navbar: React.FC = () => {
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
           >
-            <div className="w-[26px] h-[26px] rounded-[6px] bg-gradient-primary flex items-center justify-center font-bold text-white text-[13px] shadow-[0_0_12px_rgba(56,189,248,0.35)]">
+            <div className="w-[26px] h-[26px] rounded-[6px] bg-gradient-primary flex items-center justify-center font-bold text-white text-[13px] shadow-info-glow">
               a
             </div>
             <span className="font-semibold text-[14px] text-text-primary tracking-wide hidden sm:inline">
@@ -100,7 +100,7 @@ const Navbar: React.FC = () => {
 
         {/* Center: Global Search (Desktop) */}
         <div className="flex-1 max-w-[320px] mx-auto sm:mx-0 sm:flex-none sm:w-[260px] hidden sm:block">
-          <div className="flex items-center w-full h-[32px] rounded-lg border border-border-subtle/60 bg-background-surface/40 hover:bg-background-surface/70 transition-all group focus-within:border-accent-cyan/30 focus-within:bg-background-surface/80 focus-within:shadow-[0_0_10px_rgba(56,189,248,0.05)]">
+          <div className="flex items-center w-full h-[32px] rounded-lg border border-border-subtle/60 bg-background-surface/40 hover:bg-background-surface/70 transition-all group focus-within:border-accent-cyan/30 focus-within:bg-background-surface/80 focus-within:shadow-info-glow-subtle">
             <div className="flex items-center gap-1.5 pl-2.5 pr-1 pointer-events-none">
               <Search size={13} className="text-text-secondary/30 group-focus-within:text-accent-cyan/60 transition-colors" />
             </div>
@@ -132,7 +132,7 @@ const Navbar: React.FC = () => {
           <div className="hidden sm:flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-background-surface/30 border border-border-subtle/50">
             <span className="relative flex w-1.5 h-1.5">
               <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent-green opacity-50" />
-              <span className="relative inline-flex rounded-full w-1.5 h-1.5 bg-accent-green shadow-[0_0_6px_rgba(52,211,153,0.5)]" />
+              <span className="relative inline-flex rounded-full w-1.5 h-1.5 bg-accent-green shadow-success-glow" />
             </span>
             <span className="text-[11px] font-medium text-text-secondary/70 tracking-wide">
               {t('landing.navbar.network')}
@@ -153,7 +153,7 @@ const Navbar: React.FC = () => {
             <div className="flex items-center gap-0.5 bg-background-surface/40 border border-border-subtle/60 rounded-md pl-2 pr-1 py-0.5">
               <span className="relative flex w-1.5 h-1.5">
                 <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent-green opacity-50" />
-                <span className="relative inline-flex rounded-full w-1.5 h-1.5 bg-accent-green shadow-[0_0_6px_rgba(52,211,153,0.5)]" />
+                <span className="relative inline-flex rounded-full w-1.5 h-1.5 bg-accent-green shadow-success-glow" />
               </span>
               <span className="text-[11px] font-medium text-text-primary font-mono tracking-wide mx-1">
                 {truncateKey(publicKey)}
@@ -185,7 +185,7 @@ const Navbar: React.FC = () => {
               whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.97 }}
               onClick={() => navigate('/wallet')}
-              className="group flex items-center gap-1.5 bg-background-surface/40 border border-border-subtle/60 rounded-md px-2.5 py-1 cursor-pointer hover:border-accent-cyan/30 hover:bg-background-surface/70 hover:shadow-[0_0_12px_rgba(56,189,248,0.04)] transition-all"
+              className="group flex items-center gap-1.5 bg-background-surface/40 border border-border-subtle/60 rounded-md px-2.5 py-1 cursor-pointer hover:border-accent-cyan/30 hover:bg-background-surface/70 hover:shadow-info-glow-subtle transition-all"
             >
               <Wallet size={12} className="text-accent-cyan/80 group-hover:text-accent-cyan group-hover:scale-110 transition-all" />
               <span className="text-[11px] font-medium text-text-secondary/60 group-hover:text-text-primary/90 transition-colors hidden sm:inline">
@@ -206,7 +206,7 @@ const Navbar: React.FC = () => {
             exit={{ height: 0, opacity: 0 }}
             transition={{ duration: 0.2 }}
           >
-            <div className="flex items-center h-9 rounded-lg bg-background-surface border border-border-subtle/60 focus-within:border-accent-cyan/30 focus-within:shadow-[0_0_10px_rgba(56,189,248,0.05)] transition-all">
+            <div className="flex items-center h-9 rounded-lg bg-background-surface border border-border-subtle/60 focus-within:border-accent-cyan/30 focus-within:shadow-info-glow-subtle transition-all">
               <Search size={14} className="ml-2.5 text-text-secondary/30" />
               <input
                 ref={mobileSearchRef}
@@ -252,7 +252,7 @@ const Navbar: React.FC = () => {
               transition={{ type: 'spring', damping: 30, stiffness: 320 }}
             >
               <div className="flex items-center gap-2.5 px-3 pb-4 mb-3 border-b border-border-subtle/60">
-                <div className="w-[26px] h-[26px] rounded-[6px] bg-gradient-primary flex items-center justify-center font-bold text-white text-[13px] shadow-[0_0_12px_rgba(56,189,248,0.35)]">
+                <div className="w-[26px] h-[26px] rounded-[6px] bg-gradient-primary flex items-center justify-center font-bold text-white text-[13px] shadow-info-glow">
                   a
                 </div>
                 <div className="flex flex-col">
diff --git a/frontend/src/components/landing/SpecialistAgentsSection.tsx b/frontend/src/components/landing/SpecialistAgentsSection.tsx
index 8139c8ff..706fdbc0 100644
--- a/frontend/src/components/landing/SpecialistAgentsSection.tsx
+++ b/frontend/src/components/landing/SpecialistAgentsSection.tsx
@@ -13,7 +13,7 @@ const mockAgents: AgentData[] = [
     name: 'ResearchGPT',
     type: 'Research',
     description: 'Specializes in deep-dive data collection, market analysis, and summarizing whitepapers across the web3 ecosystem.',
-    icon: <Search size={22} className="text-[#60A5FA]" />,
+    icon: <Search size={22} className="text-[var(--accent-info)]" />,
     tasksCompleted: 1420,
     successRate: 98.5,
     capabilities: ['research', 'report'],
@@ -26,7 +26,7 @@ const mockAgents: AgentData[] = [
     name: 'RiskSentinel',
     type: 'Risk',
     description: 'Analyzes smart contracts for vulnerabilities, flags malicious addresses, and assesses protocol risk metrics.',
-    icon: <ShieldAlert size={22} className="text-[#FBBF24]" />,
+    icon: <ShieldAlert size={22} className="text-[var(--status-warning)]" />,
     tasksCompleted: 850,
     successRate: 99.2,
     capabilities: ['risk', 'research'],
@@ -39,7 +39,7 @@ const mockAgents: AgentData[] = [
     name: 'DevBot',
     type: 'Coding',
     description: 'Writes, reviews, and tests Soroban smart contracts. Fluent in Rust, Python, and TypeScript.',
-    icon: <Code2 size={22} className="text-[#34D399]" />,
+    icon: <Code2 size={22} className="text-[var(--status-success)]" />,
     tasksCompleted: 3105,
     successRate: 97.8,
     capabilities: ['coding', 'research'],
diff --git a/frontend/src/components/layout/Breadcrumb.css b/frontend/src/components/layout/Breadcrumb.css
index 85d03925..b20211a6 100644
--- a/frontend/src/components/layout/Breadcrumb.css
+++ b/frontend/src/components/layout/Breadcrumb.css
@@ -21,24 +21,24 @@
 }
 
 .breadcrumb a {
-  color: var(--primary, #3b82f6);
+  color: var(--primary, var(--accent-info));
   text-decoration: none;
   transition: color 0.2s;
 }
 
 .breadcrumb a:hover {
-  color: var(--primary-dark, #2563eb);
+  color: var(--primary-dark, var(--accent-info));
   text-decoration: underline;
 }
 
 .breadcrumb [aria-current="page"] {
-  color: var(--text-primary, #1a202c);
+  color: var(--text-primary, var(--text-primary));
   font-weight: 500;
 }
 
 .separator {
   margin: 0 8px;
-  color: var(--text-tertiary, #94a3b8);
+  color: var(--text-tertiary, var(--text-muted));
 }
 
 @media (max-width: 767px) {
diff --git a/frontend/src/components/layout/MobileDrawer.css b/frontend/src/components/layout/MobileDrawer.css
index a86ec9c0..5409a83d 100644
--- a/frontend/src/components/layout/MobileDrawer.css
+++ b/frontend/src/components/layout/MobileDrawer.css
@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--surface-black-muted);
   z-index: 1100;
   -webkit-tap-highlight-color: transparent;
 }
@@ -63,7 +63,7 @@
 .drawer-header h2 {
   font-size: 18px;
   font-weight: 600;
-  color: var(--text-primary, #1a202c);
+  color: var(--text-primary);
   margin: 0;
 }
 
@@ -73,18 +73,18 @@
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: var(--bg-secondary, #f1f5f9);
+  background: var(--bg-secondary);
   border: none;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   cursor: pointer;
-  color: var(--text-secondary, #64748b);
+  color: var(--text-secondary, var(--text-muted));
   font-size: 16px;
   transition: all 0.2s;
 }
 
 .close-btn:hover {
-  background: var(--bg-tertiary, #e2e8f0);
-  color: var(--text-primary, #1a202c);
+  background: var(--surface-elevated);
+  color: var(--text-primary);
 }
 
 .drawer-nav {
@@ -130,11 +130,11 @@
   padding: 14px 16px;
   background: none;
   border: none;
-  border-radius: 10px;
+  border-radius: var(--radius-xl);
   text-align: left;
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
-  color: var(--text-secondary, #64748b);
+  color: var(--text-secondary);
   text-decoration: none;
   font-size: 16px;
   font-weight: 500;
@@ -142,17 +142,17 @@
 }
 
 .drawer-nav .nav-item:hover {
-  background: var(--bg-secondary, #f1f5f9);
-  color: var(--text-primary, #1a202c);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
 }
 
 .drawer-nav .nav-item:active {
-  background: var(--bg-tertiary, #e2e8f0);
+  background: var(--surface-elevated);
 }
 
 .drawer-nav .nav-item.active {
-  background: var(--primary-light, rgba(59, 130, 246, 0.1));
-  color: var(--primary, #3b82f6);
+  background: var(--accent-surface);
+  color: var(--primary);
 }
 
 .drawer-nav .nav-icon {
diff --git a/frontend/src/components/layout/Sidebar.css b/frontend/src/components/layout/Sidebar.css
index 5aa624a5..9a6398b6 100644
--- a/frontend/src/components/layout/Sidebar.css
+++ b/frontend/src/components/layout/Sidebar.css
@@ -74,11 +74,11 @@
   padding: 10px 12px;
   background: none;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   text-align: left;
   cursor: pointer;
   transition: all 0.2s;
-  color: var(--text-secondary, #64748b);
+  color: var(--text-secondary);
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
@@ -86,8 +86,8 @@
 }
 
 .nav-item:hover {
-  background: var(--bg-secondary, #f1f5f9);
-  color: var(--text-primary, #1a202c);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
 }
 
 .nav-item.active {
diff --git a/frontend/src/components/layout/TopNav.css b/frontend/src/components/layout/TopNav.css
index 27505d69..f9d5b214 100644
--- a/frontend/src/components/layout/TopNav.css
+++ b/frontend/src/components/layout/TopNav.css
@@ -4,14 +4,14 @@
   left: 0;
   right: 0;
   height: 64px;
-  background: var(--bg-primary, #ffffff);
-  border-bottom: 1px solid var(--border-color, #e2e8f0);
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
   z-index: 1000;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 .nav-left {
@@ -36,7 +36,7 @@
   display: block;
   width: 100%;
   height: 2px;
-  background: var(--text-primary, #1a202c);
+  background: var(--text-primary);
   margin: 2px 0;
   transition: 0.3s;
 }
@@ -49,26 +49,26 @@
   height: 40px;
   background: none;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   cursor: pointer;
-  color: var(--text-secondary, #64748b);
+  color: var(--text-secondary);
   transition: background-color 0.2s;
 }
 
 .sidebar-toggle:hover {
-  background: var(--bg-secondary, #f1f5f9);
+  background: var(--bg-secondary);
 }
 
 .logo {
   font-size: 20px;
   font-weight: 700;
-  color: var(--primary, #3b82f6);
+  color: var(--primary);
 }
 
 .page-title {
   font-size: 18px;
   font-weight: 600;
-  color: var(--text-secondary, #64748b);
+  color: var(--text-secondary);
   margin: 0;
 }
 
@@ -91,25 +91,25 @@
   justify-content: center;
   width: 40px;
   height: 40px;
-  background: var(--bg-surface, #11151d);
-  border: 1px solid var(--border-subtle, #1f2630);
-  border-radius: 10px;
-  color: var(--text-secondary, #8a93a3);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  color: var(--text-secondary);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .notification-bell-btn:hover {
-  background: var(--bg-surface-alt, #161b24);
-  border-color: var(--border-color, #2a3040);
-  color: var(--text-primary, #f5f7fa);
+  background: var(--bg-surface-alt);
+  border-color: var(--border-color);
+  color: var(--text-primary);
   transform: translateY(-1px);
 }
 
 .notification-bell-btn.active {
-  background: rgba(56, 189, 248, 0.1);
-  border-color: rgba(56, 189, 248, 0.4);
-  color: var(--accent-cyan, #38bdf8);
+  background: var(--info-surface);
+  border-color: var(--info-border);
+  color: var(--accent-info);
 }
 
 .notification-badge {
@@ -119,16 +119,16 @@
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
-  border-radius: 9999px;
-  background: #ef4444;
-  color: #ffffff;
+  border-radius: var(--radius-pill);
+  background: var(--status-danger);
+  color: var(--text-inverse);
   font-size: 10px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid var(--bg-primary, #0a0e14);
-  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
+  border: 2px solid var(--bg-primary);
+  box-shadow: var(--glow-danger);
   animation: pulse-badge 2s infinite ease-in-out;
 }
 
@@ -150,23 +150,23 @@
 }
 
 .wallet-chip.connected {
-  background: rgba(34, 197, 94, 0.1);
-  border-color: rgba(34, 197, 94, 0.3);
-  color: #16a34a;
+  background: var(--status-success-surface-muted);
+  border-color: var(--status-success-border);
+  color: var(--status-success-strong);
 }
 
 .wallet-chip.disconnected {
-  background: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.3);
-  color: #dc2626;
+  background: var(--status-danger-surface);
+  border-color: var(--status-danger-surface-strong);
+  color: var(--status-danger);
 }
 
 .disconnect-btn {
   padding: 8px 16px;
-  background: var(--danger, #ef4444);
-  color: white;
+  background: var(--danger);
+  color: var(--text-inverse);
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
@@ -174,7 +174,7 @@
 }
 
 .disconnect-btn:hover {
-  background: #dc2626;
+  background: var(--status-danger);
 }
 
 .language-switcher {
@@ -182,9 +182,9 @@
   align-items: center;
   gap: 2px;
   padding: 2px;
-  border: 1px solid var(--border-color, #e2e8f0);
+  border: 1px solid var(--border-color);
   border-radius: 20px;
-  background: var(--bg-secondary, #f1f5f9);
+  background: var(--bg-secondary);
 }
 
 .language-option {
@@ -194,23 +194,23 @@
   padding: 4px 10px;
   background: none;
   border: none;
-  border-radius: 16px;
+  border-radius: var(--radius-2xl);
   cursor: pointer;
   font-size: 13px;
   font-weight: 500;
-  color: var(--text-secondary, #64748b);
+  color: var(--text-secondary);
   transition: background-color 0.2s, color 0.2s;
 }
 
 .language-option:hover {
-  background: var(--bg-primary, #ffffff);
-  color: var(--text-primary, #1a202c);
+  background: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 .language-option.active {
-  background: var(--bg-primary, #ffffff);
-  color: var(--primary, #3b82f6);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  background: var(--bg-primary);
+  color: var(--primary);
+  box-shadow: var(--shadow-sm);
 }
 
 .language-flag {
@@ -256,4 +256,3 @@
     font-size: 13px;
   }
 }
-
diff --git a/frontend/src/components/layout/TopNav.tsx b/frontend/src/components/layout/TopNav.tsx
index f145088e..0cd12d83 100644
--- a/frontend/src/components/layout/TopNav.tsx
+++ b/frontend/src/components/layout/TopNav.tsx
@@ -198,7 +198,7 @@ const TopNav: React.FC<TopNavProps> = ({
               <span className="wallet-chip connected" id="wallet-pubkey-display" style={{ opacity: 0.6 }}>
                 {truncateKey(publicKey)}
               </span>
-              <span className="wallet-chip" style={{ fontSize: '10px', padding: '2px 6px', background: '#fef3c7', color: '#92400e' }}>
+              <span className="wallet-chip" style={{ fontSize: '10px', padding: '2px 6px', background: 'var(--status-warning-surface-strong)', color: 'var(--status-warning-text)' }}>
                 {t('wallet.reconnectRequired')}
               </span>
             </>
diff --git a/frontend/src/components/notifications/NotificationCenter.css b/frontend/src/components/notifications/NotificationCenter.css
index e082eb98..96e9c0ba 100644
--- a/frontend/src/components/notifications/NotificationCenter.css
+++ b/frontend/src/components/notifications/NotificationCenter.css
@@ -6,12 +6,12 @@
   right: 0;
   width: 380px;
   max-width: calc(100vw - 32px);
-  background: var(--bg-surface, #11151d);
+  background: var(--bg-surface, var(--surface-primary));
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--border-color, #2a3040);
-  border-radius: 16px;
-  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.08);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2xl);
+  box-shadow: var(--shadow-popover);
   z-index: 1100;
   display: flex;
   flex-direction: column;
@@ -24,8 +24,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid var(--border-subtle, #1f2630);
-  background: rgba(22, 27, 36, 0.5);
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-glass-subtle);
 }
 
 .notification-panel-title-group {
@@ -37,7 +37,7 @@
 .notification-panel-title {
   font-size: 1rem;
   font-weight: 700;
-  color: var(--text-primary, #f5f7fa);
+  color: var(--text-primary);
   letter-spacing: -0.01em;
 }
 
@@ -45,10 +45,10 @@
   font-size: 0.72rem;
   font-weight: 700;
   padding: 2px 8px;
-  border-radius: 9999px;
-  background: rgba(56, 189, 248, 0.15);
-  color: var(--accent-cyan, #38bdf8);
-  border: 1px solid rgba(56, 189, 248, 0.3);
+  border-radius: var(--radius-pill);
+  background: var(--info-surface);
+  color: var(--accent-info);
+  border: 1px solid var(--info-border);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -59,18 +59,18 @@
   gap: 6px;
   background: transparent;
   border: none;
-  color: var(--text-secondary, #8a93a3);
+  color: var(--text-secondary);
   font-size: 0.8rem;
   font-weight: 500;
   cursor: pointer;
   padding: 4px 8px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   transition: all 0.2s ease;
 }
 
 .mark-all-read-btn:hover {
-  color: var(--accent-cyan, #38bdf8);
-  background: rgba(56, 189, 248, 0.08);
+  color: var(--accent-info);
+  background: var(--info-surface);
 }
 
 /* Body / List */
@@ -90,12 +90,12 @@
 }
 
 .notification-panel-body::-webkit-scrollbar-thumb {
-  background: var(--border-color, #2a3040);
+  background: var(--border-color);
   border-radius: 3px;
 }
 
 .notification-panel-body::-webkit-scrollbar-thumb:hover {
-  background: var(--text-secondary, #8a93a3);
+  background: var(--text-secondary);
 }
 
 .notification-list {
@@ -110,7 +110,7 @@
   align-items: flex-start;
   gap: 12px;
   padding: 12px 14px;
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   background: transparent;
   border: 1px solid transparent;
   cursor: pointer;
@@ -120,19 +120,19 @@
 }
 
 .notification-item:hover {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: var(--border-subtle, #1f2630);
+  background: var(--white-alpha-04);
+  border-color: var(--border-subtle);
   transform: translateY(-1px);
 }
 
 .notification-item.unread {
-  background: rgba(56, 189, 248, 0.05);
-  border-color: rgba(56, 189, 248, 0.18);
+  background: var(--info-surface);
+  border-color: var(--info-border);
 }
 
 .notification-item.unread:hover {
-  background: rgba(56, 189, 248, 0.09);
-  border-color: rgba(56, 189, 248, 0.28);
+  background: var(--info-surface);
+  border-color: var(--info-border);
 }
 
 .notification-item.read {
@@ -147,37 +147,37 @@
   flex-shrink: 0;
   width: 36px;
   height: 36px;
-  border-radius: 10px;
+  border-radius: var(--radius-xl);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--bg-surface-alt, #161b24);
-  border: 1px solid var(--border-subtle, #1f2630);
+  background: var(--bg-surface-alt);
+  border: 1px solid var(--border-subtle);
   transition: all 0.2s ease;
 }
 
 .notification-icon-wrapper.task {
-  background: rgba(52, 211, 153, 0.12);
-  border-color: rgba(52, 211, 153, 0.3);
-  color: #34d399;
+  background: var(--status-success-surface-muted);
+  border-color: var(--status-success-border);
+  color: var(--status-success);
 }
 
 .notification-icon-wrapper.payment {
-  background: rgba(251, 191, 36, 0.12);
-  border-color: rgba(251, 191, 36, 0.3);
-  color: #fbbf24;
+  background: var(--status-warning-surface-muted);
+  border-color: var(--status-warning-border);
+  color: var(--status-warning);
 }
 
 .notification-icon-wrapper.agent {
-  background: rgba(139, 92, 246, 0.12);
-  border-color: rgba(139, 92, 246, 0.3);
-  color: #a78bfa;
+  background: var(--accent-surface-muted);
+  border-color: var(--accent-border);
+  color: var(--accent-text-strong);
 }
 
 .notification-icon-wrapper.system {
-  background: rgba(56, 189, 248, 0.12);
-  border-color: rgba(56, 189, 248, 0.3);
-  color: #38bdf8;
+  background: var(--info-surface);
+  border-color: var(--info-border);
+  color: var(--accent-info);
 }
 
 .notification-content {
@@ -196,7 +196,7 @@
 .notification-title {
   font-size: 0.88rem;
   font-weight: 600;
-  color: var(--text-primary, #f5f7fa);
+  color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -204,13 +204,13 @@
 
 .notification-time {
   font-size: 0.72rem;
-  color: var(--text-secondary, #8a93a3);
+  color: var(--text-secondary);
   white-space: nowrap;
 }
 
 .notification-description {
   font-size: 0.8rem;
-  color: var(--text-secondary, #8a93a3);
+  color: var(--text-secondary);
   line-height: 1.35;
   margin-bottom: 4px;
   word-break: break-word;
@@ -222,7 +222,7 @@
   gap: 2px;
   font-size: 0.72rem;
   font-weight: 600;
-  color: var(--accent-cyan, #38bdf8);
+  color: var(--accent-info);
   margin-top: 2px;
 }
 
@@ -232,9 +232,9 @@
   right: 14px;
   width: 7px;
   height: 7px;
-  border-radius: 50%;
-  background: var(--accent-cyan, #38bdf8);
-  box-shadow: 0 0 8px var(--accent-cyan, #38bdf8);
+  border-radius: var(--radius-round);
+  background: var(--accent-info);
+  box-shadow: var(--info-glow);
 }
 
 /* Empty State */
@@ -245,32 +245,32 @@
   justify-content: center;
   text-align: center;
   padding: 48px 24px;
-  color: var(--text-secondary, #8a93a3);
+  color: var(--text-secondary);
 }
 
 .empty-state-icon-wrapper {
   width: 56px;
   height: 56px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px dashed var(--border-color, #2a3040);
+  border-radius: var(--radius-2xl);
+  background: var(--surface-hover-subtle);
+  border: 1px dashed var(--border-color);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
-  color: var(--text-secondary, #8a93a3);
+  color: var(--text-secondary);
   opacity: 0.7;
 }
 
 .empty-state-title {
   font-size: 0.95rem;
   font-weight: 600;
-  color: var(--text-primary, #f5f7fa);
+  color: var(--text-primary);
   margin-bottom: 4px;
 }
 
 .empty-state-subtitle {
   font-size: 0.8rem;
-  color: var(--text-secondary, #8a93a3);
+  color: var(--text-secondary);
   max-width: 240px;
 }
diff --git a/frontend/src/components/tasks/TaskComparison.module.css b/frontend/src/components/tasks/TaskComparison.module.css
index 5a631e3b..40646016 100644
--- a/frontend/src/components/tasks/TaskComparison.module.css
+++ b/frontend/src/components/tasks/TaskComparison.module.css
@@ -14,7 +14,7 @@
 .backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--surface-black-strong);
   backdrop-filter: blur(4px);
 }
 
@@ -28,7 +28,7 @@
   border-radius: 18px;
   width: 100%;
   max-width: 1120px;
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
+  box-shadow: var(--shadow-popover);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -108,11 +108,11 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  background: rgba(139, 92, 246, 0.15);
-  border: 1px solid rgba(139, 92, 246, 0.35);
-  color: #c4b5fd;
+  background: var(--accent-surface);
+  border: 1px solid var(--accent-border-strong);
+  color: var(--accent-text);
   padding: 7px 14px;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.78rem;
   font-weight: 600;
   box-shadow: none;
@@ -121,7 +121,7 @@
 }
 
 .exportBtn:hover {
-  background: rgba(139, 92, 246, 0.28);
+  background: var(--accent-surface-strong);
   transform: none;
   box-shadow: none;
 }
@@ -132,9 +132,9 @@
   justify-content: center;
   width: 34px;
   height: 34px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--white-alpha-04);
   border: 1px solid var(--panel-border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   color: var(--text-secondary);
   box-shadow: none;
   transition: background 0.15s, color 0.15s;
@@ -142,9 +142,9 @@
 }
 
 .closeBtn:hover {
-  background: rgba(239, 68, 68, 0.12);
-  border-color: rgba(239, 68, 68, 0.3);
-  color: #fca5a5;
+  background: var(--status-danger-surface);
+  border-color: var(--status-danger-surface-strong);
+  color: var(--status-danger-text);
   transform: none;
   box-shadow: none;
 }
@@ -195,18 +195,18 @@
   justify-content: center;
   width: 28px;
   height: 28px;
-  background: rgba(139, 92, 246, 0.2);
-  border: 1px solid rgba(139, 92, 246, 0.4);
-  border-radius: 8px;
+  background: var(--accent-surface-strong);
+  border: 1px solid var(--accent-border-strong);
+  border-radius: var(--radius-lg);
   font-size: 0.85rem;
   font-weight: 800;
-  color: #c4b5fd;
+  color: var(--accent-text);
 }
 
 .columnB .colLabel {
-  background: rgba(56, 189, 248, 0.15);
-  border-color: rgba(56, 189, 248, 0.35);
-  color: #7dd3fc;
+  background: var(--info-surface);
+  border-color: var(--info-border);
+  color: var(--accent-info);
 }
 
 .colMeta {
@@ -257,9 +257,9 @@
 }
 
 .sectionBody {
-  background: rgba(15, 23, 42, 0.4);
+  background: var(--surface-glass-subtle);
   border: 1px solid var(--panel-border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 12px;
 }
 
@@ -280,9 +280,9 @@
 }
 
 .statCell {
-  background: rgba(15, 23, 42, 0.4);
+  background: var(--surface-glass-subtle);
   border: 1px solid var(--panel-border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 10px 12px;
   display: flex;
   flex-direction: column;
@@ -315,7 +315,7 @@
   font-weight: 700;
   text-transform: capitalize;
   padding: 2px 8px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   border: 1px solid;
   background: transparent;
 }
@@ -330,7 +330,7 @@
 
 .outputNode {
   border: 1px solid var(--panel-border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
 }
 
@@ -339,7 +339,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 6px 12px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--surface-hover-subtle);
   border-bottom: 1px solid var(--panel-border);
   gap: 8px;
 }
@@ -383,16 +383,16 @@
   gap: 6px;
   padding: 8px 12px;
   font-size: 0.76rem;
-  color: #f87171;
-  background: rgba(239, 68, 68, 0.06);
+  color: var(--status-danger);
+  background: var(--status-danger-surface-muted);
 }
 
 /* ─── Diff highlight ─────────────────────────────────────────────── */
 
 .diffMark {
-  background: rgba(245, 158, 11, 0.2);
+  background: var(--status-warning-surface-strong);
   border-radius: 3px;
-  color: #fde68a;
+  color: var(--status-warning-text);
   text-decoration: none;
   padding: 0 2px;
 }
diff --git a/frontend/src/components/tasks/TaskComparison.tsx b/frontend/src/components/tasks/TaskComparison.tsx
index b7837a41..dbad4b1e 100644
--- a/frontend/src/components/tasks/TaskComparison.tsx
+++ b/frontend/src/components/tasks/TaskComparison.tsx
@@ -21,19 +21,27 @@ import styles from './TaskComparison.module.css';
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 const AGENT_COLORS: Record<string, string> = {
-  research: '#38bdf8',
-  risk: '#f59e0b',
-  coding: '#a78bfa',
-  design: '#f472b6',
-  report: '#34d399',
+  research: 'var(--agent-research)',
+  risk: 'var(--agent-risk)',
+  coding: 'var(--agent-coding)',
+  design: 'var(--agent-design)',
+  report: 'var(--agent-report)',
+};
+
+const AGENT_BORDERS: Record<string, string> = {
+  research: 'var(--agent-research-border)',
+  risk: 'var(--agent-risk-border)',
+  coding: 'var(--agent-coding-border)',
+  design: 'var(--agent-design-border)',
+  report: 'var(--agent-report-border)',
 };
 
 function statusColor(status: TaskResponse['status']): string {
   switch (status) {
-    case 'completed': return '#34d399';
-    case 'failed': return '#f87171';
-    case 'running': return '#818cf8';
-    default: return '#fbbf24';
+    case 'completed': return 'var(--status-success)';
+    case 'failed': return 'var(--status-danger-text)';
+    case 'running': return 'var(--accent-text-muted)';
+    default: return 'var(--status-warning)';
   }
 }
 
@@ -188,7 +196,7 @@ const ComparisonColumn: React.FC<ComparisonColumnProps> = ({
                   <span
                     key={t}
                     className={styles.agentPill}
-                    style={{ color: AGENT_COLORS[t] || '#94a3b8', borderColor: `${AGENT_COLORS[t] || '#94a3b8'}44` }}
+                    style={{ color: AGENT_COLORS[t] || 'var(--agent-default)', borderColor: AGENT_BORDERS[t] || 'var(--agent-default-border)' }}
                   >
                     {t}
                   </span>
@@ -209,7 +217,7 @@ const ComparisonColumn: React.FC<ComparisonColumnProps> = ({
               const agentKey = ['research', 'risk', 'coding', 'design', 'report'].find((k) =>
                 agentBase.includes(k)
               );
-              const agentColor = agentKey ? AGENT_COLORS[agentKey] : '#94a3b8';
+              const agentColor = agentKey ? AGENT_COLORS[agentKey] : 'var(--agent-default)';
 
               // Find corresponding node in other task for diff
               const otherNode = otherTask.dag?.[i];
diff --git a/frontend/src/components/tasks/TaskFilterBar.module.css b/frontend/src/components/tasks/TaskFilterBar.module.css
index 651db95a..a15936f6 100644
--- a/frontend/src/components/tasks/TaskFilterBar.module.css
+++ b/frontend/src/components/tasks/TaskFilterBar.module.css
@@ -1,9 +1,9 @@
 /* Status colour tokens used inline */
 :root {
-  --status-amber: #f59e0b;
-  --status-indigo: #6366f1;
-  --status-emerald: #10b981;
-  --status-rose: #ef4444;
+  --status-amber: var(--status-warning);
+  --status-indigo: var(--accent-secondary);
+  --status-emerald: var(--status-success);
+  --status-rose: var(--status-danger);
 }
 
 .bar {
@@ -12,7 +12,7 @@
   align-items: flex-end;
   gap: 20px;
   padding: 16px 20px;
-  background: rgba(15, 23, 42, 0.5);
+  background: var(--surface-glass);
   border: 1px solid var(--panel-border);
   border-radius: 14px;
   margin-bottom: 20px;
@@ -37,9 +37,9 @@
 .searchInput {
   width: 100%;
   padding: 7px 32px 7px 30px;
-  background: rgba(15, 23, 42, 0.6);
+  background: var(--surface-glass);
   border: 1px solid var(--panel-border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   color: var(--text-primary);
   font-size: 0.83rem;
   transition: border-color 0.15s;
@@ -52,7 +52,7 @@
 .searchInput:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
+  box-shadow: 0 0 0 2px var(--accent-surface-strong);
 }
 
 /* Override global input styling for search */
@@ -71,14 +71,14 @@ input[type='search'].searchInput {
   background: transparent;
   border: none;
   color: var(--text-secondary);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 0;
   box-shadow: none;
 }
 
 .clearSearch:hover {
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--white-alpha-08);
   transform: none;
   box-shadow: none;
 }
@@ -107,7 +107,7 @@ input[type='search'].searchInput {
 .toggle {
   display: inline-flex;
   border: 1px solid var(--panel-border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
 }
 
@@ -128,7 +128,7 @@ input[type='search'].searchInput {
 }
 
 .toggleButton:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--white-alpha-05);
   color: var(--text-primary);
   transform: none;
   box-shadow: none;
@@ -137,38 +137,38 @@ input[type='search'].searchInput {
 .toggleButtonActive,
 .toggleButtonActive:hover {
   background: var(--primary);
-  color: #fff;
+  color: var(--text-inverse);
 }
 
 /* Coloured variants – status active states */
 .toggleButton_amber,
 .toggleButton_amber:hover {
-  background: rgba(245, 158, 11, 0.2);
-  color: #fde68a;
+  background: var(--status-warning-surface-strong);
+  color: var(--status-warning-text);
 }
 
 .toggleButton_indigo,
 .toggleButton_indigo:hover {
-  background: rgba(99, 102, 241, 0.25);
-  color: #c7d2fe;
+  background: var(--accent-surface-strong);
+  color: var(--accent-text);
 }
 
 .toggleButton_emerald,
 .toggleButton_emerald:hover {
-  background: rgba(16, 185, 129, 0.2);
-  color: #a7f3d0;
+  background: var(--status-success-surface-strong);
+  color: var(--status-success-text);
 }
 
 .toggleButton_rose,
 .toggleButton_rose:hover {
-  background: rgba(239, 68, 68, 0.2);
-  color: #fca5a5;
+  background: var(--status-danger-surface-strong);
+  color: var(--status-danger-text);
 }
 
 .statusDot {
   width: 6px;
   height: 6px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   flex-shrink: 0;
 }
 
@@ -180,11 +180,11 @@ input[type='search'].searchInput {
 }
 
 .capChip {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--white-alpha-04);
   border: 1px solid var(--panel-border);
   color: var(--text-secondary);
   padding: 4px 11px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-size: 0.76rem;
   font-weight: 600;
   text-transform: capitalize;
@@ -194,7 +194,7 @@ input[type='search'].searchInput {
 }
 
 .capChip:hover {
-  background: rgba(139, 92, 246, 0.1);
+  background: var(--accent-surface-muted);
   color: var(--text-primary);
   transform: none;
   box-shadow: none;
@@ -202,9 +202,9 @@ input[type='search'].searchInput {
 
 .capChipActive,
 .capChipActive:hover {
-  background: rgba(139, 92, 246, 0.25);
+  background: var(--accent-surface-strong);
   border-color: var(--primary);
-  color: #c7d2fe;
+  color: var(--accent-text);
 }
 
 /* ── Date range ── */
@@ -215,9 +215,9 @@ input[type='search'].searchInput {
 }
 
 .dateInput {
-  background: rgba(15, 23, 42, 0.6);
+  background: var(--surface-glass);
   border: 1px solid var(--panel-border);
-  border-radius: 7px;
+  border-radius: var(--radius-lg);
   color: var(--text-primary);
   font-size: 0.78rem;
   padding: 5px 8px;
@@ -258,16 +258,16 @@ input[type='search'].searchInput {
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--white-alpha-04);
   border: 1px solid var(--panel-border);
   color: var(--text-secondary);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   box-shadow: none;
   transition: background 0.15s, color 0.15s;
 }
 
 .iconAction:hover {
-  background: rgba(139, 92, 246, 0.12);
+  background: var(--accent-surface-muted);
   color: var(--text-primary);
   transform: none;
   box-shadow: none;
@@ -281,7 +281,7 @@ input[type='search'].searchInput {
   border: 1px solid var(--panel-border);
   color: var(--text-secondary);
   padding: 6px 11px;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.78rem;
   font-weight: 600;
   box-shadow: none;
@@ -289,9 +289,9 @@ input[type='search'].searchInput {
 }
 
 .resetButton:hover {
-  background: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.3);
-  color: #fca5a5;
+  background: var(--status-danger-surface);
+  border-color: var(--status-danger-surface-strong);
+  color: var(--status-danger-text);
   transform: none;
   box-shadow: none;
 }
diff --git a/frontend/src/components/tasks/TaskTimeline.module.css b/frontend/src/components/tasks/TaskTimeline.module.css
index 151f15b2..d2037ea5 100644
--- a/frontend/src/components/tasks/TaskTimeline.module.css
+++ b/frontend/src/components/tasks/TaskTimeline.module.css
@@ -47,11 +47,11 @@
 
 .entry[aria-selected='true'] .card {
   border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.18);
+  box-shadow: 0 0 0 2px var(--accent-surface);
 }
 
 .entryFailed .card {
-  border-color: rgba(239, 68, 68, 0.3);
+  border-color: var(--status-danger-surface-strong);
 }
 
 /* ─── Connector (dot + line) ──────────────────────────────────────  */
@@ -67,7 +67,7 @@
   flex-shrink: 0;
   width: 28px;
   height: 28px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -78,33 +78,33 @@
 }
 
 .dotPending {
-  background: rgba(245, 158, 11, 0.12);
-  border-color: rgba(245, 158, 11, 0.4);
-  color: #fbbf24;
+  background: var(--status-warning-surface-muted);
+  border-color: var(--status-warning-border-strong);
+  color: var(--status-warning);
 }
 
 .dotRunning {
-  background: rgba(99, 102, 241, 0.18);
-  border-color: rgba(99, 102, 241, 0.6);
-  color: #818cf8;
-  box-shadow: 0 0 10px rgba(99, 102, 241, 0.35);
+  background: var(--accent-surface-strong);
+  border-color: var(--accent-border-strong);
+  color: var(--accent-text-muted);
+  box-shadow: var(--info-glow);
   animation: pulse 2s ease-in-out infinite;
 }
 
 .dotCompleted {
-  background: rgba(16, 185, 129, 0.12);
-  border-color: rgba(16, 185, 129, 0.4);
-  color: #34d399;
+  background: var(--status-success-surface-muted);
+  border-color: var(--status-success-border-strong);
+  color: var(--status-success);
 }
 
 .dotFailed {
-  background: rgba(239, 68, 68, 0.12);
-  border-color: rgba(239, 68, 68, 0.4);
-  color: #f87171;
+  background: var(--status-danger-surface);
+  border-color: var(--status-danger-border-strong);
+  color: var(--status-danger);
 }
 
 .dotSkeleton {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--white-alpha-05);
   border-color: var(--panel-border);
 }
 
@@ -126,7 +126,7 @@
 .card {
   background: var(--bg-surface);
   border: 1px solid var(--panel-border);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   padding: 14px 16px;
   transition: border-color 0.15s, box-shadow 0.15s;
   cursor: default;
@@ -134,7 +134,7 @@
 }
 
 .card:hover {
-  border-color: rgba(139, 92, 246, 0.25);
+  border-color: var(--accent-surface-strong);
 }
 
 /* ─── Card header ───────────────────────────────────────────────── */
@@ -168,9 +168,9 @@
   flex-shrink: 0;
   width: 22px;
   height: 22px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   border: 2px solid var(--panel-border);
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--surface-hover-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -183,20 +183,20 @@
 
 .selectBtn:hover {
   border-color: var(--primary);
-  background: rgba(139, 92, 246, 0.12);
+  background: var(--accent-surface-muted);
   transform: none;
   box-shadow: none;
 }
 
 .selectBtnActive {
   border-color: var(--primary);
-  background: rgba(139, 92, 246, 0.3);
+  background: var(--accent-border);
 }
 
 .selectIndex {
   font-size: 0.7rem;
   font-weight: 800;
-  color: #c7d2fe;
+  color: var(--accent-text);
 }
 
 .selectEmpty {
@@ -241,32 +241,32 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 3px 9px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   white-space: nowrap;
 }
 
 .badgePending {
-  background: rgba(245, 158, 11, 0.12);
-  border: 1px solid rgba(245, 158, 11, 0.3);
-  color: #fbbf24;
+  background: var(--status-warning-surface-muted);
+  border: 1px solid var(--status-warning-border);
+  color: var(--status-warning);
 }
 
 .badgeRunning {
-  background: rgba(99, 102, 241, 0.15);
-  border: 1px solid rgba(99, 102, 241, 0.35);
-  color: #818cf8;
+  background: var(--accent-surface);
+  border: 1px solid var(--accent-border-strong);
+  color: var(--accent-text-muted);
 }
 
 .badgeCompleted {
-  background: rgba(16, 185, 129, 0.12);
-  border: 1px solid rgba(16, 185, 129, 0.3);
-  color: #34d399;
+  background: var(--status-success-surface-muted);
+  border: 1px solid var(--status-success-border);
+  color: var(--status-success);
 }
 
 .badgeFailed {
-  background: rgba(239, 68, 68, 0.12);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  color: #f87171;
+  background: var(--status-danger-surface);
+  border: 1px solid var(--status-danger-surface-strong);
+  color: var(--status-danger);
 }
 
 /* ─── Date / time labels ────────────────────────────────────────── */
@@ -292,7 +292,7 @@
   height: 26px;
   background: transparent;
   border: 1px solid var(--panel-border);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   color: var(--text-secondary);
   box-shadow: none;
   transition: color 0.15s, background 0.15s;
@@ -300,9 +300,9 @@
 }
 
 .detailBtn:hover {
-  background: rgba(56, 189, 248, 0.1);
+  background: var(--info-surface);
   color: var(--accent);
-  border-color: rgba(56, 189, 248, 0.3);
+  border-color: var(--info-border);
   transform: none;
   box-shadow: none;
 }
@@ -312,7 +312,7 @@
 .execBar {
   display: flex;
   height: 4px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
   margin: 10px 0 8px;
   background: var(--panel-border);
@@ -325,13 +325,13 @@
   transition: opacity 0.2s;
 }
 
-.execSegmentPending { background: rgba(245, 158, 11, 0.35); }
+.execSegmentPending { background: var(--status-warning-surface-strong); }
 .execSegmentRunning {
-  background: #6366f1;
+  background: var(--accent-secondary);
   animation: shimmer 1.5s ease-in-out infinite;
 }
-.execSegmentCompleted { background: #10b981; }
-.execSegmentFailed { background: #ef4444; }
+.execSegmentCompleted { background: var(--status-success); }
+.execSegmentFailed { background: var(--status-danger); }
 
 /* ─── Meta row ──────────────────────────────────────────────────── */
 
@@ -353,7 +353,7 @@
   font-size: 0.62rem;
   font-weight: 800;
   padding: 2px 7px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-family: ui-monospace, monospace;
   letter-spacing: 0.04em;
 }
@@ -377,7 +377,7 @@
 .errorSection {
   margin-top: 10px;
   padding-top: 10px;
-  border-top: 1px solid rgba(239, 68, 68, 0.2);
+  border-top: 1px solid var(--status-danger-surface-strong);
 }
 
 .errorToggle {
@@ -386,7 +386,7 @@
   gap: 5px;
   background: transparent;
   border: none;
-  color: #f87171;
+  color: var(--status-danger);
   font-size: 0.75rem;
   font-weight: 600;
   padding: 0;
@@ -395,13 +395,13 @@
 }
 
 .errorToggle:hover {
-  color: #fca5a5;
+  color: var(--status-danger-text);
   transform: none;
   box-shadow: none;
 }
 
 .errorIcon {
-  color: #ef4444;
+  color: var(--status-danger);
 }
 
 .errorDetails {
@@ -415,23 +415,23 @@
   display: flex;
   gap: 8px;
   font-size: 0.75rem;
-  background: rgba(239, 68, 68, 0.06);
-  border: 1px solid rgba(239, 68, 68, 0.15);
-  border-radius: 8px;
+  background: var(--status-danger-surface-muted);
+  border: 1px solid var(--status-danger-surface);
+  border-radius: var(--radius-lg);
   padding: 8px 10px;
 }
 
 .errorNodeId {
   font-weight: 700;
   font-family: monospace;
-  color: #fca5a5;
+  color: var(--status-danger-text);
   white-space: nowrap;
   text-transform: capitalize;
   flex-shrink: 0;
 }
 
 .errorMsg {
-  color: #fecaca;
+  color: var(--status-danger-text);
   word-break: break-word;
 }
 
@@ -472,16 +472,16 @@
 
 .skeletonLine {
   height: 12px;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-md);
+  background: var(--white-alpha-06);
   animation: shimmer 1.5s ease-in-out infinite;
 }
 
 /* ─── Animations ────────────────────────────────────────────────── */
 
 @keyframes pulse {
-  0%, 100% { box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }
-  50%       { box-shadow: 0 0 16px rgba(99, 102, 241, 0.6); }
+  0%, 100% { box-shadow: 0 0 8px var(--accent-border); }
+  50%       { box-shadow: var(--info-glow-strong); }
 }
 
 @keyframes shimmer {
diff --git a/frontend/src/components/tasks/TaskTimeline.tsx b/frontend/src/components/tasks/TaskTimeline.tsx
index 771da990..584f6be1 100644
--- a/frontend/src/components/tasks/TaskTimeline.tsx
+++ b/frontend/src/components/tasks/TaskTimeline.tsx
@@ -22,11 +22,27 @@ import styles from './TaskTimeline.module.css';
 // ─── Agent icon colours ───────────────────────────────────────────────────────
 
 const AGENT_COLORS: Record<string, string> = {
-  research: '#38bdf8', // cyan
-  risk: '#f59e0b',     // amber
-  coding: '#a78bfa',   // violet
-  design: '#f472b6',   // pink
-  report: '#34d399',   // green
+  research: 'var(--agent-research)',
+  risk: 'var(--agent-risk)',
+  coding: 'var(--agent-coding)',
+  design: 'var(--agent-design)',
+  report: 'var(--agent-report)',
+};
+
+const AGENT_SURFACES: Record<string, string> = {
+  research: 'var(--agent-research-surface)',
+  risk: 'var(--agent-risk-surface)',
+  coding: 'var(--agent-coding-surface)',
+  design: 'var(--agent-design-surface)',
+  report: 'var(--agent-report-surface)',
+};
+
+const AGENT_BORDERS: Record<string, string> = {
+  research: 'var(--agent-research-border)',
+  risk: 'var(--agent-risk-border)',
+  coding: 'var(--agent-coding-border)',
+  design: 'var(--agent-design-border)',
+  report: 'var(--agent-report-border)',
 };
 
 const AGENT_ABBR: Record<string, string> = {
@@ -244,9 +260,9 @@ const TimelineEntry: React.FC<TimelineEntryProps> = ({
                   key={type}
                   className={styles.agentBadge}
                   style={{
-                    background: `${AGENT_COLORS[type] || '#94a3b8'}22`,
-                    border: `1px solid ${AGENT_COLORS[type] || '#94a3b8'}44`,
-                    color: AGENT_COLORS[type] || '#94a3b8',
+                    background: AGENT_SURFACES[type] || 'var(--agent-default-surface)',
+                    border: `1px solid ${AGENT_BORDERS[type] || 'var(--agent-default-border)'}`,
+                    color: AGENT_COLORS[type] || 'var(--agent-default)',
                   }}
                   title={type}
                   aria-label={`${type} agent`}
diff --git a/frontend/src/components/wallet/ExportButton.module.css b/frontend/src/components/wallet/ExportButton.module.css
index 8af43fc1..566d5b4b 100644
--- a/frontend/src/components/wallet/ExportButton.module.css
+++ b/frontend/src/components/wallet/ExportButton.module.css
@@ -10,7 +10,7 @@
   color: var(--text-primary);
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   cursor: pointer;
   transition: background 0.15s, opacity 0.15s;
 }
@@ -25,8 +25,8 @@
   min-width: 190px;
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
   overflow: hidden;
   z-index: 20;
 }
@@ -53,6 +53,6 @@
   margin: 0;
   padding: 8px 12px;
   font-size: 0.75rem;
-  color: #dc2626;
+  color: var(--status-danger);
   border-top: 1px solid var(--border-color);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/wallet/PaymentChart.module.css b/frontend/src/components/wallet/PaymentChart.module.css
index 3e87e03b..c3063991 100644
--- a/frontend/src/components/wallet/PaymentChart.module.css
+++ b/frontend/src/components/wallet/PaymentChart.module.css
@@ -12,7 +12,7 @@
   .chartCard {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: var(--radius-xl);
     padding: 20px;
     min-width: 0;
   }
diff --git a/frontend/src/components/wallet/PaymentChart.tsx b/frontend/src/components/wallet/PaymentChart.tsx
index ceaad2c2..def4aec4 100644
--- a/frontend/src/components/wallet/PaymentChart.tsx
+++ b/frontend/src/components/wallet/PaymentChart.tsx
@@ -9,7 +9,7 @@ import { aggregateDailySpend, aggregateByCounterparty } from '../../hooks/useTra
 import { formatDate } from '../../utils/format'
 import styles from './PaymentChart.module.css'
 
-const SLICE_COLORS = ['#6366f1', '#22c55e', '#f59e0b', '#ec4899', '#06b6d4', '#a855f7', '#ef4444', '#64748b']
+const SLICE_COLORS = ['var(--accent-secondary)', 'var(--status-success)', 'var(--status-warning)', 'var(--accent-text-strong)', 'var(--accent-info)', 'var(--accent)', 'var(--status-danger)', 'var(--text-muted)']
 
 interface PaymentChartProps {
   transactions: TransactionEvent[]
@@ -52,7 +52,7 @@ export function PaymentChart({ transactions }: PaymentChartProps) {
                 formatter={(value: number) => [`${value.toFixed(7)} XLM`, t('wallet.chart.spent')]}
                 labelFormatter={(value: string) => formatDate(value, i18n.language)}
               />
-              <Bar dataKey="total" fill="#6366f1" radius={[4, 4, 0, 0]} />
+              <Bar dataKey="total" fill="var(--accent-secondary)" radius={[4, 4, 0, 0]} />
             </BarChart>
           </ResponsiveContainer>
         ) : (
diff --git a/frontend/src/components/wallet/SendXLMForm.module.css b/frontend/src/components/wallet/SendXLMForm.module.css
index 8736865e..7d82a931 100644
--- a/frontend/src/components/wallet/SendXLMForm.module.css
+++ b/frontend/src/components/wallet/SendXLMForm.module.css
@@ -1,7 +1,7 @@
 .container {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   padding: 24px;
   margin-bottom: 24px;
 }
@@ -35,7 +35,7 @@
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.875rem;
   color: var(--text-primary);
   background: var(--bg-secondary);
@@ -45,8 +45,8 @@
 
 .input:focus {
   outline: none;
-  border-color: #6366f1;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+  border-color: var(--accent-secondary);
+  box-shadow: 0 0 0 3px var(--accent-surface);
 }
 
 .input:disabled {
@@ -55,16 +55,16 @@
 }
 
 .inputError {
-  border-color: #ef4444;
+  border-color: var(--status-danger);
 }
 
 .inputError:focus {
-  border-color: #ef4444;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+  border-color: var(--status-danger);
+  box-shadow: 0 0 0 3px var(--status-danger-surface);
 }
 
 .error {
-  color: #dc2626;
+  color: var(--status-danger);
   font-size: 0.8125rem;
   margin: 4px 0 0;
 }
@@ -78,10 +78,10 @@
 .sendButton {
   width: 100%;
   padding: 10px 16px;
-  background: #6366f1;
-  color: #ffffff;
+  background: var(--accent-secondary);
+  color: var(--text-inverse);
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
@@ -89,7 +89,7 @@
 }
 
 .sendButton:hover:not(:disabled) {
-  background: #4f46e5;
+  background: var(--accent-secondary-hover);
 }
 
 .sendButton:disabled {
@@ -100,10 +100,10 @@
 .successMessage {
   margin-top: 16px;
   padding: 12px;
-  background: #f0fdf4;
-  border: 1px solid #86efac;
-  border-radius: 8px;
-  color: #166534;
+  background: var(--status-success-surface-muted);
+  border: 1px solid var(--status-success-border);
+  border-radius: var(--radius-lg);
+  color: var(--status-success-text);
   font-size: 0.875rem;
 }
 
@@ -114,18 +114,18 @@
 }
 
 .txHash code {
-  background: #dcfce7;
+  background: var(--status-success-surface-strong);
   padding: 2px 6px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .dismissButton {
   margin-top: 8px;
   padding: 6px 12px;
-  background: #16a34a;
-  color: #ffffff;
+  background: var(--status-success-strong);
+  color: var(--text-inverse);
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.8125rem;
   cursor: pointer;
 }
@@ -133,7 +133,7 @@
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.5);
+  background: var(--surface-glass);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -142,11 +142,11 @@
 
 .modal {
   background: var(--bg-primary);
-  border-radius: 16px;
+  border-radius: var(--radius-2xl);
   padding: 24px;
   max-width: 440px;
   width: 90%;
-  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
+  box-shadow: var(--shadow-lg);
 }
 
 .modalTitle {
@@ -199,7 +199,7 @@
   background: var(--bg-secondary);
   color: var(--text-secondary);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.875rem;
   cursor: pointer;
   transition: background 0.15s;
@@ -211,10 +211,10 @@
 
 .confirmButton {
   padding: 8px 16px;
-  background: #6366f1;
-  color: #ffffff;
+  background: var(--accent-secondary);
+  color: var(--text-inverse);
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
@@ -222,7 +222,7 @@
 }
 
 .confirmButton:hover:not(:disabled) {
-  background: #4f46e5;
+  background: var(--accent-secondary-hover);
 }
 
 .confirmButton:disabled,
diff --git a/frontend/src/components/wallet/TransactionTable.module.css b/frontend/src/components/wallet/TransactionTable.module.css
index 6aa422ed..2dfe76d6 100644
--- a/frontend/src/components/wallet/TransactionTable.module.css
+++ b/frontend/src/components/wallet/TransactionTable.module.css
@@ -1,7 +1,7 @@
 .container {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   padding: 24px;
   margin-bottom: 24px;
 }
@@ -48,7 +48,7 @@
   width: 100%;
   padding: 8px 10px 8px 32px;
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   background: var(--bg-secondary);
   color: var(--text-primary);
   font-size: 0.8125rem;
@@ -57,8 +57,8 @@
 
 .searchInput:focus {
   outline: none;
-  border-color: #6366f1;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+  border-color: var(--accent-secondary);
+  box-shadow: 0 0 0 3px var(--accent-surface);
 }
 
 .dateFilters {
@@ -81,7 +81,7 @@
 .dateInput {
   padding: 6px 8px;
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background: var(--bg-secondary);
   color: var(--text-primary);
   font-size: 0.75rem;
@@ -115,7 +115,7 @@
 .pageSizeSelect {
   padding: 4px 6px;
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background: var(--bg-secondary);
   color: var(--text-primary);
   font-size: 0.75rem;
@@ -130,7 +130,7 @@
 .pageButton {
   padding: 5px 10px;
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background: var(--bg-secondary);
   color: var(--text-primary);
   font-size: 0.75rem;
@@ -161,7 +161,7 @@
 
 .table {
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
 }
 
@@ -240,20 +240,20 @@
 }
 
 .incoming {
-  color: #16a34a;
+  color: var(--status-success-strong);
 }
 
 .outgoing {
-  color: #dc2626;
+  color: var(--status-danger);
 }
 
 .amountIn {
-  color: #16a34a;
+  color: var(--status-success-strong);
   font-weight: 600;
 }
 
 .amountOut {
-  color: #dc2626;
+  color: var(--status-danger);
   font-weight: 600;
 }
 
@@ -272,14 +272,14 @@
 }
 
 .txLink {
-  color: #6366f1;
+  color: var(--accent-secondary);
   transition: color 0.15s, opacity 0.15s;
   display: inline-flex;
   align-items: center;
 }
 
 .txLink:hover {
-  color: #4f46e5;
+  color: var(--accent-secondary-hover);
   opacity: 0.8;
 }
 
@@ -328,7 +328,7 @@
 .skeletonIcon {
   width: 24px;
   height: 24px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   background: var(--bg-surface-alt);
   animation: pulse 1.5s infinite;
 }
@@ -337,7 +337,7 @@
   flex: 1;
   height: 12px;
   background: var(--bg-surface-alt);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   animation: pulse 1.5s infinite;
 }
 
diff --git a/frontend/src/components/wallet/WalletWizard.module.css b/frontend/src/components/wallet/WalletWizard.module.css
index 44505acc..0b256e6b 100644
--- a/frontend/src/components/wallet/WalletWizard.module.css
+++ b/frontend/src/components/wallet/WalletWizard.module.css
@@ -2,9 +2,9 @@
   max-width: 600px;
   margin: 0 auto;
   padding: 2rem;
-  background: var(--bg-card, #ffffff);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  background: var(--bg-card, var(--text-inverse));
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-sm);
 }
 
 .wizardHeader {
@@ -17,7 +17,7 @@
 .skipButton {
   background: none;
   border: none;
-  color: var(--text-muted, #6b7280);
+  color: var(--text-muted, var(--text-muted));
   cursor: pointer;
   font-size: 0.9rem;
 }
@@ -100,21 +100,21 @@
 
 .progressText {
   font-size: 0.875rem;
-  color: var(--text-muted, #6b7280);
+  color: var(--text-muted, var(--text-muted));
   margin-bottom: 0.5rem;
   text-align: right;
 }
 
 .progressBarBackground {
   height: 8px;
-  background: var(--bg-muted, #e5e7eb);
-  border-radius: 4px;
+  background: var(--bg-muted, var(--border-subtle));
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
 .progressBarFill {
   height: 100%;
-  background: var(--primary, #3b82f6);
+  background: var(--primary, var(--accent-info));
   transition: width 0.3s ease;
 }
 
@@ -132,11 +132,11 @@
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 1rem;
-  color: var(--text-main, #111827);
+  color: var(--text-main, var(--text-primary));
 }
 
 .stepDescription {
-  color: var(--text-muted, #4b5563);
+  color: var(--text-muted, var(--text-secondary));
   margin-bottom: 2rem;
   line-height: 1.5;
 }
@@ -151,25 +151,25 @@
   justify-content: space-between;
   margin-top: 2rem;
   padding-top: 1rem;
-  border-top: 1px solid var(--border, #e5e7eb);
+  border-top: 1px solid var(--border, var(--border-subtle));
 }
 
 .backButton {
   padding: 0.5rem 1rem;
   background: none;
-  border: 1px solid var(--border, #e5e7eb);
-  border-radius: 6px;
+  border: 1px solid var(--border, var(--border-subtle));
+  border-radius: var(--radius-md);
   cursor: pointer;
   font-weight: 500;
-  color: var(--text-main, #374151);
+  color: var(--text-main, var(--border-strong));
 }
 
 .nextButton, .primaryButton {
   padding: 0.5rem 1rem;
-  background: var(--primary, #3b82f6);
+  background: var(--primary, var(--accent-info));
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   font-weight: 500;
 }
@@ -180,15 +180,15 @@
 }
 
 .walletInfo {
-  background: var(--bg-muted, #f3f4f6);
+  background: var(--surface-raised);
   padding: 1rem;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   margin-bottom: 1rem;
   word-break: break-all;
 }
 
 .link {
-  color: var(--primary, #3b82f6);
+  color: var(--primary, var(--accent-info));
   text-decoration: none;
 }
 
@@ -197,7 +197,7 @@
 }
 
 .error {
-  color: #ef4444;
+  color: var(--status-danger);
   font-size: 0.875rem;
   margin-top: 0.5rem;
 }
diff --git a/frontend/src/components/wallet/WalletWizard.tsx b/frontend/src/components/wallet/WalletWizard.tsx
index 11bd83fe..0f78422d 100644
--- a/frontend/src/components/wallet/WalletWizard.tsx
+++ b/frontend/src/components/wallet/WalletWizard.tsx
@@ -49,7 +49,7 @@ export const WalletWizard: React.FC = () => {
             We use the Stellar network for fast, secure, and low-cost transactions.
           </p>
           <div className={styles.illustration}>
-            <Wallet size={64} color="var(--primary, #3b82f6)" />
+            <Wallet size={64} color="var(--primary)" />
           </div>
         </div>
         <div className={styles.buttonGroup}>
@@ -75,7 +75,7 @@ export const WalletWizard: React.FC = () => {
               </div>
             ) : (
               <div>
-                <Download size={48} color="var(--text-muted, #6b7280)" />
+                <Download size={48} color="var(--text-muted, var(--text-muted))" />
                 <p style={{ marginTop: '1rem' }}>
                   Freighter extension not detected.{' '}
                   <a href="https://freighter.app" target="_blank" rel="noreferrer" className={styles.link}>
diff --git a/frontend/src/pages/AgentsPage.module.css b/frontend/src/pages/AgentsPage.module.css
index c278c3c9..85c7ad9e 100644
--- a/frontend/src/pages/AgentsPage.module.css
+++ b/frontend/src/pages/AgentsPage.module.css
@@ -31,10 +31,10 @@
   gap: 16px;
   flex-wrap: wrap;
   padding: 16px 20px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: 12px;
-  color: #fca5a5;
+  background: var(--status-danger-surface);
+  border: 1px solid var(--status-danger-surface-strong);
+  border-radius: var(--radius-xl);
+  color: var(--status-danger-text);
 }
 
 .errorBox p {
@@ -42,17 +42,17 @@
 }
 
 .retryButton {
-  background: rgba(239, 68, 68, 0.2);
-  border: 1px solid rgba(239, 68, 68, 0.4);
-  color: #fecaca;
+  background: var(--status-danger-surface-strong);
+  border: 1px solid var(--status-danger-border-strong);
+  color: var(--status-danger-text);
   padding: 8px 16px;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-weight: 600;
   box-shadow: none;
 }
 
 .retryButton:hover {
-  background: rgba(239, 68, 68, 0.3);
+  background: var(--status-danger-surface-strong);
   transform: none;
   box-shadow: none;
 }
@@ -65,9 +65,9 @@
   gap: 24px;
   padding: 16px;
   margin-bottom: 16px;
-  background: rgba(15, 23, 42, 0.4);
+  background: var(--surface-glass-subtle);
   border: 1px solid var(--panel-border);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
 }
 
 .filterGroupSkeleton {
diff --git a/frontend/src/pages/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage.tsx
index 10b95b83..eb3c2ebb 100644
--- a/frontend/src/pages/NotFoundPage.tsx
+++ b/frontend/src/pages/NotFoundPage.tsx
@@ -47,8 +47,8 @@ export const NotFoundPage: React.FC = () => {
                 <Link to="/dashboard" style={{
                 padding: '0.6rem 1.25rem',
                 borderRadius: '6px',
-                backgroundColor: 'var(--accent-color, var(--primary-color, #3b82f6))',
-                color: 'var(--text-primary, #ffffff)',
+                backgroundColor: 'var(--accent-info)',
+                color: 'var(--text-primary, var(--text-inverse))',
                 fontWeight: '500',
                 fontSize: '0.9rem',
                 textDecoration: 'none',
@@ -60,7 +60,7 @@ export const NotFoundPage: React.FC = () => {
             <Link to="/" style={{
                 padding: '0.6rem 1.25rem',
                 borderRadius: '6px',
-                border: '1px solid var(--border-color, #374151)',
+                border: '1px solid var(--border-color)',
                 backgroundColor: 'transparent',
                 color: 'var(--text-primary)',
                 fontWeight: '500',
@@ -75,4 +75,4 @@ export const NotFoundPage: React.FC = () => {
     );
 };
 
-export default NotFoundPage;
\ No newline at end of file
+export default NotFoundPage;
diff --git a/frontend/src/pages/RendererDemoPage.tsx b/frontend/src/pages/RendererDemoPage.tsx
index bc76ce36..51065450 100644
--- a/frontend/src/pages/RendererDemoPage.tsx
+++ b/frontend/src/pages/RendererDemoPage.tsx
@@ -66,11 +66,11 @@ const dummyRisks: RiskItem[] = [
 
 const dummyDesign = {
   palette: [
-    { name: 'Dark Bg', hex: '#0f172a' },
-    { name: 'Card Slate', hex: '#1e293b' },
-    { name: 'Stellar Blue', hex: '#38bdf8' },
-    { name: 'Green Alert', hex: '#10b981' },
-    { name: 'Red Danger', hex: '#ef4444' }
+    { name: 'Dark Bg', hex: 'var(--surface-canvas)' },
+    { name: 'Card Slate', hex: 'var(--surface-elevated)' },
+    { name: 'Stellar Blue', hex: 'var(--accent-info)' },
+    { name: 'Green Alert', hex: 'var(--status-success)' },
+    { name: 'Red Danger', hex: 'var(--status-danger)' }
   ],
   hierarchy: {
     name: 'AppShell',
diff --git a/frontend/src/pages/TaskDetailPage.tsx b/frontend/src/pages/TaskDetailPage.tsx
index 2ca19749..ce9daf7b 100644
--- a/frontend/src/pages/TaskDetailPage.tsx
+++ b/frontend/src/pages/TaskDetailPage.tsx
@@ -14,7 +14,7 @@ const CustomNode: React.FC<{ id: string; data: { label: string; status: string }
 
   return (
     <div id={id} className={`dag-node ${data.status} h-full flex flex-col justify-between`}>
-      <Handle type="target" position={Position.Left} style={{ background: '#64748b', width: 8, height: 8 }} />
+      <Handle type="target" position={Position.Left} style={{ background: 'var(--text-muted)', width: 8, height: 8 }} />
       <div>
         <div className="text-[10px] uppercase font-extrabold tracking-wider opacity-60 mb-0.5">
           {t('page.task.agentNode')}
@@ -24,7 +24,7 @@ const CustomNode: React.FC<{ id: string; data: { label: string; status: string }
       <div className="node-status text-[9px] font-mono font-bold uppercase tracking-widest mt-2 px-1.5 py-0.5 rounded bg-black/25 inline-block mx-auto">
         {data.status}
       </div>
-      <Handle type="source" position={Position.Right} style={{ background: '#64748b', width: 8, height: 8 }} />
+      <Handle type="source" position={Position.Right} style={{ background: 'var(--text-muted)', width: 8, height: 8 }} />
     </div>
   );
 };
@@ -93,26 +93,26 @@ const TaskDetailPage: React.FC = () => {
   // Construct React Flow nodes dynamically based on node state
   const flowNodes = useMemo<Node[]>(() => {
     return nodes.map((node, index) => {
-      let background = 'rgba(30, 41, 59, 0.7)';
-      let borderColor = 'rgba(255, 255, 255, 0.08)';
+      let background = 'var(--surface-panel-translucent)';
+      let borderColor = 'var(--white-alpha-08)';
       let boxShadow = 'none';
-      let color = '#94a3b8';
+      let color = 'var(--text-muted)';
 
       if (node.status === 'completed') {
-        background = 'rgba(6, 78, 59, 0.8)';
+        background = 'var(--status-success-surface)';
         borderColor = 'var(--success)';
-        boxShadow = '0 0 15px rgba(16, 185, 129, 0.35)';
-        color = '#a7f3d0';
+        boxShadow = 'var(--glow-success)';
+        color = 'var(--status-success-text)';
       } else if (node.status === 'running') {
-        background = 'rgba(30, 27, 75, 0.8)';
+        background = 'var(--accent-surface-strong)';
         borderColor = 'var(--primary)';
-        boxShadow = '0 0 15px rgba(99, 102, 241, 0.45)';
-        color = '#e0e7ff';
+        boxShadow = 'var(--glow-info)';
+        color = 'var(--accent-text)';
       } else if (node.status === 'failed') {
-        background = 'rgba(76, 5, 25, 0.8)';
+        background = 'var(--status-danger-surface-strong)';
         borderColor = 'var(--danger)';
-        boxShadow = '0 0 15px rgba(239, 68, 68, 0.35)';
-        color = '#fecdd3';
+        boxShadow = 'var(--glow-danger)';
+        color = 'var(--status-danger-text)';
       }
 
       const cleanLabel = node.nodeId.replace('node_', '').replace('node-', '');
@@ -127,7 +127,7 @@ const TaskDetailPage: React.FC = () => {
         position: { x: index * 240 + 60, y: 110 },
         style: {
           padding: '12px 16px',
-          borderRadius: '16px',
+          borderRadius: 'var(--radius-2xl)',
           border: '2px solid',
           backgroundColor: background,
           borderColor: borderColor,
@@ -150,16 +150,16 @@ const TaskDetailPage: React.FC = () => {
     nodes.forEach(node => {
       if (node.dependsOn && node.dependsOn.length > 0) {
         node.dependsOn.forEach(depId => {
-          let strokeColor = '#475569';
+          let strokeColor = 'var(--border-strong)';
           let animated = false;
           
           if (node.status === 'completed') {
-            strokeColor = '#10b981'; // green for completed paths
+            strokeColor = 'var(--status-success)'; // green for completed paths
           } else if (node.status === 'running') {
-            strokeColor = '#6366f1'; // blue animated for active paths
+            strokeColor = 'var(--accent-secondary)'; // blue animated for active paths
             animated = true;
           } else if (node.status === 'failed') {
-            strokeColor = '#ef4444'; // red for failed paths
+            strokeColor = 'var(--status-danger)'; // red for failed paths
           }
 
           edges.push({
@@ -187,7 +187,7 @@ const TaskDetailPage: React.FC = () => {
     return (
       <div className="glass-panel border-rose-500/30 text-center py-12">
         <AlertCircle className="text-rose-500 mx-auto mb-4" size={48} />
-        <h2 className="text-xl font-bold text-slate-100 mb-2">{t('page.task.errorTitle')}</h2>
+        <h2 className="text-xl font-bold text-[var(--text-primary)] mb-2">{t('page.task.errorTitle')}</h2>
         <p className="text-rose-300/80 mb-6">{error.message}</p>
         <button onClick={refetch} className="flex items-center gap-2 mx-auto">
           <RefreshCw size={16} />
@@ -202,25 +202,25 @@ const TaskDetailPage: React.FC = () => {
     switch (wsStatus) {
       case 'connected':
         return {
-          bg: 'rgba(16, 185, 129, 0.15)',
-          border: 'rgba(16, 185, 129, 0.3)',
-          color: '#a7f3d0',
+          bg: 'var(--status-success-surface)',
+          border: 'var(--status-success-border)',
+          color: 'var(--status-success-text)',
           label: t('page.task.ws.connected'),
         };
       case 'connecting':
         return {
-          bg: 'rgba(245, 158, 11, 0.15)',
-          border: 'rgba(245, 158, 11, 0.3)',
-          color: '#fde68a',
+          bg: 'var(--status-warning-surface)',
+          border: 'var(--status-warning-border)',
+          color: 'var(--status-warning-text)',
           label: t('page.task.ws.connecting'),
         };
       case 'error':
       case 'disconnected':
       default:
         return {
-          bg: 'rgba(239, 68, 68, 0.15)',
-          border: 'rgba(239, 68, 68, 0.3)',
-          color: '#fca5a5',
+          bg: 'var(--status-danger-surface)',
+          border: 'var(--status-danger-border)',
+          color: 'var(--status-danger-text)',
           label: t('page.task.ws.disconnected'),
         };
     }
@@ -236,7 +236,7 @@ const TaskDetailPage: React.FC = () => {
           <AlertCircle className="text-rose-400 mt-0.5 shrink-0" size={20} />
           <div>
             <h4 className="font-bold text-sm">{t('page.task.failedTitle')}</h4>
-            <p className="text-xs text-rose-300 mt-0.5">
+            <p className="text-xs text-[var(--status-danger-text)] mt-0.5">
               <Trans
                 i18nKey="page.task.failedBody"
                 values={{
@@ -256,7 +256,7 @@ const TaskDetailPage: React.FC = () => {
           <CheckCircle2 className="text-emerald-400 mt-0.5 shrink-0" size={20} />
           <div>
             <h4 className="font-bold text-sm">{t('page.task.completedTitle')}</h4>
-            <p className="text-xs text-emerald-300 mt-0.5">
+            <p className="text-xs text-[var(--status-success-text)] mt-0.5">
               {t('page.task.completedBody')}
             </p>
           </div>
@@ -287,7 +287,7 @@ const TaskDetailPage: React.FC = () => {
             {t('page.task.taskId', { id })}
           </p>
           {task?.prompt && (
-            <p className="text-sm text-slate-300 mt-3 italic border-l-2 border-indigo-500 pl-3">
+            <p className="text-sm text-[var(--text-muted)] mt-3 italic border-l-2 border-[var(--accent-secondary)] pl-3">
               "{task.prompt}"
             </p>
           )}
@@ -297,13 +297,13 @@ const TaskDetailPage: React.FC = () => {
           <div className="text-right hidden sm:block">
             <div className="text-[10px] uppercase font-bold text-[var(--text-secondary)]">{t('common.status')}</div>
             <div className={`text-xs font-extrabold capitalize mt-0.5 ${
-              task?.status === 'completed' ? 'text-emerald-400' :
-              task?.status === 'failed' ? 'text-rose-400' : 'text-indigo-400'
+              task?.status === 'completed' ? 'text-[var(--status-success)]' :
+              task?.status === 'failed' ? 'text-[var(--status-danger)]' : 'text-[var(--accent-secondary)]'
             }`}>
               {task?.status || 'queued'}
             </div>
           </div>
-          <button onClick={refetch} className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 transition">
+          <button onClick={refetch} className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg bg-[var(--surface-elevated)] hover:bg-[var(--surface-muted)] border border-[var(--border-strong)] transition">
             <RefreshCw size={12} />
             <span>{t('page.task.sync')}</span>
           </button>
@@ -313,14 +313,14 @@ const TaskDetailPage: React.FC = () => {
       {/* DAG Graph Panel */}
       <div className="glass-panel relative flex flex-col">
         <div className="flex items-center gap-2 mb-3">
-          <Play size={16} className="text-indigo-400" />
+          <Play size={16} className="text-[var(--accent-secondary)]" />
           <h3 className="text-md font-semibold text-[var(--text-primary)]">{t('page.task.dagTitle')}</h3>
-          <span className="text-[10px] text-slate-500 ml-auto">{t('page.task.dagHint')}</span>
+          <span className="text-[10px] text-[var(--text-muted)] ml-auto">{t('page.task.dagHint')}</span>
         </div>
         
         <div 
           id="dag-preview"
-          className="w-full bg-slate-950/40 rounded-xl border border-[var(--panel-border)] overflow-hidden relative"
+          className="w-full bg-[var(--surface-glass-subtle)] rounded-xl border border-[var(--panel-border)] overflow-hidden relative"
           style={{ height: '280px' }}
         >
           {flowNodes.length > 0 ? (
@@ -340,11 +340,11 @@ const TaskDetailPage: React.FC = () => {
               preventScrolling={true}
               attributionPosition="bottom-left"
             >
-              <Background color="#1e293b" gap={16} size={1} />
+              <Background color="var(--surface-elevated)" gap={16} size={1} />
               <Controls showInteractive={false} />
             </ReactFlow>
           ) : (
-            <div className="flex items-center justify-center h-full text-slate-500">
+            <div className="flex items-center justify-center h-full text-[var(--text-muted)]">
               {t('page.task.dagEmpty')}
             </div>
           )}
diff --git a/frontend/src/pages/WalletPage.module.css b/frontend/src/pages/WalletPage.module.css
index ff905d52..67202980 100644
--- a/frontend/src/pages/WalletPage.module.css
+++ b/frontend/src/pages/WalletPage.module.css
@@ -28,7 +28,7 @@
 .connectCard {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   padding: 32px;
   max-width: 440px;
 }
@@ -45,7 +45,7 @@
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.875rem;
   font-family: monospace;
   background: var(--bg-secondary);
@@ -55,18 +55,18 @@
 
 .secretInput:focus {
   outline: none;
-  border-color: #6366f1;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+  border-color: var(--accent-secondary);
+  box-shadow: 0 0 0 3px var(--accent-surface);
 }
 
 .connectButton {
   width: 100%;
   margin-top: 16px;
   padding: 10px 16px;
-  background: #6366f1;
-  color: #ffffff;
+  background: var(--accent-secondary);
+  color: var(--text-inverse);
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
@@ -74,7 +74,7 @@
 }
 
 .connectButton:hover:not(:disabled) {
-  background: #4f46e5;
+  background: var(--accent-secondary-hover);
 }
 
 .connectButton:disabled {
@@ -86,10 +86,10 @@
 .freighterButton {
   width: 100%;
   padding: 10px 16px;
-  background: #0f172a;
-  color: #ffffff;
+  background: var(--surface-canvas);
+  color: var(--text-inverse);
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
@@ -97,7 +97,7 @@
 }
 
 .freighterButton:hover:not(:disabled) {
-  background: #1e293b;
+  background: var(--surface-elevated);
 }
 
 .freighterButton:disabled {
@@ -110,9 +110,9 @@
   display: inline-block;
   margin-bottom: 12px;
   padding: 3px 8px;
-  background: #ecfdf5;
-  color: #059669;
-  border-radius: 4px;
+  background: var(--status-success-surface);
+  color: var(--status-success-strong);
+  border-radius: var(--radius-sm);
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
@@ -147,7 +147,7 @@
 }
 
 .link {
-  color: #6366f1;
+  color: var(--accent-secondary);
   text-decoration: none;
   font-weight: 500;
 }
@@ -159,10 +159,10 @@
 /* Security warning */
 .securityWarning {
   font-size: 0.75rem;
-  color: #f59e0b;
-  background: #fffbeb;
-  border: 1px solid #fde68a;
-  border-radius: 6px;
+  color: var(--status-warning);
+  background: var(--status-warning-surface);
+  border: 1px solid var(--status-warning-text);
+  border-radius: var(--radius-md);
   padding: 8px 10px;
   margin: 8px 0 0;
   line-height: 1.4;
@@ -173,8 +173,8 @@
   display: inline-block;
   margin-top: 6px;
   padding: 2px 8px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
+  background: var(--white-alpha-20);
+  border-radius: var(--radius-sm);
   font-size: 0.6875rem;
   font-weight: 500;
   text-transform: uppercase;
@@ -183,10 +183,10 @@
 
 /* Balance card */
 .balanceCard {
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  border-radius: 16px;
+  background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent) 100%);
+  border-radius: var(--radius-2xl);
   padding: 28px;
-  color: #ffffff;
+  color: var(--text-inverse);
   margin-bottom: 32px;
 }
 
@@ -218,8 +218,8 @@
 .balanceSkeleton {
   height: 40px;
   width: 200px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
+  background: var(--white-alpha-20);
+  border-radius: var(--radius-lg);
   animation: pulse 1.5s infinite;
 }
 
@@ -238,13 +238,13 @@
   align-items: center;
   gap: 20px;
   padding-top: 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: 1px solid var(--white-alpha-20);
 }
 
 .qrCode {
   background: var(--bg-primary);
   padding: 8px;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   flex-shrink: 0;
   line-height: 0;
 }
@@ -272,9 +272,9 @@
 .address {
   font-size: 0.875rem;
   font-family: monospace;
-  background: rgba(255, 255, 255, 0.15);
+  background: var(--white-alpha-15);
   padding: 4px 8px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   word-break: break-all;
 }
 
@@ -284,38 +284,38 @@
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: rgba(255, 255, 255, 0.15);
+  background: var(--white-alpha-15);
   border: none;
-  border-radius: 6px;
-  color: #ffffff;
+  border-radius: var(--radius-md);
+  color: var(--text-inverse);
   cursor: pointer;
   transition: background 0.15s;
   text-decoration: none;
 }
 
 .iconButton:hover {
-  background: rgba(255, 255, 255, 0.25);
+  background: var(--white-alpha-25);
 }
 
 .actions {
   margin-top: 16px;
   padding-top: 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: 1px solid var(--white-alpha-20);
 }
 
 .disconnectButton {
   padding: 6px 14px;
-  background: rgba(255, 255, 255, 0.15);
-  color: #ffffff;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 6px;
+  background: var(--white-alpha-15);
+  color: var(--text-inverse);
+  border: 1px solid var(--white-alpha-30);
+  border-radius: var(--radius-md);
   font-size: 0.8125rem;
   cursor: pointer;
   transition: background 0.15s;
 }
 
 .disconnectButton:hover {
-  background: rgba(255, 255, 255, 0.25);
+  background: var(--white-alpha-25);
 }
 
 /* Content grid */
@@ -329,7 +329,7 @@
 .balanceCardSkeleton {
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
-  border-radius: 16px;
+  border-radius: var(--radius-2xl);
   padding: 28px;
   margin-bottom: 32px;
 }
@@ -395,7 +395,7 @@
 .reconnectCard {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   padding: 32px;
   max-width: 440px;
 }
@@ -418,7 +418,7 @@
   font-family: monospace;
   background: var(--bg-secondary);
   padding: 2px 6px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.75rem;
 }
 
diff --git a/frontend/src/pages/dashboard.module.css b/frontend/src/pages/dashboard.module.css
index 0eae96cd..d6db1512 100644
--- a/frontend/src/pages/dashboard.module.css
+++ b/frontend/src/pages/dashboard.module.css
@@ -9,7 +9,7 @@
   flex-direction: column;
   gap: 0.5rem;
   min-height: 80px;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
 }
 
 .health {
@@ -27,6 +27,6 @@
 .heading {
   font-size: 1.125rem;
   font-weight: 600;
-  color: #0f172a;
+  color: var(--surface-canvas);
   margin: 0;
 }
diff --git a/frontend/src/pages/tasks/TaskHistoryPage.module.css b/frontend/src/pages/tasks/TaskHistoryPage.module.css
index 20711da8..9a1da34d 100644
--- a/frontend/src/pages/tasks/TaskHistoryPage.module.css
+++ b/frontend/src/pages/tasks/TaskHistoryPage.module.css
@@ -45,21 +45,21 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  background: rgba(139, 92, 246, 0.1);
-  border: 1px solid rgba(139, 92, 246, 0.3);
-  border-radius: 10px;
+  background: var(--accent-surface-muted);
+  border: 1px solid var(--accent-border);
+  border-radius: var(--radius-xl);
   padding: 8px 14px;
   font-size: 0.8rem;
   font-weight: 600;
-  color: #c4b5fd;
+  color: var(--accent-text);
 }
 
 .compareBtn {
   background: var(--primary);
   border: none;
-  color: #fff;
+  color: var(--text-inverse);
   padding: 5px 14px;
-  border-radius: 7px;
+  border-radius: var(--radius-lg);
   font-size: 0.78rem;
   font-weight: 700;
   box-shadow: none;
@@ -77,10 +77,10 @@
   align-items: center;
   gap: 4px;
   background: transparent;
-  border: 1px solid rgba(139, 92, 246, 0.35);
-  color: #a78bfa;
+  border: 1px solid var(--accent-border-strong);
+  color: var(--accent-text-strong);
   padding: 4px 10px;
-  border-radius: 7px;
+  border-radius: var(--radius-lg);
   font-size: 0.75rem;
   font-weight: 600;
   box-shadow: none;
@@ -89,7 +89,7 @@
 }
 
 .clearBtn:hover {
-  background: rgba(139, 92, 246, 0.12);
+  background: var(--accent-surface-muted);
   transform: none;
   box-shadow: none;
 }
@@ -103,10 +103,10 @@
   gap: 16px;
   flex-wrap: wrap;
   padding: 14px 18px;
-  background: rgba(239, 68, 68, 0.08);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: 10px;
-  color: #fca5a5;
+  background: var(--status-danger-surface-muted);
+  border: 1px solid var(--status-danger-surface-strong);
+  border-radius: var(--radius-xl);
+  color: var(--status-danger-text);
   font-size: 0.875rem;
   margin-bottom: 16px;
 }
@@ -116,11 +116,11 @@
 }
 
 .retryButton {
-  background: rgba(239, 68, 68, 0.15);
-  border: 1px solid rgba(239, 68, 68, 0.4);
-  color: #fecaca;
+  background: var(--status-danger-surface);
+  border: 1px solid var(--status-danger-border-strong);
+  color: var(--status-danger-text);
   padding: 6px 14px;
-  border-radius: 7px;
+  border-radius: var(--radius-lg);
   font-size: 0.78rem;
   font-weight: 600;
   box-shadow: none;
@@ -128,7 +128,7 @@
 }
 
 .retryButton:hover {
-  background: rgba(239, 68, 68, 0.25);
+  background: var(--status-danger-surface-emphasis);
   transform: none;
   box-shadow: none;
 }
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 3192edcf..ce83e546 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,34 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
+@import './tokens.css';
 @import './animations.css';
 @import './micro-interactions.css';
 
-:root {
-  --font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  --bg-primary: #0A0E14;
-  --bg-surface: #11151D;
-  --bg-surface-alt: #161B24;
-  --bg-secondary: #1A1F2E;
-  --border-color: #2A3040;
-  --border-subtle: #1F2630;
-  --text-primary: #F5F7FA;
-  --text-secondary: #8A93A3;
-  --accent-cyan: #38BDF8;
-  --accent-purple: #8B5CF6;
-  --accent-green: #34D399;
-  --gradient-primary: linear-gradient(90deg, #38BDF8 0%, #8B5CF6 100%);
-  --panel-bg: var(--bg-surface);
-  --panel-border: var(--border-subtle);
-  --primary: var(--accent-purple);
-  --primary-hover: #7c3aed;
-  --success: var(--accent-green);
-  --danger: #ef4444;
-  --accent: var(--accent-cyan);
-  --skeleton-base: #1a1f2e;
-  --skeleton-shine: #2a3040;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 * {
   box-sizing: border-box;
@@ -75,17 +51,17 @@ html, body {
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--panel-border);
-  border-radius: 16px;
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  border-radius: var(--radius-2xl);
+  box-shadow: var(--shadow-md);
   padding: 24px;
 }
 
 .chip {
-  background: rgba(99, 102, 241, 0.15);
-  border: 1px solid rgba(99, 102, 241, 0.3);
-  color: #a5b4fc;
+  background: color-mix(in srgb, var(--accent-secondary) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-secondary) 30%, transparent);
+  color: var(--accent-info);
   padding: 6px 12px;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   font-size: 0.85rem;
   font-weight: 600;
 }
@@ -109,7 +85,7 @@ th {
 }
 
 tr:hover td {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--surface-hover-subtle);
 }
 
 .form-group {
@@ -127,10 +103,10 @@ label {
 
 input[type="text"], input[type="number"], textarea {
   font-family: var(--font-sans);
-  background: rgba(15, 23, 42, 0.6);
+  background: var(--surface-glass);
   border: 1px solid var(--panel-border);
   color: var(--text-primary);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 12px;
   font-size: 1rem;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
@@ -139,7 +115,7 @@ input[type="text"], input[type="number"], textarea {
 input:focus, textarea:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+  box-shadow: var(--focus-ring-info);
 }
 
 .error-msg {
@@ -154,16 +130,16 @@ input:focus, textarea:focus {
   justify-content: center;
   align-items: center;
   padding: 40px;
-  border-radius: 12px;
-  background: rgba(15, 23, 42, 0.4);
+  border-radius: var(--radius-xl);
+  background: var(--surface-glass-subtle);
   border: 1px dashed var(--panel-border);
   margin-top: 24px;
 }
 
 .dag-node {
-  background: #334155;
-  border: 2px solid #475569;
-  border-radius: 12px;
+  background: var(--surface-muted);
+  border: 2px solid var(--border-strong);
+  border-radius: var(--radius-xl);
   padding: 16px 24px;
   min-width: 140px;
   text-align: center;
@@ -173,10 +149,10 @@ input:focus, textarea:focus {
 }
 
 .dag-node.completed {
-  background: #064e3b;
+  background: var(--status-success-surface);
   border-color: var(--success);
-  color: #a7f3d0;
-  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
+  color: var(--status-success-text);
+  box-shadow: var(--glow-success);
 }
 
 .dag-arrow {
@@ -191,7 +167,7 @@ input:focus, textarea:focus {
 
   .glass-panel {
     padding: 16px;
-    border-radius: 12px;
+    border-radius: var(--radius-xl);
   }
 
   .dag-container {
@@ -213,9 +189,9 @@ input:focus, textarea:focus {
   z-index: 10000;
   padding: 8px 16px;
   background: var(--primary);
-  color: #ffffff;
+  color: var(--text-inverse);
   font-weight: 600;
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   text-decoration: none;
   transition: top 0.2s ease;
 }
@@ -239,7 +215,7 @@ select:focus-visible {
   outline: 3px solid var(--accent);
   outline-offset: 2px;
   border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+  box-shadow: var(--focus-ring-info);
 }
 
 /* ─── Screen reader only utility ──────────────────────────────────────────── */
@@ -267,23 +243,3 @@ td,
   transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
 }
 
-/* Light theme overrides */
-.theme-light {
-  --bg-primary: #FFFFFF;
-  --bg-surface: #F8FAFC;
-  --bg-surface-alt: #F1F5F9;
-  --bg-secondary: #F3F4F6;
-  --border-color: #E6E9EE;
-  --border-subtle: #E9EEF4;
-  --text-primary: #0A0E14;
-  --text-secondary: #475569;
-  --accent-cyan: #0EA5E9;
-  --accent-purple: #7C3AED;
-  --accent-green: #059669;
-  --panel-bg: var(--bg-surface);
-  --panel-border: var(--border-color);
-  --primary: var(--accent-purple);
-  --primary-hover: #6d28d9;
-  --accent: var(--accent-cyan);
-}
-
diff --git a/frontend/src/styles/micro-interactions.css b/frontend/src/styles/micro-interactions.css
index 14a7aa7a..4a87bf7c 100644
--- a/frontend/src/styles/micro-interactions.css
+++ b/frontend/src/styles/micro-interactions.css
@@ -6,7 +6,7 @@
 
 .hover-lift:hover {
   transform: translateY(-4px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-md);
 }
 
 .hover-glow {
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
new file mode 100644
index 00000000..b4caaa8a
--- /dev/null
+++ b/frontend/src/styles/tokens.css
@@ -0,0 +1,255 @@
+:root,
+.theme-dark {
+  color-scheme: dark;
+
+  --font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+
+  --surface-canvas: #0a0e14;
+  --surface-primary: #11151d;
+  --surface-secondary: #161b24;
+  --surface-raised: #1a1f2e;
+  --surface-elevated: #1e293b;
+  --surface-muted: #334155;
+  --surface-overlay: rgba(10, 14, 20, 0.88);
+  --surface-scrim: rgba(0, 0, 0, 0.65);
+  --surface-glass: rgba(15, 23, 42, 0.6);
+  --surface-glass-subtle: rgba(15, 23, 42, 0.4);
+  --surface-hover: rgba(255, 255, 255, 0.06);
+  --surface-hover-subtle: rgba(255, 255, 255, 0.03);
+  --surface-panel-translucent: rgba(30, 41, 59, 0.92);
+  --surface-panel-strong: rgba(30, 41, 59, 0.96);
+  --surface-backdrop: rgba(2, 6, 23, 0.7);
+  --surface-black: #000000;
+  --surface-black-subtle: rgba(0, 0, 0, 0.2);
+  --surface-black-muted: rgba(0, 0, 0, 0.5);
+  --surface-black-strong: rgba(0, 0, 0, 0.7);
+
+  --text-primary: #f5f7fa;
+  --text-secondary: #8a93a3;
+  --text-muted: #94a3b8;
+  --text-subtle: rgba(148, 163, 184, 0.6);
+  --text-disabled: rgba(148, 163, 184, 0.35);
+  --text-inverse: #ffffff;
+
+  --border-primary: #2a3040;
+  --border-subtle: #1f2630;
+  --border-muted: rgba(255, 255, 255, 0.08);
+  --border-strong: #475569;
+
+  --accent: #8b5cf6;
+  --accent-hover: #7c3aed;
+  --accent-info: #38bdf8;
+  --accent-secondary: #6366f1;
+  --accent-secondary-hover: #4f46e5;
+  --accent-text: #c4b5fd;
+  --accent-text-strong: #a78bfa;
+  --accent-text-soft: #a5b4fc;
+  --accent-text-muted: #818cf8;
+  --accent-surface: rgba(99, 102, 241, 0.15);
+  --accent-surface-muted: rgba(99, 102, 241, 0.12);
+  --accent-surface-strong: rgba(99, 102, 241, 0.25);
+  --accent-border: rgba(99, 102, 241, 0.3);
+  --accent-border-strong: rgba(99, 102, 241, 0.4);
+  --info-surface: rgba(56, 189, 248, 0.15);
+  --info-border: rgba(56, 189, 248, 0.3);
+  --info-glow-subtle: 0 0 10px rgba(56, 189, 248, 0.05);
+  --info-glow: 0 0 12px rgba(56, 189, 248, 0.3);
+  --info-glow-strong: 0 0 20px rgba(56, 189, 248, 0.4);
+
+  --status-success: #34d399;
+  --status-success-strong: #16a34a;
+  --status-success-surface: rgba(16, 185, 129, 0.15);
+  --status-success-border: rgba(16, 185, 129, 0.3);
+  --status-success-text: #a7f3d0;
+  --status-success-text-strong: #6ee7b7;
+  --status-success-surface-muted: rgba(16, 185, 129, 0.12);
+  --status-success-surface-strong: rgba(16, 185, 129, 0.2);
+  --status-success-border-strong: rgba(16, 185, 129, 0.4);
+  --status-warning: #fbbf24;
+  --status-warning-strong: #eab308;
+  --status-warning-surface: rgba(245, 158, 11, 0.15);
+  --status-warning-surface-muted: rgba(245, 158, 11, 0.12);
+  --status-warning-surface-strong: rgba(245, 158, 11, 0.2);
+  --status-warning-border: rgba(245, 158, 11, 0.3);
+  --status-warning-border-strong: rgba(245, 158, 11, 0.4);
+  --status-warning-text: #fde68a;
+  --status-danger: #ef4444;
+  --status-danger-strong: #b91c1c;
+  --status-danger-surface: rgba(239, 68, 68, 0.12);
+  --status-danger-surface-muted: rgba(239, 68, 68, 0.08);
+  --status-danger-surface-strong: rgba(239, 68, 68, 0.2);
+  --status-danger-surface-emphasis: rgba(239, 68, 68, 0.25);
+  --status-danger-border: rgba(239, 68, 68, 0.3);
+  --status-danger-border-strong: rgba(239, 68, 68, 0.4);
+  --status-danger-text: #fca5a5;
+  --agent-research: var(--accent-info);
+  --agent-risk: var(--status-warning);
+  --agent-coding: var(--accent-text-strong);
+  --agent-design: #f472b6;
+  --agent-report: var(--status-success);
+  --agent-default: var(--text-muted);
+  --agent-research-surface: rgba(56, 189, 248, 0.13);
+  --agent-risk-surface: rgba(245, 158, 11, 0.13);
+  --agent-coding-surface: rgba(167, 139, 250, 0.13);
+  --agent-design-surface: rgba(244, 114, 182, 0.13);
+  --agent-report-surface: rgba(52, 211, 153, 0.13);
+  --agent-default-surface: var(--surface-hover);
+  --agent-research-border: rgba(56, 189, 248, 0.28);
+  --agent-risk-border: rgba(245, 158, 11, 0.28);
+  --agent-coding-border: rgba(167, 139, 250, 0.28);
+  --agent-design-border: rgba(244, 114, 182, 0.28);
+  --agent-report-border: rgba(52, 211, 153, 0.28);
+  --agent-default-border: var(--border-muted);
+  --white-alpha-02: rgba(255, 255, 255, 0.02);
+  --white-alpha-04: rgba(255, 255, 255, 0.04);
+  --white-alpha-05: rgba(255, 255, 255, 0.05);
+  --white-alpha-06: rgba(255, 255, 255, 0.06);
+  --white-alpha-08: rgba(255, 255, 255, 0.08);
+  --white-alpha-10: rgba(255, 255, 255, 0.1);
+  --white-alpha-12: rgba(255, 255, 255, 0.12);
+  --white-alpha-15: rgba(255, 255, 255, 0.15);
+  --white-alpha-20: rgba(255, 255, 255, 0.2);
+  --white-alpha-25: rgba(255, 255, 255, 0.25);
+  --white-alpha-30: rgba(255, 255, 255, 0.3);
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-pill: 9999px;
+  --radius-round: 50%;
+
+  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.15);
+  --shadow-md: 0 8px 32px rgba(15, 23, 42, 0.18);
+  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
+  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.5);
+  --shadow-popover: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.15);
+  --focus-ring-info: 0 0 0 2px rgba(59, 130, 246, 0.25);
+  --glow-info: 0 0 15px rgba(56, 189, 248, 0.4);
+  --glow-success: 0 0 15px rgba(16, 185, 129, 0.4);
+  --glow-danger: 0 0 15px rgba(239, 68, 68, 0.35);
+
+  --gradient-primary: linear-gradient(90deg, var(--accent-info) 0%, var(--accent) 100%);
+  --gradient-accent: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent) 100%);
+
+  --bg-primary: var(--surface-canvas);
+  --bg-surface: var(--surface-primary);
+  --bg-surface-alt: var(--surface-secondary);
+  --bg-secondary: var(--surface-raised);
+  --border-color: var(--border-primary);
+  --panel-bg: var(--surface-primary);
+  --panel-border: var(--border-subtle);
+  --primary: var(--accent);
+  --primary-hover: var(--accent-hover);
+  --success: var(--status-success);
+  --danger: var(--status-danger);
+  --skeleton-base: var(--surface-raised);
+  --skeleton-shine: var(--border-primary);
+}
+
+.theme-light {
+  color-scheme: light;
+
+  --surface-canvas: #ffffff;
+  --surface-primary: #f8fafc;
+  --surface-secondary: #f1f5f9;
+  --surface-raised: #f3f4f6;
+  --surface-elevated: #e9eef4;
+  --surface-muted: #e2e8f0;
+  --surface-overlay: rgba(255, 255, 255, 0.92);
+  --surface-scrim: rgba(15, 23, 42, 0.42);
+  --surface-glass: rgba(248, 250, 252, 0.78);
+  --surface-glass-subtle: rgba(248, 250, 252, 0.58);
+  --surface-hover: rgba(15, 23, 42, 0.06);
+  --surface-hover-subtle: rgba(15, 23, 42, 0.03);
+  --surface-panel-translucent: rgba(255, 255, 255, 0.92);
+  --surface-panel-strong: rgba(255, 255, 255, 0.96);
+  --surface-backdrop: rgba(15, 23, 42, 0.42);
+  --surface-black: #000000;
+  --surface-black-subtle: rgba(15, 23, 42, 0.08);
+  --surface-black-muted: rgba(15, 23, 42, 0.32);
+  --surface-black-strong: rgba(15, 23, 42, 0.45);
+
+  --text-primary: #0a0e14;
+  --text-secondary: #475569;
+  --text-muted: #64748b;
+  --text-subtle: rgba(71, 85, 105, 0.72);
+  --text-disabled: rgba(71, 85, 105, 0.42);
+  --text-inverse: #ffffff;
+
+  --border-primary: #e6e9ee;
+  --border-subtle: #e9eef4;
+  --border-muted: rgba(15, 23, 42, 0.1);
+  --border-strong: #cbd5e1;
+
+  --accent: #7c3aed;
+  --accent-hover: #6d28d9;
+  --accent-info: #0ea5e9;
+  --accent-secondary: #6366f1;
+  --accent-secondary-hover: #4f46e5;
+  --accent-text: #6d28d9;
+  --accent-text-strong: #5b21b6;
+  --accent-text-soft: #4f46e5;
+  --accent-text-muted: #6366f1;
+  --accent-surface: rgba(99, 102, 241, 0.12);
+  --accent-surface-muted: rgba(99, 102, 241, 0.08);
+  --accent-surface-strong: rgba(99, 102, 241, 0.18);
+  --accent-border: rgba(99, 102, 241, 0.24);
+  --accent-border-strong: rgba(99, 102, 241, 0.34);
+  --info-surface: rgba(14, 165, 233, 0.12);
+  --info-border: rgba(14, 165, 233, 0.28);
+
+  --status-success: #059669;
+  --status-success-strong: #047857;
+  --status-success-surface: #ecfdf5;
+  --status-success-border: #86efac;
+  --status-success-text: #166534;
+  --status-success-text-strong: #047857;
+  --status-success-surface-muted: #f0fdf4;
+  --status-success-surface-strong: #dcfce7;
+  --status-success-border-strong: #86efac;
+  --status-warning: #f59e0b;
+  --status-warning-strong: #d97706;
+  --status-warning-surface: #fffbeb;
+  --status-warning-surface-muted: #fffbeb;
+  --status-warning-surface-strong: #fef3c7;
+  --status-warning-border: #fde68a;
+  --status-warning-border-strong: #fcd34d;
+  --status-warning-text: #92400e;
+  --status-danger: #dc2626;
+  --status-danger-strong: #b91c1c;
+  --status-danger-surface: #fef2f2;
+  --status-danger-surface-muted: #fef2f2;
+  --status-danger-surface-strong: #fee2e2;
+  --status-danger-surface-emphasis: #fecaca;
+  --status-danger-border: #fca5a5;
+  --status-danger-border-strong: #ef4444;
+  --status-danger-text: #991b1b;
+  --agent-design: #db2777;
+  --agent-research-surface: rgba(14, 165, 233, 0.11);
+  --agent-risk-surface: rgba(245, 158, 11, 0.11);
+  --agent-coding-surface: rgba(124, 58, 237, 0.11);
+  --agent-design-surface: rgba(219, 39, 119, 0.1);
+  --agent-report-surface: rgba(5, 150, 105, 0.1);
+  --agent-research-border: rgba(14, 165, 233, 0.24);
+  --agent-risk-border: rgba(245, 158, 11, 0.24);
+  --agent-coding-border: rgba(124, 58, 237, 0.24);
+  --agent-design-border: rgba(219, 39, 119, 0.22);
+  --agent-report-border: rgba(5, 150, 105, 0.22);
+
+  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);
+  --shadow-md: 0 8px 32px rgba(15, 23, 42, 0.12);
+  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.18);
+  --shadow-popover: 0 24px 80px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.08);
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 947c83db..dd5a08e9 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,29 +7,52 @@ export default {
   theme: {
     extend: {
       colors: {
+        surface: {
+          canvas: 'var(--surface-canvas)',
+          primary: 'var(--surface-primary)',
+          secondary: 'var(--surface-secondary)',
+          raised: 'var(--surface-raised)',
+          elevated: 'var(--surface-elevated)',
+          muted: 'var(--surface-muted)',
+          overlay: 'var(--surface-overlay)',
+          glass: 'var(--surface-glass)',
+          hover: 'var(--surface-hover)',
+        },
         background: {
           primary: 'var(--bg-primary)',
           surface: 'var(--bg-surface)',
           'surface-alt': 'var(--bg-surface-alt)',
         },
         border: {
+          DEFAULT: 'var(--border-primary)',
           subtle: 'var(--border-subtle)',
+          muted: 'var(--border-muted)',
+          strong: 'var(--border-strong)',
         },
         text: {
           primary: 'var(--text-primary)',
           secondary: 'var(--text-secondary)',
+          muted: 'var(--text-muted)',
+          subtle: 'var(--text-subtle)',
+          disabled: 'var(--text-disabled)',
+          inverse: 'var(--text-inverse)',
         },
         accent: {
-          cyan: 'var(--accent-cyan)',
-          purple: 'var(--accent-purple)',
-          green: 'var(--accent-green)',
+          DEFAULT: 'var(--accent)',
+          hover: 'var(--accent-hover)',
+          info: 'var(--accent-info)',
+          secondary: 'var(--accent-secondary)',
+          cyan: 'var(--accent-info)',
+          purple: 'var(--accent)',
+          green: 'var(--status-success)',
         },
         primary: {
           DEFAULT: 'var(--primary)',
           hover: 'var(--primary-hover)',
         },
-        success: 'var(--success)',
-        danger: 'var(--danger)',
+        success: 'var(--status-success)',
+        warning: 'var(--status-warning)',
+        danger: 'var(--status-danger)',
         panel: {
           bg: 'var(--panel-bg)',
           border: 'var(--panel-border)',
@@ -40,6 +63,37 @@ export default {
       },
       backgroundImage: {
         'gradient-primary': 'var(--gradient-primary)',
+        'gradient-accent': 'var(--gradient-accent)',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+        '2xl': 'var(--radius-2xl)',
+        full: 'var(--radius-pill)',
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        popover: 'var(--shadow-popover)',
+        focus: 'var(--focus-ring)',
+        'info-glow': 'var(--info-glow)',
+        'info-glow-subtle': 'var(--info-glow-subtle)',
+        'info-glow-strong': 'var(--info-glow-strong)',
+        'success-glow': 'var(--glow-success)',
+        'danger-glow': 'var(--glow-danger)',
+      },
+      spacing: {
+        1: 'var(--space-1)',
+        2: 'var(--space-2)',
+        3: 'var(--space-3)',
+        4: 'var(--space-4)',
+        5: 'var(--space-5)',
+        6: 'var(--space-6)',
+        8: 'var(--space-8)',
+        10: 'var(--space-10)',
       },
     },
   },
diff --git a/smart-contracts/contracts/agent_bidding/src/lib.rs b/smart-contracts/contracts/agent_bidding/src/lib.rs
index 96fc476a..c6e6754f 100644
--- a/smart-contracts/contracts/agent_bidding/src/lib.rs
+++ b/smart-contracts/contracts/agent_bidding/src/lib.rs
@@ -105,6 +105,7 @@ use soroban_sdk::{
 const TTL_THRESHOLD: u32 = 100_000;
 /// Target TTL after extension (~31 days at 5s ledgers).
 const TTL_EXTEND_TO: u32 = 535_680;
+const CONTRACT_VERSION: &str = "1.0.0";
 
 /// Maximum page size accepted by [`AgentBiddingContract::get_bidders`].
 const MAX_PAGE_SIZE: u32 = 50;
@@ -207,6 +208,48 @@ pub struct AgentBiddingContract;
 
 #[contractimpl]
 impl AgentBiddingContract {
+    // ── Administration / Upgradeability ───────────────────────────────────
+
+    pub fn initialize(env: Env, admin: Address) -> Result<(), Error> {
+        if env.storage().instance().has(&DataKey::Admin) {
+            return Err(Error::AlreadyInitialized);
+        }
+        admin.require_auth();
+        env.storage().instance().set(&DataKey::Admin, &admin);
+        env.storage()
+            .instance()
+            .set(&DataKey::Version, &String::from_str(&env, CONTRACT_VERSION));
+        Ok(())
+    }
+
+    pub fn admin(env: Env) -> Option<Address> {
+        env.storage().instance().get(&DataKey::Admin)
+    }
+
+    pub fn contract_version(env: Env) -> String {
+        env.storage()
+            .instance()
+            .get(&DataKey::Version)
+            .unwrap_or_else(|| String::from_str(&env, CONTRACT_VERSION))
+    }
+
+    pub fn upgrade(
+        env: Env,
+        new_wasm_hash: BytesN<32>,
+        new_version: String,
+    ) -> Result<(), Error> {
+        let admin = require_admin(&env)?;
+        let old_version = Self::contract_version(env.clone());
+        env.deployer()
+            .update_current_contract_wasm(new_wasm_hash.clone());
+        env.storage().instance().set(&DataKey::Version, &new_version);
+        env.events().publish(
+            (symbol_short!("bidding"), symbol_short!("upgraded")),
+            (old_version, new_version, new_wasm_hash, admin, env.ledger().sequence()),
+        );
+        Ok(())
+    }
+
     // ── Creation ─────────────────────────────────────────────────────────
 
     /// Initialise a new auction for `task_id`.
diff --git a/smart-contracts/contracts/agent_bidding/src/types.rs b/smart-contracts/contracts/agent_bidding/src/types.rs
index a3288ae3..9ac583bb 100644
--- a/smart-contracts/contracts/agent_bidding/src/types.rs
+++ b/smart-contracts/contracts/agent_bidding/src/types.rs
@@ -239,6 +239,10 @@ pub struct Escrow {
 #[contracttype]
 #[derive(Clone, Debug, Eq, PartialEq)]
 pub enum DataKey {
+    /// Admin address allowed to upgrade this contract.
+    Admin,
+    /// Current semantic contract version.
+    Version,
     /// Stores the root [`Auction`] record for a task.
     Auction(Symbol),
     /// Stores a single [`SealedBid`] for a given (task, bidder) pair.
diff --git a/smart-contracts/contracts/agent_registry/src/lib.rs b/smart-contracts/contracts/agent_registry/src/lib.rs
index a3a161c2..2b14ff75 100644
--- a/smart-contracts/contracts/agent_registry/src/lib.rs
+++ b/smart-contracts/contracts/agent_registry/src/lib.rs
@@ -527,7 +527,12 @@ impl AgentRegistryContract {
         if env.storage().instance().has(&DataKey::Admin) {
             return Err(Error::AlreadyExists);
         }
+        admin.require_auth();
         env.storage().instance().set(&DataKey::Admin, &admin);
+        env.storage().instance().set(
+            &DataKey::Agent(Symbol::new(&env, "version")),
+            &String::from_str(&env, "1.0.0"),
+        );
         env.storage().instance().set(&DataKey::Paused, &false);
 
         // Emit (registry, init) so indexers know exactly when the
diff --git a/smart-contracts/contracts/agent_registry/src/upgrade.rs b/smart-contracts/contracts/agent_registry/src/upgrade.rs
index 3b665a73..534891d1 100644
--- a/smart-contracts/contracts/agent_registry/src/upgrade.rs
+++ b/smart-contracts/contracts/agent_registry/src/upgrade.rs
@@ -31,7 +31,10 @@ pub enum UpgradeDataKey {
 #[contractimpl]
 impl Upgradeable for AgentRegistryContract {
     fn get_version(env: Env) -> String {
-        String::from_str(&env, CURRENT_VERSION)
+        env.storage()
+            .instance()
+            .get(&DataKey::Agent(Symbol::new(&env, "version")))
+            .unwrap_or_else(|| String::from_str(&env, CURRENT_VERSION))
     }
 
     fn get_wasm_hash(env: Env) -> BytesN<32> {
@@ -287,6 +290,45 @@ impl AgentRegistryContract {
         }
     }
 
+    pub fn admin(env: Env) -> Option<Address> {
+        env.storage().instance().get(&DataKey::Admin)
+    }
+
+    pub fn contract_version(env: Env) -> String {
+        <Self as Upgradeable>::get_version(env)
+    }
+
+    pub fn upgrade(
+        env: Env,
+        new_wasm_hash: BytesN<32>,
+        new_version: String,
+    ) -> Result<(), Error> {
+        let admin = require_admin(&env)?;
+        let old_version = Self::contract_version(env.clone());
+
+        env.deployer()
+            .update_current_contract_wasm(new_wasm_hash.clone());
+        env.storage()
+            .instance()
+            .set(&DataKey::Agent(Symbol::new(&env, "version")), &new_version);
+        env.storage()
+            .instance()
+            .set(&DataKey::Agent(Symbol::new(&env, "last_upgrade")), &env.ledger().sequence());
+
+        env.events().publish(
+            (symbol_short!("registry"), symbol_short!("upgraded")),
+            crate::events::ContractUpgradedEvent {
+                old_version,
+                new_version,
+                wasm_hash: new_wasm_hash,
+                admin,
+                upgrade_ledger: env.ledger().sequence(),
+            },
+        );
+
+        Ok(())
+    }
+
     /// Upgrade the contract with new WASM hash (admin only)
     pub fn upgrade_contract(
         env: Env,
diff --git a/smart-contracts/contracts/error-registry/src/lib.rs b/smart-contracts/contracts/error-registry/src/lib.rs
index bfceec84..5bdb30ba 100644
--- a/smart-contracts/contracts/error-registry/src/lib.rs
+++ b/smart-contracts/contracts/error-registry/src/lib.rs
@@ -55,8 +55,8 @@
 //! but that situation does not exist here.
 
 use soroban_sdk::{
-    contract, contracterror, contractimpl, contracttype, symbol_short, BytesN, Env, Map, Symbol,
-    Vec,
+    contract, contracterror, contractimpl, contracttype, symbol_short, Address, BytesN, Env, Map,
+    String, Symbol, Vec,
 };
 
 /// Maximum allowed TTL for a single record: **90 days** (in seconds).
@@ -77,6 +77,7 @@ pub const MAX_CLEANUP_BATCH: u32 = 100;
 /// Batch size used when a caller passes `0` to [`cleanup_expired_errors`],
 /// giving a sensible default for the common "just clean up" call.
 pub const DEFAULT_CLEANUP_BATCH: u32 = 50;
+pub const CONTRACT_VERSION: &str = "1.0.0";
 
 /// A single error report stored on-chain.
 ///
@@ -113,6 +114,10 @@ pub struct CleanupStats {
 /// Storage keys. All entries live in `persistent` storage.
 #[contracttype]
 pub enum DataKey {
+    /// Admin address allowed to upgrade this contract.
+    Admin,
+    /// Current semantic contract version.
+    Version,
     /// Primary storage: `error_id` -> [`ErrorRecord`].
     Record(BytesN<32>),
     /// Secondary lookup index: `error_code` -> `Vec<error_id>`.
@@ -130,6 +135,14 @@ pub enum Error {
     InvalidTtl = 2,
     /// `created_at + ttl_seconds` would overflow `u64`.
     TtlOverflow = 3,
+    /// Contract instance has already been initialized.
+    AlreadyInitialized = 4,
+    /// Contract instance has not been initialized with an admin.
+    NotInitialized = 5,
+    /// Caller is not authorized for the requested admin action.
+    Unauthorized = 6,
+    /// Requested upgrade could not be applied.
+    UpgradeFailed = 7,
 }
 
 #[contract]
@@ -137,6 +150,46 @@ pub struct ErrorRegistryContract;
 
 #[contractimpl]
 impl ErrorRegistryContract {
+    pub fn initialize(env: Env, admin: Address) -> Result<(), Error> {
+        if env.storage().instance().has(&DataKey::Admin) {
+            return Err(Error::AlreadyInitialized);
+        }
+        admin.require_auth();
+        env.storage().instance().set(&DataKey::Admin, &admin);
+        env.storage()
+            .instance()
+            .set(&DataKey::Version, &String::from_str(&env, CONTRACT_VERSION));
+        Ok(())
+    }
+
+    pub fn admin(env: Env) -> Option<Address> {
+        env.storage().instance().get(&DataKey::Admin)
+    }
+
+    pub fn contract_version(env: Env) -> String {
+        env.storage()
+            .instance()
+            .get(&DataKey::Version)
+            .unwrap_or_else(|| String::from_str(&env, CONTRACT_VERSION))
+    }
+
+    pub fn upgrade(
+        env: Env,
+        new_wasm_hash: BytesN<32>,
+        new_version: String,
+    ) -> Result<(), Error> {
+        let admin = require_admin(&env)?;
+        let old_version = Self::contract_version(env.clone());
+        env.deployer()
+            .update_current_contract_wasm(new_wasm_hash.clone());
+        env.storage().instance().set(&DataKey::Version, &new_version);
+        env.events().publish(
+            (symbol_short!("errreg"), symbol_short!("upgraded")),
+            (old_version, new_version, new_wasm_hash, admin, env.ledger().sequence()),
+        );
+        Ok(())
+    }
+
     /// Submit a new error report with an explicit TTL.
     ///
     /// * `error_id` — unique 32-byte key for the record (caller-supplied, e.g. a
@@ -354,6 +407,16 @@ impl ErrorRegistryContract {
     }
 }
 
+fn require_admin(env: &Env) -> Result<Address, Error> {
+    let admin: Address = env
+        .storage()
+        .instance()
+        .get(&DataKey::Admin)
+        .ok_or(Error::NotInitialized)?;
+    admin.require_auth();
+    Ok(admin)
+}
+
 /// Reject `ttl_seconds` outside `(0, MAX_TTL_SECONDS]`.
 fn validate_ttl(ttl_seconds: u64) -> Result<(), Error> {
     if ttl_seconds == 0 || ttl_seconds > MAX_TTL_SECONDS {
diff --git a/smart-contracts/contracts/error-resolver/src/agent_errors.rs b/smart-contracts/contracts/error-resolver/src/agent_errors.rs
index 1113f54e..a67a5a0d 100644
--- a/smart-contracts/contracts/error-resolver/src/agent_errors.rs
+++ b/smart-contracts/contracts/error-resolver/src/agent_errors.rs
@@ -3,6 +3,8 @@ use soroban_sdk::{
     Symbol, Vec,
 };
 
+const CONTRACT_VERSION: &str = "1.0.0";
+
 /// On-chain per-agent error ledger. Distinct from the off-chain
 /// `ErrorResolver` lookup table (see `lookup.rs`): this contract tracks how
 /// many errors have been reported for a given agent, so `agent-registry` can
@@ -10,6 +12,7 @@ use soroban_sdk::{
 #[contracttype]
 pub enum DataKey {
     Admin,
+    Version,
     AuthorizedCallers,
     AgentErrorCount(Symbol),
     Signers,
@@ -182,7 +185,11 @@ impl ErrorResolverContract {
         if env.storage().instance().has(&DataKey::Admin) {
             return Err(ContractError::AlreadyInitialized);
         }
+        admin.require_auth();
         env.storage().instance().set(&DataKey::Admin, &admin);
+        env.storage()
+            .instance()
+            .set(&DataKey::Version, &String::from_str(&env, CONTRACT_VERSION));
         env.storage()
             .instance()
             .set(&DataKey::AuthorizedCallers, &Vec::<Address>::new(&env));
diff --git a/smart-contracts/contracts/task_store/src/lib.rs b/smart-contracts/contracts/task_store/src/lib.rs
index 4ae137b1..689a3752 100644
--- a/smart-contracts/contracts/task_store/src/lib.rs
+++ b/smart-contracts/contracts/task_store/src/lib.rs
@@ -8,9 +8,10 @@ pub use types::{
     TASK_LIFECYCLE_EVENT_VERSION,
 };
 
-use soroban_sdk::{contract, contractimpl, symbol_short, Address, Bytes, BytesN, Env, Vec};
+use soroban_sdk::{contract, contractimpl, symbol_short, Address, Bytes, BytesN, Env, String, Vec};
 
 const SECONDS_PER_DAY: u64 = 86_400;
+const CONTRACT_VERSION: &str = "1.0.0";
 
 fn ttl_ledgers(ttl_days: u32) -> u32 {
     ttl_days.saturating_mul(LEDGERS_PER_DAY)
@@ -65,6 +66,46 @@ pub struct TaskStoreContract;
 
 #[contractimpl]
 impl TaskStoreContract {
+    pub fn initialize(env: Env, admin: Address) -> Result<(), Error> {
+        if env.storage().instance().has(&DataKey::Admin) {
+            return Err(Error::AlreadyInitialized);
+        }
+        admin.require_auth();
+        env.storage().instance().set(&DataKey::Admin, &admin);
+        env.storage()
+            .instance()
+            .set(&DataKey::Version, &String::from_str(&env, CONTRACT_VERSION));
+        Ok(())
+    }
+
+    pub fn admin(env: Env) -> Option<Address> {
+        env.storage().instance().get(&DataKey::Admin)
+    }
+
+    pub fn contract_version(env: Env) -> String {
+        env.storage()
+            .instance()
+            .get(&DataKey::Version)
+            .unwrap_or_else(|| String::from_str(&env, CONTRACT_VERSION))
+    }
+
+    pub fn upgrade(
+        env: Env,
+        new_wasm_hash: BytesN<32>,
+        new_version: String,
+    ) -> Result<(), Error> {
+        let admin = require_admin(&env)?;
+        let old_version = Self::contract_version(env.clone());
+        env.deployer()
+            .update_current_contract_wasm(new_wasm_hash.clone());
+        env.storage().instance().set(&DataKey::Version, &new_version);
+        env.events().publish(
+            (symbol_short!("task_str"), symbol_short!("upgraded")),
+            (old_version, new_version, new_wasm_hash, admin, env.ledger().sequence()),
+        );
+        Ok(())
+    }
+
     pub fn store_task_metadata(
         env: Env,
         submitter: Address,
diff --git a/smart-contracts/contracts/task_store/src/types.rs b/smart-contracts/contracts/task_store/src/types.rs
index 875239ff..c546f3ae 100644
--- a/smart-contracts/contracts/task_store/src/types.rs
+++ b/smart-contracts/contracts/task_store/src/types.rs
@@ -35,6 +35,8 @@ pub struct TaskMetadata {
 #[contracttype]
 #[derive(Clone)]
 pub enum DataKey {
+    Admin,
+    Version,
     Task(BytesN<32>),
 }
 
@@ -94,4 +96,8 @@ pub enum Error {
     NotAssignedAgent = 7,
     InvalidStatusTransition = 8,
     Expired = 9,
+    AlreadyInitialized = 10,
+    NotInitialized = 11,
+    Unauthorized = 12,
+    UpgradeFailed = 13,
 }
diff --git a/smart-contracts/deployments/futurenet.json.template b/smart-contracts/deployments/futurenet.json.template
index 25810e24..21621b0a 100644
--- a/smart-contracts/deployments/futurenet.json.template
+++ b/smart-contracts/deployments/futurenet.json.template
@@ -3,6 +3,60 @@
   "rpc_url": "https://rpc-futurenet.stellar.org",
   "horizon_url": "https://horizon-futurenet.stellar.org",
   "deployed_at": null,
-  "contracts": {},
+  "contracts": {
+    "agent-registry": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "agent-bidding": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "task-store": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "error-resolver": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "error-registry": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    }
+  },
+  "upgrade_verification": {
+    "script": "scripts/verified-upgrade-sequence.sh",
+    "network": "futurenet",
+    "verification_network": "futurenet",
+    "requires_live_testnet": false,
+    "contracts": [
+      "agent-registry",
+      "agent-bidding",
+      "task-store",
+      "error-resolver",
+      "error-registry"
+    ]
+  },
   "deployment_history": []
 }
diff --git a/smart-contracts/deployments/mainnet.json.template b/smart-contracts/deployments/mainnet.json.template
index cb048831..2d9a6650 100644
--- a/smart-contracts/deployments/mainnet.json.template
+++ b/smart-contracts/deployments/mainnet.json.template
@@ -3,6 +3,60 @@
   "rpc_url": "https://soroban-rpc.stellar.org",
   "horizon_url": "https://horizon.stellar.org",
   "deployed_at": null,
-  "contracts": {},
+  "contracts": {
+    "agent-registry": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "agent-bidding": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "task-store": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "error-resolver": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "error-registry": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    }
+  },
+  "upgrade_verification": {
+    "script": "scripts/verified-upgrade-sequence.sh",
+    "network": "mainnet",
+    "verification_network": "testnet",
+    "requires_live_testnet": true,
+    "contracts": [
+      "agent-registry",
+      "agent-bidding",
+      "task-store",
+      "error-resolver",
+      "error-registry"
+    ]
+  },
   "deployment_history": []
 }
diff --git a/smart-contracts/deployments/testnet.json.template b/smart-contracts/deployments/testnet.json.template
index b99a5fdc..cff2b4d2 100644
--- a/smart-contracts/deployments/testnet.json.template
+++ b/smart-contracts/deployments/testnet.json.template
@@ -3,6 +3,60 @@
   "rpc_url": "https://soroban-testnet.stellar.org",
   "horizon_url": "https://horizon-testnet.stellar.org",
   "deployed_at": null,
-  "contracts": {},
+  "contracts": {
+    "agent-registry": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "agent-bidding": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "task-store": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "error-resolver": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    },
+    "error-registry": {
+      "contract_id": null,
+      "wasm_hash": null,
+      "version": "1.0.0",
+      "admin": null,
+      "upgrade_function": "upgrade",
+      "version_function": "contract_version"
+    }
+  },
+  "upgrade_verification": {
+    "script": "scripts/verified-upgrade-sequence.sh",
+    "network": "testnet",
+    "verification_network": "testnet",
+    "requires_live_testnet": true,
+    "contracts": [
+      "agent-registry",
+      "agent-bidding",
+      "task-store",
+      "error-resolver",
+      "error-registry"
+    ]
+  },
   "deployment_history": []
 }
diff --git a/smart-contracts/scripts/verified-upgrade-sequence.sh b/smart-contracts/scripts/verified-upgrade-sequence.sh
new file mode 100755
index 00000000..f7b61d48
--- /dev/null
+++ b/smart-contracts/scripts/verified-upgrade-sequence.sh
@@ -0,0 +1,183 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+NETWORK="${NETWORK:-testnet}"
+NEW_VERSION="${NEW_VERSION:-1.0.1-upgrade-check}"
+SKIP_BUILD="${SKIP_BUILD:-false}"
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+MANIFEST="${MANIFEST:-$PROJECT_ROOT/deployments/${NETWORK}.json}"
+TARGET_DIR="$PROJECT_ROOT/target/wasm32-unknown-unknown/release"
+
+CONTRACTS=(
+  "agent-registry:agent_registry"
+  "agent-bidding:agent_bidding"
+  "task-store:task_store"
+  "error-resolver:error_resolver"
+  "error-registry:error_registry"
+)
+
+usage() {
+  cat <<EOF
+Usage: NETWORK=testnet NEW_VERSION=1.0.1 $0
+
+Runs the verified live-testnet upgrade sequence for ai-net contracts.
+
+Required environment:
+  STELLAR_SECRET_KEY   Source account with admin authority for every contract.
+
+Optional environment:
+  NETWORK              testnet, futurenet, or mainnet. Defaults to testnet.
+  MANIFEST             Deployment manifest path. Defaults to deployments/<network>.json.
+  NEW_VERSION          Version string written by contract_version after upgrade.
+  SKIP_BUILD           true to reuse existing release WASM artifacts.
+EOF
+}
+
+network_passphrase() {
+  case "$NETWORK" in
+    testnet) echo "Test SDF Network ; September 2015" ;;
+    futurenet) echo "Test SDF Future Network ; October 2022" ;;
+    mainnet) echo "Public Global Stellar Network ; September 2015" ;;
+    *) echo "Unsupported NETWORK=$NETWORK" >&2; exit 1 ;;
+  esac
+}
+
+rpc_url() {
+  if [[ -n "${STELLAR_RPC_URL:-}" ]]; then
+    echo "$STELLAR_RPC_URL"
+    return
+  fi
+
+  case "$NETWORK" in
+    testnet) echo "https://soroban-testnet.stellar.org" ;;
+    futurenet) echo "https://rpc-futurenet.stellar.org" ;;
+    mainnet) echo "https://mainnet.sorobanrpc.com" ;;
+    *) echo "Unsupported NETWORK=$NETWORK" >&2; exit 1 ;;
+  esac
+}
+
+require_tools() {
+  command -v soroban >/dev/null || { echo "soroban CLI is required" >&2; exit 1; }
+  command -v jq >/dev/null || { echo "jq is required" >&2; exit 1; }
+  [[ -n "${STELLAR_SECRET_KEY:-}" ]] || { echo "STELLAR_SECRET_KEY is required" >&2; exit 1; }
+  [[ -f "$MANIFEST" ]] || { echo "Manifest not found: $MANIFEST" >&2; exit 1; }
+}
+
+build_contracts() {
+  if [[ "$SKIP_BUILD" == "true" ]]; then
+    echo "Skipping contract build"
+    return
+  fi
+  cargo build --manifest-path "$PROJECT_ROOT/Cargo.toml" --target wasm32-unknown-unknown --release
+}
+
+contract_id() {
+  local name="$1"
+  jq -r --arg name "$name" '.contracts[$name].contract_id // empty' "$MANIFEST"
+}
+
+invoke() {
+  local contract="$1"
+  shift
+  soroban contract invoke \
+    --id "$contract" \
+    --source "$STELLAR_SECRET_KEY" \
+    --rpc-url "$(rpc_url)" \
+    --network-passphrase "$(network_passphrase)" \
+    -- "$@"
+}
+
+install_wasm() {
+  local wasm="$1"
+  soroban contract install \
+    --wasm "$wasm" \
+    --source "$STELLAR_SECRET_KEY" \
+    --rpc-url "$(rpc_url)" \
+    --network-passphrase "$(network_passphrase)"
+}
+
+update_manifest() {
+  local name="$1"
+  local wasm_hash="$2"
+  local old_version="$3"
+  local timestamp
+  timestamp="$(date -u +"%Y-%m-%dT%H:%M:%SZ")"
+
+  local tmp
+  tmp="$(mktemp)"
+  jq \
+    --arg name "$name" \
+    --arg wasmHash "$wasm_hash" \
+    --arg oldVersion "$old_version" \
+    --arg newVersion "$NEW_VERSION" \
+    --arg timestamp "$timestamp" \
+    '.contracts[$name].wasm_hash = $wasmHash |
+     .contracts[$name].version = $newVersion |
+     .contracts[$name].upgraded_at = $timestamp |
+     .deployment_history += [{
+       action: "verified-upgrade",
+       contract: $name,
+       old_version: $oldVersion,
+       new_version: $newVersion,
+       wasm_hash: $wasmHash,
+       network: .network,
+       timestamp: $timestamp
+     }]' "$MANIFEST" > "$tmp"
+  mv "$tmp" "$MANIFEST"
+}
+
+verify_contract() {
+  local name="$1"
+  local wasm_name="$2"
+  local id
+  id="$(contract_id "$name")"
+  [[ -n "$id" && "$id" != "null" ]] || { echo "Missing contract_id for $name" >&2; exit 1; }
+
+  local wasm="$TARGET_DIR/${wasm_name}.wasm"
+  [[ -f "$wasm" ]] || { echo "Missing WASM for $name: $wasm" >&2; exit 1; }
+
+  echo "Verifying $name at $id"
+  local admin
+  admin="$(invoke "$id" admin)"
+  [[ -n "$admin" && "$admin" != "null" ]] || { echo "$name did not expose admin" >&2; exit 1; }
+
+  local old_version
+  old_version="$(invoke "$id" contract_version)"
+  [[ -n "$old_version" ]] || { echo "$name did not expose contract_version" >&2; exit 1; }
+
+  local wasm_hash
+  wasm_hash="$(install_wasm "$wasm" | grep -Eo '[A-Fa-f0-9]{64}' | head -1)"
+  [[ -n "$wasm_hash" ]] || { echo "No WASM hash returned for $name" >&2; exit 1; }
+
+  invoke "$id" upgrade --new_wasm_hash "$wasm_hash" --new_version "$NEW_VERSION" >/dev/null
+
+  local observed_version
+  observed_version="$(invoke "$id" contract_version)"
+  [[ "$observed_version" == "$NEW_VERSION" ]] || {
+    echo "$name version mismatch: expected $NEW_VERSION, got $observed_version" >&2
+    exit 1
+  }
+
+  update_manifest "$name" "$wasm_hash" "$old_version"
+  echo "$name upgraded and verified: $old_version -> $observed_version"
+}
+
+main() {
+  if [[ "${1:-}" == "-h" || "${1:-}" == "--help" ]]; then
+    usage
+    exit 0
+  fi
+
+  require_tools
+  build_contracts
+
+  for entry in "${CONTRACTS[@]}"; do
+    IFS=":" read -r name wasm_name <<< "$entry"
+    verify_contract "$name" "$wasm_name"
+  done
+}
+
+main "$@"