@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/usage/pages/UsagePage.js

@@ -24,7 +24,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 		default: return /* @__PURE__ */ A(C, { className: `${n} ${t.neutral.icon}` });
 	}
 }, N = ({ status: e }) => /* @__PURE__ */ A("span", {
-	className: `px-2 py-0.5 text-xs font-medium rounded ${{
+	className: `px-2 py-0.5 text-xs font-medium rounded-full ${{
 		EXHAUSTED: `${t.error.bg} ${t.error.text}`,
 		CRITICAL: `${t.error.bg} ${t.error.text}`,
 		WARNING: `${t.warning.bg} ${t.warning.text}`,
@@ -35,7 +35,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 }), P = ({ percentage: e, status: n }) => {
 	let r = Math.min(100, Math.max(0, e));
 	return /* @__PURE__ */ A("div", {
-		className: "w-full bg-muted rounded-full h-2.5 overflow-hidden",
+		className: "w-full bg-bg-sunken rounded-full h-2.5 overflow-hidden",
 		children: /* @__PURE__ */ A("div", {
 			className: `h-full rounded-full transition-all duration-300 ${{
 				EXHAUSTED: t.error.dot,
@@ -55,18 +55,6 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 		red: t.error,
 		gray: t.neutral
 	}[i], c = {
-		blue: `${s.bg} ${s.border}`,
-		emerald: `${s.bg} ${s.border}`,
-		amber: `${s.bg} ${s.border}`,
-		red: `${s.bg} ${s.border}`,
-		gray: `${s.bg} ${s.border}`
-	}, l = {
-		blue: `ring-2 ring-offset-2 dark:ring-offset-background ${t.info.border.replace("border-", "ring-")}`,
-		emerald: `ring-2 ring-offset-2 dark:ring-offset-background ${t.success.border.replace("border-", "ring-")}`,
-		amber: `ring-2 ring-offset-2 dark:ring-offset-background ${t.warning.border.replace("border-", "ring-")}`,
-		red: `ring-2 ring-offset-2 dark:ring-offset-background ${t.error.border.replace("border-", "ring-")}`,
-		gray: `ring-2 ring-offset-2 dark:ring-offset-background ${t.neutral.border.replace("border-", "ring-")}`
-	}, u = {
 		blue: t.info.icon,
 		emerald: t.success.icon,
 		amber: t.warning.icon,
@@ -76,18 +64,22 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 	return /* @__PURE__ */ j("button", {
 		type: "button",
 		onClick: o,
-		className: `border rounded-lg p-4 w-full text-left transition-all ${c[i]} ${o ? "cursor-pointer hover:shadow-md" : ""} ${a ? l[i] : ""}`,
+		"aria-pressed": a,
+		className: `rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 w-full text-left ${o ? "cursor-pointer transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]" : ""} ${a ? "ring-1 ring-[var(--color-focus-ring)] border-border-strong" : ""}`,
 		children: [/* @__PURE__ */ j("div", {
-			className: "flex items-center gap-2 mb-2",
+			className: "flex items-start justify-between gap-3",
 			children: [/* @__PURE__ */ A("span", {
-				className: u[i],
-				children: r
-			}), /* @__PURE__ */ A("span", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-text-secondary",
 				children: e
+			}), /* @__PURE__ */ A("span", {
+				className: `flex size-9 shrink-0 items-center justify-center rounded-lg ${s.bg}`,
+				children: /* @__PURE__ */ A("span", {
+					className: c[i],
+					children: r
+				})
 			})]
 		}), /* @__PURE__ */ A("p", {
-			className: "text-2xl font-bold text-foreground",
+			className: "mt-2 text-2xl font-semibold tabular-nums text-text-primary",
 			children: n
 		})]
 	});
@@ -95,31 +87,31 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 	let r = e.totalLimit != null && e.totalLimit > 0 && !e.noLimit;
 	return /* @__PURE__ */ j("tr", {
 		onClick: n,
-		className: "cursor-pointer hover:bg-muted/40 transition-colors border-b border-border last:border-b-0",
+		className: "cursor-pointer hover:bg-bg-sunken transition-colors border-b border-border-subtle last:border-b-0",
 		children: [
 			/* @__PURE__ */ j("td", {
 				className: "px-4 py-3",
 				children: [
 					/* @__PURE__ */ A("span", {
-						className: "text-sm font-medium text-primary hover:underline capitalize",
+						className: "text-sm font-medium text-text-link hover:underline capitalize",
 						children: e.displayName || e.name.replace(/_/g, " ")
 					}),
 					/* @__PURE__ */ A("span", {
-						className: "block text-xs font-mono text-muted-foreground mt-0.5",
+						className: "block text-xs font-mono text-text-muted mt-0.5",
 						children: e.name
 					}),
 					e.description && /* @__PURE__ */ A("span", {
-						className: "block text-xs text-muted-foreground mt-0.5 max-w-[220px] truncate",
+						className: "block text-xs text-text-secondary mt-0.5 max-w-[220px] truncate",
 						children: e.description
 					}),
 					e.quotaCount > 1 && /* @__PURE__ */ j("span", {
-						className: "block text-xs text-muted-foreground mt-0.5",
+						className: "block text-xs text-text-secondary mt-0.5",
 						children: [e.quotaCount, " assignments"]
 					})
 				]
 			}),
 			t !== void 0 && /* @__PURE__ */ A("td", {
-				className: "px-4 py-3 text-sm text-muted-foreground whitespace-nowrap",
+				className: "px-4 py-3 text-sm text-text-secondary whitespace-nowrap",
 				children: t
 			}),
 			/* @__PURE__ */ A("td", {
@@ -127,7 +119,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 				children: /* @__PURE__ */ j("div", {
 					className: "space-y-1.5",
 					children: [/* @__PURE__ */ j("span", {
-						className: "text-sm text-foreground tabular-nums",
+						className: "text-sm text-text-primary tabular-nums",
 						children: [
 							i(e.totalUsed),
 							"\xA0/\xA0",
@@ -141,7 +133,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 				})
 			}),
 			/* @__PURE__ */ A("td", {
-				className: "px-4 py-3 text-sm text-muted-foreground tabular-nums whitespace-nowrap",
+				className: "px-4 py-3 text-sm text-text-secondary tabular-nums whitespace-nowrap",
 				children: r ? i(e.totalLimit) : "∞"
 			}),
 			/* @__PURE__ */ A("td", {
@@ -151,30 +143,30 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 		]
 	});
 }, re = ({ quotas: e, planLabel: t, showPlanColumn: n = !0, onQuotaClick: r }) => /* @__PURE__ */ A("div", {
-	className: "overflow-x-auto rounded-lg border border-border bg-card",
+	className: "overflow-x-auto rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1",
 	children: /* @__PURE__ */ j("table", {
 		className: "w-full text-left",
 		children: [/* @__PURE__ */ A("thead", { children: /* @__PURE__ */ j("tr", {
-			className: "border-b border-border bg-muted/30",
+			className: "border-b border-border-subtle bg-bg-sunken",
 			children: [
 				/* @__PURE__ */ A("th", {
-					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+					className: "px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider",
 					children: "Quotas"
 				}),
 				n && /* @__PURE__ */ A("th", {
-					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+					className: "px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider",
 					children: "Plan"
 				}),
 				/* @__PURE__ */ A("th", {
-					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+					className: "px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider",
 					children: "Current Usage"
 				}),
 				/* @__PURE__ */ A("th", {
-					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+					className: "px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider",
 					children: "Limit"
 				}),
 				/* @__PURE__ */ A("th", {
-					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+					className: "px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider",
 					children: "Status"
 				})
 			]
@@ -194,27 +186,31 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 		upgraded: `${t.primary.bg} ${t.primary.text}`
 	};
 	return /* @__PURE__ */ j("div", {
-		className: "border border-border rounded-lg bg-card overflow-hidden",
+		className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 		children: [
 			/* @__PURE__ */ j("button", {
 				type: "button",
 				onClick: () => a(!i),
-				className: "w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors",
+				"aria-expanded": i,
+				className: "w-full flex items-center justify-between p-4 hover:bg-bg-sunken transition-colors",
 				children: [/* @__PURE__ */ j("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ A(T, { className: "size-5 text-primary" }), /* @__PURE__ */ j("div", {
+					children: [/* @__PURE__ */ A("span", {
+						className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)]",
+						children: /* @__PURE__ */ A(T, { className: "size-5 text-text-link" })
+					}), /* @__PURE__ */ j("div", {
 						className: "text-left",
 						children: [/* @__PURE__ */ j("div", {
 							className: "flex items-center gap-2",
 							children: [/* @__PURE__ */ A("span", {
-								className: "font-medium text-foreground",
+								className: "font-medium text-text-primary",
 								children: "Subscription"
 							}), /* @__PURE__ */ A("span", {
-								className: `px-2 py-0.5 text-xs font-medium rounded capitalize ${o[e.status.toLowerCase()] || o.active}`,
+								className: `px-2 py-0.5 text-xs font-medium rounded-full capitalize ${o[e.status.toLowerCase()] || o.active}`,
 								children: e.status
 							})]
 						}), /* @__PURE__ */ j("p", {
-							className: "text-xs text-muted-foreground",
+							className: "text-xs text-text-secondary",
 							children: [
 								e.aggregatedQuotas.length,
 								" quota type",
@@ -222,10 +218,10 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 							]
 						})]
 					})]
-				}), A(i ? y : x, { className: "size-5 text-muted-foreground" })]
+				}), A(i ? y : x, { className: "size-5 text-text-muted" })]
 			}),
 			i && e.aggregatedQuotas.length > 0 && /* @__PURE__ */ A("div", {
-				className: "border-t border-border",
+				className: "border-t border-border-subtle",
 				children: /* @__PURE__ */ A(re, {
 					quotas: e.aggregatedQuotas,
 					planLabel: e.planName || e.productId || void 0,
@@ -234,9 +230,9 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 				})
 			}),
 			i && e.aggregatedQuotas.length === 0 && /* @__PURE__ */ A("div", {
-				className: "border-t border-border p-6 text-center",
+				className: "border-t border-border-subtle p-6 text-center",
 				children: /* @__PURE__ */ A("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: "No quotas assigned to this subscription"
 				})
 			})
@@ -254,13 +250,13 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: o
 		}), /* @__PURE__ */ j("div", {
-			className: "relative bg-background border border-border rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-auto",
+			className: "relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-2xl w-full mx-4 max-h-[90vh] overflow-auto",
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-labelledby": "quota-detail-title",
 			children: [
 				/* @__PURE__ */ j("div", {
-					className: "sticky top-0 bg-background border-b border-border p-4 flex items-center justify-between",
+					className: "sticky top-0 bg-bg-elevated border-b border-border-subtle p-4 flex items-center justify-between",
 					children: [/* @__PURE__ */ j("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ A(ne, {
@@ -269,19 +265,19 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 						}), /* @__PURE__ */ j("div", { children: [
 							/* @__PURE__ */ A("h2", {
 								id: "quota-detail-title",
-								className: "text-lg font-semibold capitalize",
+								className: "text-lg font-semibold capitalize text-text-primary",
 								children: n.displayName || n.name.replace(/_/g, " ")
 							}),
 							/* @__PURE__ */ A("p", {
-								className: "text-xs font-mono text-muted-foreground",
+								className: "text-xs font-mono text-text-muted",
 								children: n.name
 							}),
 							n.description && /* @__PURE__ */ A("p", {
-								className: "text-sm text-muted-foreground mt-0.5",
+								className: "text-sm text-text-secondary mt-0.5",
 								children: n.description
 							}),
 							/* @__PURE__ */ j("p", {
-								className: "text-sm text-muted-foreground mt-0.5",
+								className: "text-sm text-text-secondary mt-0.5",
 								children: [
 									n.quotaCount,
 									" quota assignment",
@@ -292,20 +288,20 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 					}), /* @__PURE__ */ A("button", {
 						type: "button",
 						onClick: o,
-						className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
+						className: "p-1 rounded-button text-text-secondary hover:text-text-primary hover:bg-bg-sunken transition-colors",
 						"aria-label": "Close quota details",
 						children: /* @__PURE__ */ A(D, { className: "size-5" })
 					})]
 				}),
 				/* @__PURE__ */ j("div", {
-					className: "p-4 border-b border-border",
+					className: "p-4 border-b border-border-subtle",
 					children: [/* @__PURE__ */ j("div", {
 						className: "mb-4",
 						children: [
 							/* @__PURE__ */ j("div", {
 								className: "flex items-center justify-between mb-2",
 								children: [/* @__PURE__ */ A("span", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "Usage"
 								}), /* @__PURE__ */ A(N, { status: n.status })]
 							}),
@@ -316,7 +312,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 							/* @__PURE__ */ j("div", {
 								className: "flex items-center justify-between mt-2 text-sm",
 								children: [/* @__PURE__ */ j("span", {
-									className: "font-medium",
+									className: "font-medium text-text-primary tabular-nums",
 									children: [
 										i(n.totalUsed),
 										" /",
@@ -325,7 +321,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 										n.unit && ` ${n.unit}`
 									]
 								}), /* @__PURE__ */ A("span", {
-									className: "text-muted-foreground",
+									className: "text-text-secondary",
 									children: n.totalLimit != null && n.totalLimit > 0 ? `${Math.round(n.usagePercentage)}% used` : "Unlimited"
 								})]
 							})
@@ -333,36 +329,36 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 					}), n.quotaCount > 1 && /* @__PURE__ */ j("div", {
 						className: "mt-4",
 						children: [/* @__PURE__ */ A("h3", {
-							className: "text-sm font-medium text-foreground mb-3",
+							className: "text-sm font-medium text-text-primary mb-3",
 							children: "Quota Breakdown"
 						}), /* @__PURE__ */ A("div", {
-							className: "border border-border rounded-lg overflow-hidden divide-y divide-border",
+							className: "border border-border-subtle rounded-card overflow-hidden divide-y divide-border-subtle",
 							children: [...n.quotaAssignments].sort((e, t) => (e.endtime ? new Date(e.endtime).getTime() : Infinity) - (t.endtime ? new Date(t.endtime).getTime() : Infinity)).map((e) => {
 								let n = e.endtime ? new Date(e.endtime) : null, r = /* @__PURE__ */ new Date(), a = n && n < r, o = n ? Math.ceil((n.getTime() - r.getTime()) / (1440 * 60 * 1e3)) : null, s = o !== null && o > 0 && o <= 7;
 								return /* @__PURE__ */ j("div", {
-									className: `flex items-center justify-between px-3 py-2.5 ${a ? "bg-muted/30" : s ? t.warning.bg : "bg-background"}`,
+									className: `flex items-center justify-between px-3 py-2.5 ${a ? "bg-bg-sunken" : s ? t.warning.bg : "bg-bg-surface"}`,
 									children: [/* @__PURE__ */ j("div", {
 										className: "flex items-center gap-2",
 										children: [s && !a && /* @__PURE__ */ A("span", { className: `size-2 rounded-full ${t.warning.dot} animate-pulse` }), /* @__PURE__ */ j("div", {
 											className: "flex flex-col",
 											children: [/* @__PURE__ */ A("span", {
-												className: `text-sm ${a ? "text-muted-foreground" : "text-foreground"}`,
+												className: `text-sm ${a ? "text-text-muted" : "text-text-primary"}`,
 												children: n ? n.toLocaleDateString("en-US", {
 													month: "short",
 													day: "numeric",
 													year: "numeric"
 												}) : "No expiry"
 											}), /* @__PURE__ */ A("span", {
-												className: `text-xs ${a ? "text-destructive" : s ? t.warning.text : "text-muted-foreground"}`,
+												className: `text-xs ${a ? "text-status-error-text" : s ? t.warning.text : "text-text-secondary"}`,
 												children: a ? "Expired" : o === null ? "Never expires" : o === 0 ? "Expires today" : o === 1 ? "Expires tomorrow" : `${o} days left`
 											})]
 										})]
 									}), /* @__PURE__ */ A("div", {
 										className: "text-right",
 										children: /* @__PURE__ */ j("span", {
-											className: `text-sm font-semibold ${a ? "text-muted-foreground" : "text-foreground"}`,
+											className: `text-sm font-semibold tabular-nums ${a ? "text-text-muted" : "text-text-primary"}`,
 											children: [i(e.used), /* @__PURE__ */ j("span", {
-												className: "text-muted-foreground font-normal",
+												className: "text-text-secondary font-normal",
 												children: [
 													" / ",
 													e.limit != null && e.limit > 0 ? i(e.limit) : "∞",
@@ -377,9 +373,9 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 					})]
 				}),
 				(C || S.length > 0) && /* @__PURE__ */ j("div", {
-					className: "p-4 border-t border-border",
+					className: "p-4 border-t border-border-subtle",
 					children: [/* @__PURE__ */ A("h3", {
-						className: "text-sm font-medium text-foreground mb-3",
+						className: "text-sm font-medium text-text-primary mb-3",
 						children: "Live Value History"
 					}), C ? /* @__PURE__ */ A("div", {
 						className: "space-y-1.5",
@@ -387,24 +383,24 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 							1,
 							2,
 							3
-						].map((e) => /* @__PURE__ */ A("div", { className: "h-8 bg-muted animate-pulse rounded" }, e))
+						].map((e) => /* @__PURE__ */ A("div", { className: "h-8 bg-bg-sunken animate-pulse rounded" }, e))
 					}) : /* @__PURE__ */ A("div", {
 						className: "space-y-1.5",
 						children: S.map((e) => /* @__PURE__ */ j("div", {
-							className: "flex items-center justify-between px-3 py-2 bg-muted/30 rounded-md",
+							className: "flex items-center justify-between px-3 py-2 bg-bg-sunken rounded-button",
 							children: [/* @__PURE__ */ A("span", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: r(e.snapshotAt)
 							}), /* @__PURE__ */ j("span", {
-								className: "text-sm font-medium text-foreground tabular-nums",
+								className: "text-sm font-medium text-text-primary tabular-nums",
 								children: [
 									i(e.value),
 									n.unit && /* @__PURE__ */ A("span", {
-										className: "text-xs text-muted-foreground ml-1",
+										className: "text-xs text-text-secondary ml-1",
 										children: n.unit
 									}),
 									!e.noLimit && e.limit != null && /* @__PURE__ */ j("span", {
-										className: "text-xs text-muted-foreground ml-1",
+										className: "text-xs text-text-secondary ml-1",
 										children: ["/ ", i(e.limit)]
 									})
 								]
@@ -416,11 +412,11 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 					className: "p-4",
 					children: [
 						/* @__PURE__ */ A("h3", {
-							className: "text-sm font-medium text-foreground mb-3",
+							className: "text-sm font-medium text-text-primary mb-3",
 							children: "Recent Usage"
 						}),
 						n.isCollectorBased ? /* @__PURE__ */ A("p", {
-							className: "text-sm text-muted-foreground text-center py-6",
+							className: "text-sm text-text-secondary text-center py-6",
 							children: "Usage is tracked via system metrics, individual event records are not available for this quota."
 						}) : y ? /* @__PURE__ */ A("div", {
 							className: "space-y-2",
@@ -428,21 +424,21 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 								1,
 								2,
 								3
-							].map((e) => /* @__PURE__ */ A("div", { className: "h-12 bg-muted animate-pulse rounded" }, e))
+							].map((e) => /* @__PURE__ */ A("div", { className: "h-12 bg-bg-sunken animate-pulse rounded" }, e))
 						}) : g.length === 0 ? /* @__PURE__ */ A("p", {
-							className: "text-sm text-muted-foreground text-center py-6",
+							className: "text-sm text-text-secondary text-center py-6",
 							children: "No usage records found"
 						}) : /* @__PURE__ */ A("div", {
 							className: "space-y-2",
 							children: g.map((e) => /* @__PURE__ */ j("div", {
-								className: "flex items-center justify-between p-3 border border-border rounded-lg",
+								className: "flex items-center justify-between p-3 border border-border-subtle rounded-card",
 								children: [/* @__PURE__ */ j("div", {
 									className: "flex-1 min-w-0",
 									children: [/* @__PURE__ */ A("p", {
-										className: "text-sm font-medium text-foreground",
+										className: "text-sm font-medium text-text-primary",
 										children: e.description || "Usage recorded"
 									}), /* @__PURE__ */ j("p", {
-										className: "text-xs text-muted-foreground",
+										className: "text-xs text-text-secondary",
 										children: [
 											a(e.timestamp),
 											" • ",
@@ -450,7 +446,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 										]
 									})]
 								}), /* @__PURE__ */ A("span", {
-									className: "text-sm font-medium text-foreground ml-4",
+									className: "text-sm font-medium text-text-primary ml-4 tabular-nums",
 									children: i(e.amount)
 								})]
 							}, e.id))
@@ -462,19 +458,19 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 									type: "button",
 									onClick: T,
 									disabled: s.length === 1,
-									className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50",
+									className: "px-3 py-1.5 text-sm border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken transition-colors disabled:opacity-50",
 									"aria-label": "Previous usage page",
 									children: /* @__PURE__ */ A(b, { className: "size-4" })
 								}),
 								/* @__PURE__ */ j("span", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary tabular-nums",
 									children: ["Page ", f]
 								}),
 								/* @__PURE__ */ A("button", {
 									type: "button",
 									onClick: w,
 									disabled: !_,
-									className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50",
+									className: "px-3 py-1.5 text-sm border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken transition-colors disabled:opacity-50",
 									"aria-label": "Next usage page",
 									children: /* @__PURE__ */ A(x, { className: "size-4" })
 								})
@@ -483,11 +479,11 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 					]
 				}),
 				/* @__PURE__ */ A("div", {
-					className: "sticky bottom-0 bg-background border-t border-border p-4",
+					className: "sticky bottom-0 bg-bg-elevated border-t border-border-subtle p-4",
 					children: /* @__PURE__ */ A("button", {
 						type: "button",
 						onClick: o,
-						className: "w-full py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						className: "w-full py-2 px-4 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 						children: "Close"
 					})
 				})
@@ -532,20 +528,20 @@ var oe = ({ workspaceId: e }) => {
 			1,
 			2,
 			3
-		].map((e) => /* @__PURE__ */ A("div", { className: "h-16 bg-muted animate-pulse rounded-lg" }, e))
+		].map((e) => /* @__PURE__ */ A("div", { className: "h-16 bg-bg-sunken animate-pulse rounded-card" }, e))
 	});
 	if (o) return /* @__PURE__ */ j("div", {
 		className: "text-center py-8 space-y-2",
 		children: [
-			/* @__PURE__ */ A(_, { className: "size-8 text-destructive mx-auto" }),
+			/* @__PURE__ */ A(_, { className: "size-8 text-status-error-text mx-auto" }),
 			/* @__PURE__ */ A("p", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-text-secondary",
 				children: o.message
 			}),
 			/* @__PURE__ */ A("button", {
 				type: "button",
 				onClick: () => s(),
-				className: "px-3 py-1.5 text-sm border border-border rounded-md hover:bg-muted/50 transition-colors",
+				className: "px-3 py-1.5 text-sm border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken transition-colors",
 				children: "Retry"
 			})
 		]
@@ -553,13 +549,16 @@ var oe = ({ workspaceId: e }) => {
 	if (r.length === 0) return /* @__PURE__ */ j("div", {
 		className: "text-center py-12 space-y-2",
 		children: [
-			/* @__PURE__ */ A(w, { className: "size-10 text-muted-foreground mx-auto opacity-40" }),
+			/* @__PURE__ */ A("div", {
+				className: "size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-2",
+				children: /* @__PURE__ */ A(w, { className: "size-6 text-text-link" })
+			}),
 			/* @__PURE__ */ A("h3", {
-				className: "text-base font-medium text-foreground",
+				className: "text-base font-semibold text-text-primary",
 				children: "No workspace quotas assigned"
 			}),
 			/* @__PURE__ */ A("p", {
-				className: "text-sm text-muted-foreground max-w-sm mx-auto",
+				className: "text-sm text-text-secondary max-w-sm mx-auto",
 				children: "Quotas are assigned to this workspace after a successful purchase. If you have an active subscription, contact support."
 			})
 		]
@@ -572,97 +571,106 @@ var oe = ({ workspaceId: e }) => {
 				className: "grid grid-cols-3 gap-3",
 				children: [
 					/* @__PURE__ */ j("div", {
-						className: `border rounded-lg p-3 ${t.success.bg} ${t.success.border}`,
+						className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4",
 						children: [/* @__PURE__ */ j("div", {
 							className: "flex items-center gap-1.5 mb-1",
-							children: [/* @__PURE__ */ A(v, { className: `size-4 ${t.success.icon}` }), /* @__PURE__ */ A("span", {
-								className: "text-xs text-muted-foreground",
+							children: [/* @__PURE__ */ A("span", {
+								className: `flex size-7 items-center justify-center rounded-lg ${t.success.bg}`,
+								children: /* @__PURE__ */ A(v, { className: `size-4 ${t.success.icon}` })
+							}), /* @__PURE__ */ A("span", {
+								className: "text-xs text-text-secondary",
 								children: "Healthy"
 							})]
 						}), /* @__PURE__ */ A("p", {
-							className: "text-xl font-bold text-foreground",
+							className: "text-xl font-semibold tabular-nums text-text-primary",
 							children: y
 						})]
 					}),
 					/* @__PURE__ */ j("div", {
-						className: `border rounded-lg p-3 ${t.warning.bg} ${t.warning.border}`,
+						className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4",
 						children: [/* @__PURE__ */ j("div", {
 							className: "flex items-center gap-1.5 mb-1",
-							children: [/* @__PURE__ */ A(g, { className: `size-4 ${t.warning.icon}` }), /* @__PURE__ */ A("span", {
-								className: "text-xs text-muted-foreground",
+							children: [/* @__PURE__ */ A("span", {
+								className: `flex size-7 items-center justify-center rounded-lg ${t.warning.bg}`,
+								children: /* @__PURE__ */ A(g, { className: `size-4 ${t.warning.icon}` })
+							}), /* @__PURE__ */ A("span", {
+								className: "text-xs text-text-secondary",
 								children: "Warning"
 							})]
 						}), /* @__PURE__ */ A("p", {
-							className: "text-xl font-bold text-foreground",
+							className: "text-xl font-semibold tabular-nums text-text-primary",
 							children: b
 						})]
 					}),
 					/* @__PURE__ */ j("div", {
-						className: `border rounded-lg p-3 ${t.error.bg} ${t.error.border}`,
+						className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4",
 						children: [/* @__PURE__ */ j("div", {
 							className: "flex items-center gap-1.5 mb-1",
-							children: [/* @__PURE__ */ A(O, { className: `size-4 ${t.error.icon}` }), /* @__PURE__ */ A("span", {
-								className: "text-xs text-muted-foreground",
+							children: [/* @__PURE__ */ A("span", {
+								className: `flex size-7 items-center justify-center rounded-lg ${t.error.bg}`,
+								children: /* @__PURE__ */ A(O, { className: `size-4 ${t.error.icon}` })
+							}), /* @__PURE__ */ A("span", {
+								className: "text-xs text-text-secondary",
 								children: "Critical / Exhausted"
 							})]
 						}), /* @__PURE__ */ A("p", {
-							className: "text-xl font-bold text-foreground",
+							className: "text-xl font-semibold tabular-nums text-text-primary",
 							children: S
 						})]
 					})
 				]
 			}),
 			/* @__PURE__ */ A("div", {
-				className: "border border-border rounded-lg overflow-hidden",
+				className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 				children: /* @__PURE__ */ j("table", {
 					className: "w-full text-sm",
 					children: [/* @__PURE__ */ A("thead", { children: /* @__PURE__ */ j("tr", {
-						className: "border-b border-border bg-muted/30",
+						className: "border-b border-border-subtle bg-bg-sunken",
 						children: [
 							/* @__PURE__ */ A("th", {
-								className: "text-left px-4 py-3 font-medium text-muted-foreground",
+								className: "text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs",
 								children: "Quota"
 							}),
 							/* @__PURE__ */ A("th", {
-								className: "text-left px-4 py-3 font-medium text-muted-foreground hidden sm:table-cell",
+								className: "text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs hidden sm:table-cell",
 								children: "Sources"
 							}),
 							/* @__PURE__ */ A("th", {
-								className: "text-left px-4 py-3 font-medium text-muted-foreground",
+								className: "text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs",
 								children: "Usage"
 							}),
 							/* @__PURE__ */ A("th", {
-								className: "text-left px-4 py-3 font-medium text-muted-foreground hidden sm:table-cell",
+								className: "text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs hidden sm:table-cell",
 								children: "Remaining"
 							}),
 							/* @__PURE__ */ A("th", {
-								className: "text-left px-4 py-3 font-medium text-muted-foreground",
+								className: "text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs",
 								children: "Status"
 							})
 						]
 					}) }), /* @__PURE__ */ A("tbody", {
-						className: "divide-y divide-border",
+						className: "divide-y divide-border-subtle",
 						children: u.map((e) => {
 							let t = c.has(e.quotaName);
 							return /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ j("tr", {
-								className: `transition-colors ${e.hasMultiple ? "cursor-pointer hover:bg-muted/30" : "hover:bg-muted/20"}`,
+								className: `transition-colors ${e.hasMultiple ? "cursor-pointer hover:bg-bg-sunken" : "hover:bg-bg-sunken"}`,
 								onClick: e.hasMultiple ? () => p(e.quotaName) : void 0,
 								children: [
 									/* @__PURE__ */ A("td", {
 										className: "px-4 py-3",
 										children: /* @__PURE__ */ j("div", {
 											className: "flex items-center gap-2",
-											children: [e.hasMultiple && /* @__PURE__ */ A(x, { className: `size-4 text-muted-foreground shrink-0 transition-transform duration-150 ${t ? "rotate-90" : ""}` }), /* @__PURE__ */ j("div", { children: [
+											children: [e.hasMultiple && /* @__PURE__ */ A(x, { className: `size-4 text-text-muted shrink-0 transition-transform duration-150 ${t ? "rotate-90" : ""}` }), /* @__PURE__ */ j("div", { children: [
 												/* @__PURE__ */ A("div", {
-													className: "font-medium text-foreground",
+													className: "font-medium text-text-primary",
 													children: M(e.quotaName)
 												}),
 												/* @__PURE__ */ A("div", {
-													className: "text-xs font-mono text-muted-foreground mt-0.5",
+													className: "text-xs font-mono text-text-muted mt-0.5",
 													children: e.quotaName
 												}),
 												e.hasLive && /* @__PURE__ */ A("div", {
-													className: "text-xs text-muted-foreground mt-0.5",
+													className: "text-xs text-text-secondary mt-0.5",
 													children: "Live · updated ~60s"
 												})
 											] })]
@@ -671,15 +679,15 @@ var oe = ({ workspaceId: e }) => {
 									/* @__PURE__ */ A("td", {
 										className: "px-4 py-3 hidden sm:table-cell",
 										children: e.hasMultiple ? /* @__PURE__ */ j("span", {
-											className: "text-xs bg-accent text-accent-foreground px-1.5 py-0.5 rounded font-medium",
+											className: "text-xs bg-[var(--color-accent-soft)] text-text-link px-1.5 py-0.5 rounded font-medium",
 											children: [e.items.length, " subscriptions"]
 										}) : /* @__PURE__ */ j("div", {
 											className: "flex items-center gap-1.5",
 											children: [/* @__PURE__ */ A("span", {
-												className: "text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded",
+												className: "text-xs text-text-secondary bg-bg-sunken px-1.5 py-0.5 rounded",
 												children: e.items[0]?.assignment.productId
 											}), /* @__PURE__ */ A("span", {
-												className: "text-xs text-muted-foreground capitalize",
+												className: "text-xs text-text-secondary capitalize",
 												children: e.items[0]?.assignment.quotaMode
 											})]
 										})
@@ -689,9 +697,9 @@ var oe = ({ workspaceId: e }) => {
 										children: /* @__PURE__ */ j("div", {
 											className: "space-y-1.5",
 											children: [/* @__PURE__ */ j("div", {
-												className: "text-foreground",
+												className: "text-text-primary tabular-nums",
 												children: [i(e.totalUsed), !e.noLimit && e.totalLimit != null && /* @__PURE__ */ j("span", {
-													className: "text-muted-foreground",
+													className: "text-text-secondary",
 													children: [
 														" ",
 														"/ ",
@@ -705,9 +713,9 @@ var oe = ({ workspaceId: e }) => {
 										})
 									}),
 									/* @__PURE__ */ A("td", {
-										className: "px-4 py-3 hidden sm:table-cell text-foreground",
+										className: "px-4 py-3 hidden sm:table-cell text-text-primary tabular-nums",
 										children: e.noLimit ? /* @__PURE__ */ A("span", {
-											className: "text-muted-foreground",
+											className: "text-text-secondary",
 											children: "Unlimited"
 										}) : i(e.totalRemaining ?? 0)
 									}),
@@ -719,12 +727,12 @@ var oe = ({ workspaceId: e }) => {
 							}, e.quotaName), t && e.items.map((e) => {
 								let t = L(e.usagePercentage, e.assignment.noLimit);
 								return /* @__PURE__ */ j("tr", {
-									className: "bg-muted/10 border-t border-dashed border-border/40",
+									className: "bg-bg-sunken/50 border-t border-dashed border-border-subtle",
 									children: [
 										/* @__PURE__ */ A("td", {
 											className: "pl-12 pr-4 py-2.5",
 											children: /* @__PURE__ */ j("div", {
-												className: "text-xs text-muted-foreground space-y-0.5",
+												className: "text-xs text-text-secondary space-y-0.5",
 												children: [/* @__PURE__ */ A("div", {
 													className: "font-mono truncate max-w-[200px]",
 													title: e.assignment.subscriptionId ?? void 0,
@@ -732,7 +740,7 @@ var oe = ({ workspaceId: e }) => {
 												}), /* @__PURE__ */ j("div", {
 													className: "flex items-center gap-1.5 flex-wrap",
 													children: [/* @__PURE__ */ A("span", {
-														className: "bg-muted px-1.5 py-0.5 rounded",
+														className: "bg-bg-sunken px-1.5 py-0.5 rounded",
 														children: e.assignment.productId
 													}), /* @__PURE__ */ A("span", {
 														className: "capitalize",
@@ -743,11 +751,11 @@ var oe = ({ workspaceId: e }) => {
 										}),
 										/* @__PURE__ */ A("td", { className: "px-4 py-2.5 hidden sm:table-cell" }),
 										/* @__PURE__ */ j("td", {
-											className: "px-4 py-2.5 text-xs text-muted-foreground",
+											className: "px-4 py-2.5 text-xs text-text-secondary tabular-nums",
 											children: [i(e.effectiveUsed), !e.assignment.noLimit && e.assignment.limit != null && /* @__PURE__ */ j(k, { children: [" / ", i(e.assignment.limit)] })]
 										}),
 										/* @__PURE__ */ A("td", {
-											className: "px-4 py-2.5 hidden sm:table-cell text-xs text-muted-foreground",
+											className: "px-4 py-2.5 hidden sm:table-cell text-xs text-text-secondary tabular-nums",
 											children: e.assignment.noLimit ? "Unlimited" : i(e.remaining ?? 0)
 										}),
 										/* @__PURE__ */ A("td", {
@@ -762,7 +770,7 @@ var oe = ({ workspaceId: e }) => {
 				})
 			}),
 			/* @__PURE__ */ j("p", {
-				className: "text-xs text-muted-foreground",
+				className: "text-xs text-text-secondary",
 				children: ["Workspace quotas are sourced from the activity service. Usage is tracked cumulatively across all active sources for each quota.", r.some((e) => e.liveStatus) && " Live values are updated every ~60 seconds."]
 			})
 		]
@@ -816,24 +824,24 @@ var oe = ({ workspaceId: e }) => {
 			className: "text-center space-y-2",
 			children: [
 				/* @__PURE__ */ A("div", {
-					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
-					children: /* @__PURE__ */ A(_, { className: "size-6 text-muted-foreground" })
+					className: "size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center",
+					children: /* @__PURE__ */ A(_, { className: "size-6 text-text-secondary" })
 				}),
 				/* @__PURE__ */ A("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: "Access Denied"
 				}),
 				/* @__PURE__ */ A("p", {
-					className: "text-sm text-muted-foreground max-w-sm",
+					className: "text-sm text-text-secondary max-w-sm",
 					children: "You don't have permission to view usage data."
 				})
 			]
 		})
 	});
 	if ((R || ue) && !H) return /* @__PURE__ */ j("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
-			/* @__PURE__ */ A("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }),
+			/* @__PURE__ */ A("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }),
 			/* @__PURE__ */ A("div", {
 				className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
 				children: [
@@ -841,9 +849,9 @@ var oe = ({ workspaceId: e }) => {
 					2,
 					3,
 					4
-				].map((e) => /* @__PURE__ */ A("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
+				].map((e) => /* @__PURE__ */ A("div", { className: "h-24 bg-bg-sunken animate-pulse rounded-card" }, e))
 			}),
-			/* @__PURE__ */ A("div", { className: "h-64 bg-muted animate-pulse rounded-lg" })
+			/* @__PURE__ */ A("div", { className: "h-64 bg-bg-sunken animate-pulse rounded-card" })
 		]
 	});
 	if (de) return /* @__PURE__ */ A("div", {
@@ -852,21 +860,21 @@ var oe = ({ workspaceId: e }) => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ A("div", {
-					className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
-					children: /* @__PURE__ */ A(_, { className: "size-6 text-destructive" })
+					className: "size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center",
+					children: /* @__PURE__ */ A(_, { className: "size-6 text-status-error-text" })
 				}),
 				/* @__PURE__ */ A("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: "Failed to load usage data"
 				}),
 				/* @__PURE__ */ A("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: de.message
 				}),
 				/* @__PURE__ */ A("button", {
 					type: "button",
 					onClick: () => fe(),
-					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 					children: "Try Again"
 				})
 			]
@@ -874,37 +882,37 @@ var oe = ({ workspaceId: e }) => {
 	});
 	let ye = L.find((e) => e.id === z);
 	return /* @__PURE__ */ j("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ j("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 					children: r("billing.usage.title", "Usage")
 				}), /* @__PURE__ */ A("p", {
-					className: "text-sm text-muted-foreground mt-1",
+					className: "text-sm text-text-secondary mt-1",
 					children: "Monitor your resource consumption and quota usage"
 				})] }), /* @__PURE__ */ j("div", {
 					className: "flex items-center gap-3",
 					children: [
 						/* @__PURE__ */ j("div", {
-							className: "flex items-center bg-muted/50 rounded-lg p-1 border border-border",
+							className: "flex items-center bg-bg-sunken rounded-lg p-1 border border-border-subtle",
 							children: [/* @__PURE__ */ j("button", {
 								type: "button",
 								onClick: () => le("workspace"),
-								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${V === "workspace" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${V === "workspace" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"}`,
 								children: [/* @__PURE__ */ A(w, { className: "size-3.5" }), "Workspace"]
 							}), /* @__PURE__ */ j("button", {
 								type: "button",
 								onClick: () => le("global"),
-								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${V === "global" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${V === "global" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"}`,
 								children: [/* @__PURE__ */ A(T, { className: "size-3.5" }), "Global"]
 							})]
 						}),
 						V === "global" && L.length > 1 && /* @__PURE__ */ A("select", {
 							value: z || "",
 							onChange: (e) => l(e.target.value),
-							className: "px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary w-full sm:min-w-[200px]",
+							className: "px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] w-full sm:min-w-[200px]",
 							children: L.map((e) => /* @__PURE__ */ A("option", {
 								value: e.id,
 								children: e.name
@@ -913,7 +921,8 @@ var oe = ({ workspaceId: e }) => {
 						/* @__PURE__ */ A("button", {
 							type: "button",
 							onClick: () => V === "workspace" ? void 0 : fe(),
-							className: "p-2 border border-border rounded-md hover:bg-muted/50 transition-colors",
+							className: "p-2 border border-border-subtle rounded-button text-text-secondary hover:text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
+							"aria-label": "Refresh",
 							title: "Refresh",
 							children: /* @__PURE__ */ A(E, { className: "size-4" })
 						})
@@ -922,7 +931,7 @@ var oe = ({ workspaceId: e }) => {
 			}),
 			V === "workspace" && B && /* @__PURE__ */ A(oe, { workspaceId: B }),
 			V === "workspace" && !B && /* @__PURE__ */ A("div", {
-				className: "text-center py-12 text-muted-foreground text-sm",
+				className: "text-center py-12 text-text-secondary text-sm",
 				children: "No workspace context available."
 			}),
 			V === "global" && /* @__PURE__ */ j(k, { children: [
@@ -932,52 +941,53 @@ var oe = ({ workspaceId: e }) => {
 						/* @__PURE__ */ j("div", {
 							className: "relative flex-1 max-w-md",
 							children: [
-								/* @__PURE__ */ A(ee, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }),
+								/* @__PURE__ */ A(ee, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-muted" }),
 								/* @__PURE__ */ A("input", {
 									type: "text",
 									value: b,
 									onChange: (e) => x(e.target.value),
 									placeholder: `Search ${N === "past" ? "past" : N === "all" ? "all" : "active"} quotas...`,
-									className: "w-full pl-9 pr-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+									className: "w-full pl-9 pr-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								}),
 								(b || _e) && /* @__PURE__ */ A("button", {
 									type: "button",
 									onClick: () => x(""),
-									className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/50",
-									children: _e ? /* @__PURE__ */ A(E, { className: "size-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ A(D, { className: "size-3 text-muted-foreground" })
+									"aria-label": "Clear search",
+									className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-sunken",
+									children: _e ? /* @__PURE__ */ A(E, { className: "size-3 text-text-muted animate-spin" }) : /* @__PURE__ */ A(D, { className: "size-3 text-text-muted" })
 								})
 							]
 						}),
 						/* @__PURE__ */ j("div", {
-							className: "flex items-center bg-muted/50 rounded-lg p-1 border border-border",
+							className: "flex items-center bg-bg-sunken rounded-lg p-1 border border-border-subtle",
 							children: [/* @__PURE__ */ j("button", {
 								type: "button",
 								onClick: () => P("active"),
-								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${N === "active" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${N === "active" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"}`,
 								children: [/* @__PURE__ */ A(T, { className: "size-3.5" }), "Active"]
 							}), /* @__PURE__ */ j("button", {
 								type: "button",
 								onClick: () => P("past"),
 								disabled: K && N !== "past",
-								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${N === "past" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"} ${K && N !== "past" ? "opacity-70" : ""}`,
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${N === "past" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"} ${K && N !== "past" ? "opacity-70" : ""}`,
 								children: [K && N === "past" ? /* @__PURE__ */ A(E, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ A(S, { className: "size-3.5" }), "Past"]
 							})]
 						}),
 						Q && /* @__PURE__ */ j("button", {
 							type: "button",
 							onClick: ve,
-							className: "flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted/50 transition-colors",
+							className: "flex items-center gap-1.5 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors",
 							children: [/* @__PURE__ */ A(D, { className: "size-3" }), "Clear filters"]
 						})
 					]
 				}),
 				ye && /* @__PURE__ */ j("div", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: [
 						"Viewing usage for",
 						" ",
 						/* @__PURE__ */ A("span", {
-							className: "font-medium text-foreground",
+							className: "font-medium text-text-primary",
 							children: ye.name
 						})
 					]
@@ -1027,18 +1037,18 @@ var oe = ({ workspaceId: e }) => {
 							className: `text-sm font-medium ${H.criticalQuotas > 0 || H.exhaustedQuotas > 0 ? t.error.text : t.warning.text}`,
 							children: H.criticalQuotas > 0 || H.exhaustedQuotas > 0 ? `${H.criticalQuotas + H.exhaustedQuotas} quota${H.criticalQuotas + H.exhaustedQuotas === 1 ? "" : "s"} exhausted or critical` : `${H.warningQuotas} quota${H.warningQuotas === 1 ? "" : "s"} approaching the limit`
 						}), /* @__PURE__ */ A("p", {
-							className: "text-xs text-muted-foreground mt-0.5",
+							className: "text-xs text-text-secondary mt-0.5",
 							children: "Contact support to request a quota increase for your plan."
 						})] })]
 					}), /* @__PURE__ */ A("button", {
 						type: "button",
 						onClick: () => ce("/support/tickets"),
-						className: `shrink-0 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${H.criticalQuotas > 0 || H.exhaustedQuotas > 0 ? "bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90" : "border-status-warning-border text-status-warning-text hover:bg-status-warning-bg-subtle"}`,
+						className: `shrink-0 px-4 py-2 text-sm font-medium rounded-button border transition-colors duration-200 ${H.criticalQuotas > 0 || H.exhaustedQuotas > 0 ? "bg-action-danger-bg text-action-danger-text border-action-danger-bg hover:bg-action-danger-bgHover" : "border-status-warning-border text-status-warning-text hover:bg-status-warning-bg-subtle"}`,
 						children: "Request more quota"
 					})]
 				}),
 				(Q || N !== "active") && /* @__PURE__ */ j("div", {
-					className: "flex items-center gap-2 text-sm text-muted-foreground flex-wrap",
+					className: "flex items-center gap-2 text-sm text-text-secondary flex-wrap",
 					children: [
 						/* @__PURE__ */ j("span", { children: [
 							"Showing",
@@ -1048,7 +1058,7 @@ var oe = ({ workspaceId: e }) => {
 							"quotas"
 						] }),
 						/* @__PURE__ */ j("span", {
-							className: "px-2 py-0.5 bg-primary/10 text-primary rounded text-xs capitalize",
+							className: "px-2 py-0.5 bg-[var(--color-accent-soft)] text-text-link rounded text-xs capitalize",
 							children: [
 								N === "active" ? "Active" : N === "past" ? "Past" : "All",
 								" ",
@@ -1056,11 +1066,11 @@ var oe = ({ workspaceId: e }) => {
 							]
 						}),
 						C !== "all" && /* @__PURE__ */ A("span", {
-							className: "px-2 py-0.5 bg-muted rounded text-xs capitalize",
+							className: "px-2 py-0.5 bg-bg-sunken text-text-secondary rounded text-xs capitalize",
 							children: C === "critical" ? "Critical / Exhausted" : C
 						}),
 						b && /* @__PURE__ */ j("span", {
-							className: "px-2 py-0.5 bg-muted rounded text-xs",
+							className: "px-2 py-0.5 bg-bg-sunken text-text-secondary rounded text-xs",
 							children: [
 								"“",
 								b,
@@ -1070,8 +1080,8 @@ var oe = ({ workspaceId: e }) => {
 					]
 				}),
 				Z.active.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
-					className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
-					children: [/* @__PURE__ */ A(T, { className: "size-5 text-primary" }), N === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
+					className: "text-lg font-semibold text-text-primary mb-4 flex items-center gap-2",
+					children: [/* @__PURE__ */ A(T, { className: "size-5 text-text-link" }), N === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
 				}), /* @__PURE__ */ A("div", {
 					className: "space-y-4",
 					children: Z.active.map((e) => /* @__PURE__ */ A(ie, {
@@ -1081,16 +1091,16 @@ var oe = ({ workspaceId: e }) => {
 					}, e.id))
 				})] }),
 				Z.past.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
-					className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
+					className: "text-lg font-semibold text-text-primary mb-4 flex items-center gap-2",
 					children: [
-						/* @__PURE__ */ A(S, { className: "size-5 text-muted-foreground" }),
+						/* @__PURE__ */ A(S, { className: "size-5 text-text-muted" }),
 						"Past Subscription Quotas",
 						/* @__PURE__ */ A("span", {
-							className: "text-xs font-normal text-muted-foreground",
+							className: "text-xs font-normal text-text-secondary",
 							children: "(Canceled / Expired / Upgraded)"
 						}),
 						ge > 0 && /* @__PURE__ */ j("span", {
-							className: "text-xs font-normal px-2 py-0.5 bg-muted rounded-full",
+							className: "text-xs font-normal px-2 py-0.5 bg-bg-sunken text-text-secondary rounded-full tabular-nums",
 							children: [
 								Z.past.length,
 								me ? "+" : "",
@@ -1111,18 +1121,18 @@ var oe = ({ workspaceId: e }) => {
 							type: "button",
 							onClick: pe,
 							disabled: he,
-							className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted/50 transition-colors disabled:opacity-50",
+							className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors disabled:opacity-50",
 							children: he ? /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(E, { className: "size-4 animate-spin" }), "Loading…"] }) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(y, { className: "size-4" }), "Load more past subscriptions"] })
 						})
 					})]
 				})] }),
 				N !== "past" && J.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
-					className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
+					className: "text-lg font-semibold text-text-primary mb-4 flex items-center gap-2",
 					children: [
 						/* @__PURE__ */ A(w, { className: `size-5 ${t.info.icon}` }),
 						"Pooled Quotas",
 						/* @__PURE__ */ A("span", {
-							className: "text-xs font-normal text-muted-foreground",
+							className: "text-xs font-normal text-text-secondary",
 							children: "(Shared across all products)"
 						})
 					]
@@ -1132,41 +1142,41 @@ var oe = ({ workspaceId: e }) => {
 					onQuotaClick: d
 				})] }),
 				N === "active" && W.length === 0 && U.length === 0 && !Q && /* @__PURE__ */ j("div", {
-					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card",
 					children: [
 						/* @__PURE__ */ A("div", {
-							className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
-							children: /* @__PURE__ */ A(w, { className: "size-6 text-muted-foreground" })
+							className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
+							children: /* @__PURE__ */ A(w, { className: "size-6 text-text-link" })
 						}),
 						/* @__PURE__ */ A("h3", {
-							className: "text-lg font-medium text-foreground",
+							className: "text-base font-semibold text-text-primary",
 							children: "No active quotas found"
 						}),
 						/* @__PURE__ */ A("p", {
-							className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
+							className: "text-sm text-text-secondary mt-1 text-center max-w-sm",
 							children: "Quotas will appear here once you have active subscriptions or pooled allocations."
 						})
 					]
 				}),
 				N === "past" && G.length === 0 && !Q && !K && /* @__PURE__ */ j("div", {
-					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card",
 					children: [
 						/* @__PURE__ */ A("div", {
-							className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
-							children: /* @__PURE__ */ A(S, { className: "size-6 text-muted-foreground" })
+							className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
+							children: /* @__PURE__ */ A(S, { className: "size-6 text-text-link" })
 						}),
 						/* @__PURE__ */ A("h3", {
-							className: "text-lg font-medium text-foreground",
+							className: "text-base font-semibold text-text-primary",
 							children: "No past subscriptions"
 						}),
 						/* @__PURE__ */ A("p", {
-							className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
+							className: "text-sm text-text-secondary mt-1 text-center max-w-sm",
 							children: "You don't have any canceled, expired, or upgraded subscriptions yet."
 						}),
 						/* @__PURE__ */ A("button", {
 							type: "button",
 							onClick: () => P("active"),
-							className: "mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+							className: "mt-4 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 							children: "View active subscriptions"
 						})
 					]
@@ -1177,24 +1187,24 @@ var oe = ({ workspaceId: e }) => {
 						1,
 						2,
 						3
-					].map((e) => /* @__PURE__ */ A("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
+					].map((e) => /* @__PURE__ */ A("div", { className: "h-24 bg-bg-sunken animate-pulse rounded-card" }, e))
 				}),
 				Q && Z.active.length === 0 && Z.past.length === 0 && (N === "past" || J.length === 0) && /* @__PURE__ */ j("div", {
-					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card",
 					children: [
 						/* @__PURE__ */ A("div", {
-							className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
+							className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
 							children: C !== "all" && !b ? /* @__PURE__ */ A(ne, {
 								status: C === "healthy" ? "HEALTHY" : C === "warning" ? "WARNING" : "CRITICAL",
 								className: "size-6"
-							}) : /* @__PURE__ */ A(ee, { className: "size-6 text-muted-foreground" })
+							}) : /* @__PURE__ */ A(ee, { className: "size-6 text-text-link" })
 						}),
 						/* @__PURE__ */ A("h3", {
-							className: "text-lg font-medium text-foreground",
+							className: "text-base font-semibold text-text-primary",
 							children: C !== "all" && !b ? `No ${C === "critical" ? "critical or exhausted" : C} quotas` : "No matching quotas"
 						}),
 						/* @__PURE__ */ A("p", {
-							className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
+							className: "text-sm text-text-secondary mt-1 text-center max-w-sm",
 							children: C !== "all" && !b ? /* @__PURE__ */ j(k, { children: ["All your quotas are in a different status.", H && /* @__PURE__ */ j("span", {
 								className: "block mt-1",
 								children: [
@@ -1225,12 +1235,12 @@ var oe = ({ workspaceId: e }) => {
 							children: [/* @__PURE__ */ A("button", {
 								type: "button",
 								onClick: ve,
-								className: "px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-muted/50 transition-colors",
+								className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 								children: C === "all" ? "Clear filters" : "Show all quotas"
 							}), N === "active" && b && /* @__PURE__ */ A("button", {
 								type: "button",
 								onClick: () => P("all"),
-								className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+								className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 								children: "Search all"
 							})]
 						})