@burdenoff/microfe-billing 2026.623.3 → 2026.624.2

package/dist/billing/modules/addons/pages/AddonsBrowsePage.js

@@ -64,24 +64,24 @@ var w = () => {
 	}), { addToCart: h, removeFromCart: g, updateQuantity: _, isInCart: S, getCartItem: C } = a(), [w, k] = u("grid"), [A, j] = u("all"), M = c(), N = d.filter((e) => !(!e.isActive || A !== "all" && e.duration !== A)), P = l(() => x(N), [N]);
 	return f && d.length === 0 ? /* @__PURE__ */ y("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ v("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ v("div", {
+		children: [/* @__PURE__ */ v("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ v("div", {
 			className: "grid grid-cols-1 md:grid-cols-3 gap-6",
 			children: [
 				1,
 				2,
 				3
 			].map((e) => /* @__PURE__ */ y("div", {
-				className: "border border-border rounded-lg p-6 space-y-4",
+				className: "border border-border-subtle rounded-lg p-6 space-y-4",
 				children: [
-					/* @__PURE__ */ v("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }),
-					/* @__PURE__ */ v("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ v("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded" }),
+					/* @__PURE__ */ v("div", { className: "h-8 w-32 bg-bg-sunken animate-pulse rounded" }),
 					/* @__PURE__ */ v("div", {
 						className: "space-y-2",
 						children: [
 							1,
 							2,
 							3
-						].map((e) => /* @__PURE__ */ v("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }, e))
+						].map((e) => /* @__PURE__ */ v("div", { className: "h-4 w-full bg-bg-sunken animate-pulse rounded" }, e))
 					})
 				]
 			}, e))
@@ -92,17 +92,17 @@ var w = () => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ v("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: n("billing.addons.failedToLoad", "Failed to load addons")
 				}),
 				/* @__PURE__ */ v("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: p.message
 				}),
 				/* @__PURE__ */ v("button", {
 					type: "button",
 					onClick: () => m(),
-					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-md hover:bg-action-primary-bg/90 transition-colors",
 					children: "Try Again"
 				})
 			]
@@ -111,16 +111,16 @@ var w = () => {
 		className: "space-y-6 p-6",
 		children: [
 			/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
-				className: "text-2xl font-bold text-foreground",
+				className: "text-2xl font-bold text-text-primary",
 				children: n("billing.addons.title", "Addons")
 			}), /* @__PURE__ */ v("p", {
-				className: "text-sm text-muted-foreground mt-1",
+				className: "text-sm text-text-secondary mt-1",
 				children: n("billing.addons.subtitle", "Enhance your subscription with additional features")
 			})] }),
 			/* @__PURE__ */ y("div", {
-				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle",
 				children: [/* @__PURE__ */ v("div", {
-					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					className: "inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50",
 					children: [
 						"all",
 						"monthly",
@@ -128,15 +128,15 @@ var w = () => {
 					].map((e) => /* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => j(e),
-						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${A === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${A === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
 						children: e === "all" ? "All" : e === "monthly" ? "Monthly" : "Yearly"
 					}, e))
 				}), /* @__PURE__ */ y("div", {
-					className: "ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					className: "ml-auto inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50",
 					children: [/* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => k("grid"),
-						className: `p-1.5 rounded-md transition-colors ${w === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						className: `p-1.5 rounded-md transition-colors ${w === "grid" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
 						title: "Grid view",
 						children: /* @__PURE__ */ v("svg", {
 							className: "size-4",
@@ -153,7 +153,7 @@ var w = () => {
 					}), /* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => k("list"),
-						className: `p-1.5 rounded-md transition-colors ${w === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						className: `p-1.5 rounded-md transition-colors ${w === "list" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
 						title: "List view",
 						children: /* @__PURE__ */ v("svg", {
 							className: "size-4",
@@ -171,12 +171,12 @@ var w = () => {
 				})]
 			}),
 			N.length === 0 ? /* @__PURE__ */ y("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-lg",
 				children: [
 					/* @__PURE__ */ v("div", {
-						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						className: "size-12 rounded-full bg-bg-sunken flex items-center justify-center mb-4",
 						children: /* @__PURE__ */ v("svg", {
-							className: "size-6 text-muted-foreground",
+							className: "size-6 text-text-secondary",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -189,11 +189,11 @@ var w = () => {
 						})
 					}),
 					/* @__PURE__ */ v("h3", {
-						className: "text-lg font-medium text-foreground",
+						className: "text-lg font-medium text-text-primary",
 						children: n("billing.addons.noAddonsAvailable", "No addons available")
 					}),
 					/* @__PURE__ */ v("p", {
-						className: "text-sm text-muted-foreground mt-1",
+						className: "text-sm text-text-secondary mt-1",
 						children: n("billing.addons.checkBackLater", "Check back later for new addons.")
 					})
 				]
@@ -231,19 +231,19 @@ var w = () => {
 }, T = ({ groupName: e, addons: i, viewMode: a, getCartItem: o, isInCart: s, addToCart: c, updateQuantity: l, removeFromCart: u, displayCurrency: g, navigateTo: _ }) => {
 	let b = i.filter((e) => s(e.id)).length;
 	return /* @__PURE__ */ y("div", {
-		className: "border border-border rounded-xl overflow-hidden",
+		className: "border border-border-subtle rounded-xl overflow-hidden",
 		children: [/* @__PURE__ */ y("div", {
-			className: "flex items-center justify-between px-5 py-3 bg-muted/40 border-b border-border",
+			className: "flex items-center justify-between px-5 py-3 bg-bg-sunken/40 border-b border-border-subtle",
 			children: [/* @__PURE__ */ y("div", {
 				className: "flex items-center gap-2",
 				children: [
-					/* @__PURE__ */ v(f, { className: "size-4 text-muted-foreground" }),
+					/* @__PURE__ */ v(f, { className: "size-4 text-text-secondary" }),
 					/* @__PURE__ */ v("h2", {
-						className: "font-semibold text-foreground",
+						className: "font-semibold text-text-primary",
 						children: e
 					}),
 					/* @__PURE__ */ y("span", {
-						className: "text-xs text-muted-foreground",
+						className: "text-xs text-text-secondary",
 						children: [
 							i.length,
 							" option",
@@ -252,7 +252,7 @@ var w = () => {
 					})
 				]
 			}), b > 0 && /* @__PURE__ */ y("span", {
-				className: "text-xs font-medium px-2 py-0.5 bg-primary text-primary-foreground rounded-full",
+				className: "text-xs font-medium px-2 py-0.5 bg-action-primary-bg text-action-primary-text rounded-full",
 				children: [b, " in cart"]
 			})]
 		}), a === "grid" ? /* @__PURE__ */ v("div", {
@@ -272,24 +272,24 @@ var w = () => {
 					};
 				})();
 				return /* @__PURE__ */ y("div", {
-					className: `relative flex flex-col rounded-lg border p-4 transition-all ${f ? "border-primary bg-primary/5" : "border-border bg-card hover:border-primary/40 hover:shadow-sm"}`,
+					className: `relative flex flex-col rounded-lg border p-4 transition-all ${f ? "border-primary bg-action-primary-bg/5" : "border-border-subtle bg-bg-surface hover:border-primary/40 hover:shadow-sm"}`,
 					children: [
 						f && /* @__PURE__ */ y("span", {
-							className: "absolute top-2 right-2 text-xs font-medium bg-primary text-primary-foreground px-1.5 py-0.5 rounded",
+							className: "absolute top-2 right-2 text-xs font-medium bg-action-primary-bg text-action-primary-text px-1.5 py-0.5 rounded",
 							children: ["×", b]
 						}),
 						/* @__PURE__ */ v("p", {
-							className: "font-semibold text-foreground text-sm mb-1",
+							className: "font-semibold text-text-primary text-sm mb-1",
 							children: a
 						}),
 						/* @__PURE__ */ v("p", {
-							className: "text-xs text-muted-foreground mb-3",
+							className: "text-xs text-text-secondary mb-3",
 							children: r(e.duration)
 						}),
 						/* @__PURE__ */ y("p", {
-							className: "text-lg font-bold text-foreground mb-3",
+							className: "text-lg font-bold text-text-primary mb-3",
 							children: [t(x, S), /* @__PURE__ */ y("span", {
-								className: "text-xs font-normal text-muted-foreground ml-1",
+								className: "text-xs font-normal text-text-secondary ml-1",
 								children: ["/ ", n(e.duration)]
 							})]
 						}),
@@ -301,7 +301,7 @@ var w = () => {
 									/* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => l(e.id, b - 1),
-										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										className: "p-1 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 										children: /* @__PURE__ */ v(d, { className: "size-3" })
 									}),
 									/* @__PURE__ */ v("span", {
@@ -311,25 +311,25 @@ var w = () => {
 									/* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => l(e.id, b + 1),
-										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										className: "p-1 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 										children: /* @__PURE__ */ v(p, { className: "size-3" })
 									}),
 									/* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => u(e.id),
-										className: "p-1 rounded text-destructive hover:bg-destructive/10 transition-colors",
+										className: "p-1 rounded text-status-error-text hover:bg-status-error-bg/10 transition-colors",
 										children: /* @__PURE__ */ v(h, { className: "size-3" })
 									})
 								]
 							}) : /* @__PURE__ */ y("button", {
 								type: "button",
 								onClick: () => c(e),
-								className: "w-full py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center justify-center gap-1",
+								className: "w-full py-1.5 text-xs font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors flex items-center justify-center gap-1",
 								children: [/* @__PURE__ */ v(m, { className: "size-3" }), "Add to Cart"]
 							}), /* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => _(`/addons/${e.id}`),
-								className: "w-full py-1.5 text-xs font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+								className: "w-full py-1.5 text-xs font-medium border border-border-subtle text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
 								children: "Details"
 							})]
 						})
@@ -353,22 +353,22 @@ var w = () => {
 					};
 				})();
 				return /* @__PURE__ */ y("div", {
-					className: `flex items-center gap-4 px-5 py-3 transition-colors ${f ? "bg-primary/5" : "hover:bg-muted/30"}`,
+					className: `flex items-center gap-4 px-5 py-3 transition-colors ${f ? "bg-action-primary-bg/5" : "hover:bg-bg-sunken/30"}`,
 					children: [
 						/* @__PURE__ */ y("div", {
 							className: "flex-1 min-w-0",
 							children: [/* @__PURE__ */ v("p", {
-								className: "font-medium text-foreground text-sm",
+								className: "font-medium text-text-primary text-sm",
 								children: a
 							}), /* @__PURE__ */ v("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: r(e.duration)
 							})]
 						}),
 						/* @__PURE__ */ y("p", {
-							className: "font-semibold text-foreground text-sm whitespace-nowrap",
+							className: "font-semibold text-text-primary text-sm whitespace-nowrap",
 							children: [t(x, S), /* @__PURE__ */ y("span", {
-								className: "text-xs font-normal text-muted-foreground ml-1",
+								className: "text-xs font-normal text-text-secondary ml-1",
 								children: ["/ ", n(e.duration)]
 							})]
 						}),
@@ -378,7 +378,7 @@ var w = () => {
 								/* @__PURE__ */ v("button", {
 									type: "button",
 									onClick: () => l(e.id, b - 1),
-									className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+									className: "p-1 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 									children: /* @__PURE__ */ v(d, { className: "size-3" })
 								}),
 								/* @__PURE__ */ v("span", {
@@ -388,26 +388,26 @@ var w = () => {
 								/* @__PURE__ */ v("button", {
 									type: "button",
 									onClick: () => l(e.id, b + 1),
-									className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+									className: "p-1 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 									children: /* @__PURE__ */ v(p, { className: "size-3" })
 								}),
 								/* @__PURE__ */ v("button", {
 									type: "button",
 									onClick: () => u(e.id),
-									className: "p-1 rounded text-destructive hover:bg-destructive/10 transition-colors",
+									className: "p-1 rounded text-status-error-text hover:bg-status-error-bg/10 transition-colors",
 									children: /* @__PURE__ */ v(h, { className: "size-3" })
 								})
 							]
 						}) : /* @__PURE__ */ y("button", {
 							type: "button",
 							onClick: () => c(e),
-							className: "px-2 py-1 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center gap-1",
+							className: "px-2 py-1 text-xs font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors flex items-center gap-1",
 							children: [/* @__PURE__ */ v(m, { className: "size-3" }), "Add"]
 						}),
 						/* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: () => _(`/addons/${e.id}`),
-							className: "px-2 py-1 text-xs font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+							className: "px-2 py-1 text-xs font-medium border border-border-subtle text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
 							children: "Details"
 						})
 					]
@@ -418,10 +418,10 @@ var w = () => {
 }, E = ({ addon: e, onView: i, isInCart: a, cartQuantity: o, onAddToCart: s, onUpdateQuantity: c, onRemoveFromCart: u, displayCurrency: f }) => {
 	let g = l(() => S(e.features || []), [e.features]);
 	return /* @__PURE__ */ y("div", {
-		className: `relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${a ? "border-primary bg-primary/5" : "border-border bg-card"}`,
+		className: `relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${a ? "border-primary bg-action-primary-bg/5" : "border-border-subtle bg-bg-surface"}`,
 		children: [
 			a && /* @__PURE__ */ y("span", {
-				className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-primary text-primary-foreground rounded",
+				className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-action-primary-bg text-action-primary-text rounded",
 				children: [
 					"In Cart (",
 					o,
@@ -429,7 +429,7 @@ var w = () => {
 				]
 			}),
 			/* @__PURE__ */ v("div", {
-				className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4",
+				className: "size-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center mb-4",
 				children: /* @__PURE__ */ v("svg", {
 					className: "size-5 text-primary",
 					fill: "none",
@@ -446,23 +446,23 @@ var w = () => {
 			/* @__PURE__ */ y("div", {
 				className: "mb-4",
 				children: [/* @__PURE__ */ v("h3", {
-					className: "text-lg font-bold text-foreground",
+					className: "text-lg font-bold text-text-primary",
 					children: e.name
 				}), /* @__PURE__ */ v("span", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: r(e.duration)
 				})]
 			}),
 			/* @__PURE__ */ y("div", {
 				className: "flex items-baseline gap-1 mb-4",
 				children: [/* @__PURE__ */ v("span", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl font-bold text-text-primary",
 					children: (() => {
 						let { price: n, currency: r } = C(e, f);
 						return t(n, r);
 					})()
 				}), /* @__PURE__ */ y("span", {
-					className: "text-muted-foreground text-sm",
+					className: "text-text-secondary text-sm",
 					children: ["/ ", n(e.duration)]
 				})]
 			}),
@@ -484,15 +484,15 @@ var w = () => {
 								d: "M5 13l4 4L19 7"
 							})
 						}), /* @__PURE__ */ v("span", {
-							className: "text-foreground",
+							className: "text-text-primary",
 							children: e.name
 						})]
 					}), /* @__PURE__ */ v("span", {
-						className: "font-medium text-foreground",
+						className: "font-medium text-text-primary",
 						children: e.totalValue.toLocaleString()
 					})]
 				}, e.quotaId)), g.length > 4 && /* @__PURE__ */ y("li", {
-					className: "text-sm text-muted-foreground pl-6",
+					className: "text-sm text-text-secondary pl-6",
 					children: [
 						"+",
 						g.length - 4,
@@ -501,7 +501,7 @@ var w = () => {
 				})]
 			}),
 			/* @__PURE__ */ y("div", {
-				className: "space-y-2 pt-4 border-t border-border mt-auto",
+				className: "space-y-2 pt-4 border-t border-border-subtle mt-auto",
 				children: [a ? /* @__PURE__ */ y("div", {
 					className: "flex items-center justify-between gap-2",
 					children: [/* @__PURE__ */ y("div", {
@@ -510,7 +510,7 @@ var w = () => {
 							/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => c(e.id, o - 1),
-								className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+								className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 								children: /* @__PURE__ */ v(d, { className: "size-4" })
 							}),
 							/* @__PURE__ */ v("span", {
@@ -520,26 +520,26 @@ var w = () => {
 							/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => c(e.id, o + 1),
-								className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+								className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 								children: /* @__PURE__ */ v(p, { className: "size-4" })
 							})
 						]
 					}), /* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => u(e.id),
-						className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
+						className: "p-1.5 rounded text-status-error-text hover:bg-status-error-bg/10 transition-colors",
 						title: "Remove from cart",
 						children: /* @__PURE__ */ v(h, { className: "size-4" })
 					})]
 				}) : /* @__PURE__ */ y("button", {
 					type: "button",
 					onClick: () => s(e),
-					className: "w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center justify-center gap-2",
+					className: "w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors flex items-center justify-center gap-2",
 					children: [/* @__PURE__ */ v(m, { className: "size-4" }), "Add to Cart"]
 				}), /* @__PURE__ */ v("button", {
 					type: "button",
 					onClick: i,
-					className: "w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+					className: "w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
 					children: "View Details"
 				})]
 			})
@@ -548,10 +548,10 @@ var w = () => {
 }, D = ({ addon: e, onView: r, isInCart: i, cartQuantity: a, onAddToCart: o, onUpdateQuantity: s, onRemoveFromCart: c, displayCurrency: u }) => {
 	let f = l(() => S(e.features || []), [e.features]);
 	return /* @__PURE__ */ y("div", {
-		className: `flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${i ? "border-primary bg-primary/5" : "border-border bg-card"}`,
+		className: `flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${i ? "border-primary bg-action-primary-bg/5" : "border-border-subtle bg-bg-surface"}`,
 		children: [
 			/* @__PURE__ */ v("div", {
-				className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
+				className: "size-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center shrink-0",
 				children: /* @__PURE__ */ v("svg", {
 					className: "size-5 text-primary",
 					fill: "none",
@@ -570,10 +570,10 @@ var w = () => {
 				children: [/* @__PURE__ */ y("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ v("h3", {
-						className: "font-semibold text-foreground truncate",
+						className: "font-semibold text-text-primary truncate",
 						children: e.name
 					}), i && /* @__PURE__ */ y("span", {
-						className: "px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded",
+						className: "px-2 py-0.5 text-xs font-medium bg-action-primary-bg text-action-primary-text rounded",
 						children: [
 							"In Cart (",
 							a,
@@ -581,7 +581,7 @@ var w = () => {
 						]
 					})]
 				}), /* @__PURE__ */ y("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: [
 						f.length,
 						" quota",
@@ -592,13 +592,13 @@ var w = () => {
 			/* @__PURE__ */ y("div", {
 				className: "text-right",
 				children: [/* @__PURE__ */ v("div", {
-					className: "font-semibold text-foreground",
+					className: "font-semibold text-text-primary",
 					children: (() => {
 						let { price: n, currency: r } = C(e, u);
 						return t(n, r);
 					})()
 				}), /* @__PURE__ */ y("div", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: ["per ", n(e.duration)]
 				})]
 			}),
@@ -608,7 +608,7 @@ var w = () => {
 					/* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => s(e.id, a - 1),
-						className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+						className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 						children: /* @__PURE__ */ v(d, { className: "size-4" })
 					}),
 					/* @__PURE__ */ v("span", {
@@ -618,13 +618,13 @@ var w = () => {
 					/* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => s(e.id, a + 1),
-						className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+						className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 						children: /* @__PURE__ */ v(p, { className: "size-4" })
 					}),
 					/* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => c(e.id),
-						className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors ml-1",
+						className: "p-1.5 rounded text-status-error-text hover:bg-status-error-bg/10 transition-colors ml-1",
 						title: "Remove from cart",
 						children: /* @__PURE__ */ v(h, { className: "size-4" })
 					})
@@ -632,13 +632,13 @@ var w = () => {
 			}) : /* @__PURE__ */ y("button", {
 				type: "button",
 				onClick: () => o(e),
-				className: "px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center gap-1.5",
+				className: "px-3 py-1.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors flex items-center gap-1.5",
 				children: [/* @__PURE__ */ v(m, { className: "size-4" }), "Add"]
 			}),
 			/* @__PURE__ */ v("button", {
 				type: "button",
 				onClick: r,
-				className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+				className: "px-3 py-1.5 text-sm font-medium border border-border-subtle text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
 				children: "View"
 			})
 		]
@@ -651,7 +651,7 @@ var w = () => {
 	return c.length === 0 && !l ? null : /* @__PURE__ */ y(_, { children: [!l && c.length > 0 && /* @__PURE__ */ y("button", {
 		type: "button",
 		onClick: u,
-		className: "fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 bg-primary text-primary-foreground rounded-full shadow-lg hover:bg-primary/90 transition-all",
+		className: "fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 bg-action-primary-bg text-action-primary-text rounded-full shadow-lg hover:bg-action-primary-bg/90 transition-all",
 		children: [
 			/* @__PURE__ */ v(m, { className: "size-5" }),
 			/* @__PURE__ */ y("span", {
@@ -676,20 +676,20 @@ var w = () => {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: f
 		}), /* @__PURE__ */ y("div", {
-			className: "relative w-full max-w-md max-h-[80vh] bg-card border border-border rounded-t-xl sm:rounded-xl shadow-xl overflow-hidden",
+			className: "relative w-full max-w-md max-h-[80vh] bg-bg-surface border border-border-subtle rounded-t-xl sm:rounded-xl shadow-xl overflow-hidden",
 			children: [
 				/* @__PURE__ */ y("div", {
-					className: "flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30",
+					className: "flex items-center justify-between px-4 py-3 border-b border-border-subtle bg-bg-sunken/30",
 					children: [/* @__PURE__ */ y("div", {
 						className: "flex items-center gap-2",
 						children: [
-							/* @__PURE__ */ v(m, { className: "size-5 text-foreground" }),
+							/* @__PURE__ */ v(m, { className: "size-5 text-text-primary" }),
 							/* @__PURE__ */ v("h3", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: i("billing.addons.yourCart", "Your Cart")
 							}),
 							/* @__PURE__ */ y("span", {
-								className: "px-2 py-0.5 text-xs bg-primary text-primary-foreground rounded-full",
+								className: "px-2 py-0.5 text-xs bg-action-primary-bg text-action-primary-text rounded-full",
 								children: [
 									T,
 									" item",
@@ -700,7 +700,7 @@ var w = () => {
 					}), /* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: f,
-						className: "p-1.5 rounded hover:bg-muted transition-colors",
+						className: "p-1.5 rounded hover:bg-bg-sunken transition-colors",
 						children: /* @__PURE__ */ v(g, { className: "size-5" })
 					})]
 				}),
@@ -712,10 +712,10 @@ var w = () => {
 							/* @__PURE__ */ y("div", {
 								className: "flex-1 min-w-0",
 								children: [/* @__PURE__ */ v("h4", {
-									className: "font-medium text-foreground truncate",
+									className: "font-medium text-text-primary truncate",
 									children: r.name
 								}), /* @__PURE__ */ y("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: [
 										(() => {
 											let { price: n, currency: i } = C(r, e);
@@ -733,7 +733,7 @@ var w = () => {
 									/* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => S(r.id, i - 1),
-										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										className: "p-1 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 										children: /* @__PURE__ */ v(d, { className: "size-3" })
 									}),
 									/* @__PURE__ */ v("span", {
@@ -743,13 +743,13 @@ var w = () => {
 									/* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => S(r.id, i + 1),
-										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										className: "p-1 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
 										children: /* @__PURE__ */ v(p, { className: "size-3" })
 									})
 								]
 							}),
 							/* @__PURE__ */ v("p", {
-								className: "font-medium text-foreground",
+								className: "font-medium text-text-primary",
 								children: (() => {
 									let { price: n, currency: a } = C(r, e);
 									return t(n * i, a);
@@ -758,21 +758,21 @@ var w = () => {
 							/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => x(r.id),
-								className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
+								className: "p-1.5 rounded text-status-error-text hover:bg-status-error-bg/10 transition-colors",
 								children: /* @__PURE__ */ v(h, { className: "size-4" })
 							})
 						]
 					}, r.id))
 				}),
 				/* @__PURE__ */ y("div", {
-					className: "border-t border-border p-4 space-y-3 bg-muted/20",
+					className: "border-t border-border-subtle p-4 space-y-3 bg-bg-sunken/20",
 					children: [/* @__PURE__ */ y("div", {
 						className: "flex items-center justify-between text-lg font-semibold",
 						children: [/* @__PURE__ */ v("span", {
-							className: "text-foreground",
+							className: "text-text-primary",
 							children: i("billing.addons.total", "Total")
 						}), /* @__PURE__ */ v("span", {
-							className: "text-foreground",
+							className: "text-text-primary",
 							children: t(c.reduce((t, { addon: n, quantity: r }) => {
 								let { price: i } = C(n, e);
 								return t + i * r;
@@ -783,14 +783,14 @@ var w = () => {
 						children: [/* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: w,
-							className: "flex-1 px-4 py-2.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+							className: "flex-1 px-4 py-2.5 text-sm font-medium border border-border-subtle text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
 							children: "Clear Cart"
 						}), /* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: () => {
 								f(), s("/checkout/addons");
 							},
-							className: "flex-1 px-4 py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+							className: "flex-1 px-4 py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors",
 							children: "Checkout"
 						})]
 					})]