@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

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

@@ -48,9 +48,9 @@ var C = () => {
 			className: "text-center space-y-2",
 			children: [
 				/* @__PURE__ */ v("div", {
-					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center",
 					children: /* @__PURE__ */ v("svg", {
-						className: "size-6 text-muted-foreground",
+						className: "size-6 text-text-muted",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -63,11 +63,11 @@ var C = () => {
 					})
 				}),
 				/* @__PURE__ */ v("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: t("billing.accessDenied.title", "Access Denied")
 				}),
 				/* @__PURE__ */ v("p", {
-					className: "text-sm text-muted-foreground max-w-sm",
+					className: "text-sm text-text-muted max-w-sm",
 					children: t("billing.addons.noViewPermission", "You don't have permission to view addons.")
 				})
 			]
@@ -86,24 +86,24 @@ var C = () => {
 	};
 	return f && u.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))
@@ -114,9 +114,9 @@ var C = () => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ v("div", {
-					className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center",
 					children: /* @__PURE__ */ v("svg", {
-						className: "size-6 text-destructive",
+						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -129,17 +129,17 @@ var C = () => {
 					})
 				}),
 				/* @__PURE__ */ v("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: t("billing.addons.failedToLoad", "Failed to load addons")
 				}),
 				/* @__PURE__ */ v("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-muted",
 					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-button hover:bg-action-primary-bgHover transition-colors",
 					children: "Try Again"
 				})
 			]
@@ -150,15 +150,15 @@ var C = () => {
 			/* @__PURE__ */ y("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 					children: t("billing.addons.title", "Addons")
 				}), /* @__PURE__ */ v("p", {
-					className: "text-sm text-muted-foreground mt-1",
+					className: "text-sm text-text-muted mt-1",
 					children: t("billing.addons.subtitle", "Enhance your subscription with additional features")
 				})] }), r.canManageAddons && /* @__PURE__ */ y("button", {
 					type: "button",
 					onClick: () => n("/addons/new"),
-					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					className: "inline-flex items-center gap-2 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",
 					children: [/* @__PURE__ */ v("svg", {
 						className: "size-4",
 						fill: "none",
@@ -174,27 +174,27 @@ var C = () => {
 				})]
 			}),
 			/* @__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__ */ y("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: [
 							/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => N("all"),
-								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${M === "all" ? "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 ${M === "all" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 								children: "All"
 							}),
 							/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => N("monthly"),
-								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${M === "monthly" ? "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 ${M === "monthly" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 								children: "Monthly"
 							}),
 							/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => N("yearly"),
-								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${M === "yearly" ? "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 ${M === "yearly" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 								children: "Yearly"
 							})
 						]
@@ -205,18 +205,18 @@ var C = () => {
 							type: "checkbox",
 							checked: A,
 							onChange: (e) => j(e.target.checked),
-							className: "size-4 rounded border-border text-primary focus:ring-primary"
+							className: "size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]"
 						}), /* @__PURE__ */ v("span", {
-							className: "text-muted-foreground",
+							className: "text-text-muted",
 							children: t("billing.addons.showInactive", "Show inactive addons")
 						})]
 					}),
 					/* @__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 ${O === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							className: `p-1.5 rounded-md transition-colors ${O === "grid" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 							title: "Grid view",
 							children: /* @__PURE__ */ v("svg", {
 								className: "size-4",
@@ -233,7 +233,7 @@ var C = () => {
 						}), /* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: () => k("list"),
-							className: `p-1.5 rounded-md transition-colors ${O === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							className: `p-1.5 rounded-md transition-colors ${O === "list" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 							title: "List view",
 							children: /* @__PURE__ */ v("svg", {
 								className: "size-4",
@@ -252,12 +252,12 @@ var C = () => {
 				]
 			}),
 			F.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-16 border border-dashed border-border-subtle rounded-card bg-bg-surface",
 				children: [
 					/* @__PURE__ */ v("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: /* @__PURE__ */ v("svg", {
-							className: "size-6 text-muted-foreground",
+							className: "size-6 text-text-muted",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -270,17 +270,17 @@ var C = () => {
 						})
 					}),
 					/* @__PURE__ */ v("h3", {
-						className: "text-lg font-medium text-foreground",
+						className: "text-lg font-medium text-text-primary",
 						children: t("billing.addons.noAddonsFound", "No addons found")
 					}),
 					/* @__PURE__ */ v("p", {
-						className: "text-sm text-muted-foreground mt-1",
+						className: "text-sm text-text-muted mt-1",
 						children: A ? t("billing.addons.noAddonsFiltered", "No addons match your current filters.") : t("billing.addons.noActiveAddons", "There are no active addons available.")
 					}),
 					r.canManageAddons && /* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => n("/addons/new"),
-						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",
 						children: t("billing.addons.createFirstAddon", "Create your first addon")
 					})
 				]
@@ -329,14 +329,14 @@ var C = () => {
 }, w = ({ addon: r, onView: i, onEdit: a, onToggle: o, canManage: s, displayCurrency: c, isToggling: l, isInCart: d, cartQuantity: g, onAddToCart: _, onUpdateQuantity: b, onRemoveFromCart: C }) => {
 	let w = u(() => x(r.features || []), [r.features]);
 	return /* @__PURE__ */ y("div", {
-		className: `relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${r.isActive ? d ? "border-primary bg-primary/5" : "border-border bg-card" : "border-dashed border-muted-foreground/30 bg-muted/30"}`,
+		className: `relative border rounded-card p-6 shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:-translate-y-0.5 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] flex flex-col h-full ${r.isActive ? d ? "border-action-primary-bg bg-[var(--color-accent-soft)]" : "border-border-subtle bg-bg-surface" : "border-dashed border-text-muted/30 bg-bg-sunken/30"}`,
 		children: [
 			!r.isActive && /* @__PURE__ */ v("span", {
-				className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded",
+				className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-bg-sunken text-text-muted rounded",
 				children: "Inactive"
 			}),
 			d && r.isActive && /* @__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 (",
 					g,
@@ -344,9 +344,9 @@ var C = () => {
 				]
 			}),
 			/* @__PURE__ */ v("div", {
-				className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4",
+				className: "size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
 				children: /* @__PURE__ */ v("svg", {
-					className: "size-5 text-primary",
+					className: "size-5 text-text-link",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
@@ -361,23 +361,23 @@ var C = () => {
 			/* @__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: r.name
 				}), /* @__PURE__ */ v("span", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-muted",
 					children: n(r.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: t, currency: n } = S(r, c);
 						return e(t, n);
 					})()
 				}), /* @__PURE__ */ y("span", {
-					className: "text-muted-foreground text-sm",
+					className: "text-text-muted text-sm",
 					children: ["/ ", t(r.duration)]
 				})]
 			}),
@@ -399,15 +399,15 @@ var C = () => {
 								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)), w.length > 4 && /* @__PURE__ */ y("li", {
-					className: "text-sm text-muted-foreground pl-6",
+					className: "text-sm text-text-muted pl-6",
 					children: [
 						"+",
 						w.length - 4,
@@ -416,7 +416,7 @@ var C = () => {
 				})]
 			}),
 			/* @__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: [
 					r.isActive && (d ? /* @__PURE__ */ y("div", {
 						className: "flex items-center justify-between gap-2",
@@ -426,7 +426,7 @@ var C = () => {
 								/* @__PURE__ */ v("button", {
 									type: "button",
 									onClick: () => b(r.id, g - 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(f, { className: "size-4" })
 								}),
 								/* @__PURE__ */ v("span", {
@@ -436,27 +436,27 @@ var C = () => {
 								/* @__PURE__ */ v("button", {
 									type: "button",
 									onClick: () => b(r.id, g + 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(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-subtle transition-colors",
 							title: "Remove from cart",
 							children: /* @__PURE__ */ v(h, { className: "size-4" })
 						})]
 					}) : /* @__PURE__ */ y("button", {
 						type: "button",
 						onClick: () => _(r),
-						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-button hover:bg-action-primary-bgHover 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(r),
-						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-button hover:bg-bg-sunken transition-colors",
 						children: "View Details"
 					}),
 					s && /* @__PURE__ */ y("div", {
@@ -464,13 +464,13 @@ var C = () => {
 						children: [/* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: () => a(r),
-							className: "flex-1 px-3 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+							className: "flex-1 px-3 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 							children: "Edit"
 						}), /* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: () => o(r),
 							disabled: l,
-							className: `px-3 py-2 text-sm font-medium border border-border rounded-md transition-colors ${r.isActive ? "text-destructive hover:bg-destructive/10" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
+							className: `px-3 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors ${r.isActive ? "text-status-error-text hover:bg-status-error-bg-subtle" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
 							children: r.isActive ? "Deactivate" : "Activate"
 						})]
 					})
@@ -481,12 +481,12 @@ var C = () => {
 }, T = ({ addon: n, onView: r, onEdit: i, onToggle: a, canManage: o, displayCurrency: s, isToggling: c, isInCart: l, cartQuantity: d, onAddToCart: g, onUpdateQuantity: b, onRemoveFromCart: C }) => {
 	let w = u(() => x(n.features || []), [n.features]);
 	return /* @__PURE__ */ y("div", {
-		className: `flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${n.isActive ? l ? "border-primary bg-primary/5" : "border-border bg-card" : "border-dashed border-muted-foreground/30 bg-muted/30"}`,
+		className: `flex items-center gap-4 p-4 border rounded-card shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] ${n.isActive ? l ? "border-action-primary-bg bg-[var(--color-accent-soft)]" : "border-border-subtle bg-bg-surface" : "border-dashed border-text-muted/30 bg-bg-sunken/30"}`,
 		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-[var(--color-accent-soft)] flex items-center justify-center shrink-0",
 				children: /* @__PURE__ */ v("svg", {
-					className: "size-5 text-primary",
+					className: "size-5 text-text-link",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
@@ -504,15 +504,15 @@ var C = () => {
 					className: "flex items-center gap-2",
 					children: [
 						/* @__PURE__ */ v("h3", {
-							className: "font-semibold text-foreground truncate",
+							className: "font-semibold text-text-primary truncate",
 							children: n.name
 						}),
 						!n.isActive && /* @__PURE__ */ v("span", {
-							className: "px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded",
+							className: "px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-muted rounded",
 							children: "Inactive"
 						}),
 						l && n.isActive && /* @__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 (",
 								d,
@@ -521,7 +521,7 @@ var C = () => {
 						})
 					]
 				}), /* @__PURE__ */ y("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-muted",
 					children: [
 						w.length,
 						" quota",
@@ -532,13 +532,13 @@ var C = () => {
 			/* @__PURE__ */ y("div", {
 				className: "text-right",
 				children: [/* @__PURE__ */ v("div", {
-					className: "font-semibold text-foreground",
+					className: "font-semibold text-text-primary",
 					children: (() => {
 						let { price: t, currency: r } = S(n, s);
 						return e(t, r);
 					})()
 				}), /* @__PURE__ */ y("div", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-muted",
 					children: ["per ", t(n.duration)]
 				})]
 			}),
@@ -548,7 +548,7 @@ var C = () => {
 					/* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => b(n.id, d - 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(f, { className: "size-4" })
 					}),
 					/* @__PURE__ */ v("span", {
@@ -558,13 +558,13 @@ var C = () => {
 					/* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => b(n.id, d + 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(n.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-subtle transition-colors ml-1",
 						title: "Remove from cart",
 						children: /* @__PURE__ */ v(h, { className: "size-4" })
 					})
@@ -572,7 +572,7 @@ var C = () => {
 			}) : /* @__PURE__ */ y("button", {
 				type: "button",
 				onClick: () => g(n),
-				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-button hover:bg-action-primary-bgHover transition-colors flex items-center gap-1.5",
 				children: [/* @__PURE__ */ v(m, { className: "size-4" }), "Add"]
 			})),
 			/* @__PURE__ */ y("div", {
@@ -580,18 +580,18 @@ var C = () => {
 				children: [/* @__PURE__ */ v("button", {
 					type: "button",
 					onClick: () => r(n),
-					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-button hover:bg-bg-sunken transition-colors",
 					children: "View"
 				}), o && /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("button", {
 					type: "button",
 					onClick: () => i(n),
-					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-button hover:bg-bg-sunken transition-colors",
 					children: "Edit"
 				}), /* @__PURE__ */ v("button", {
 					type: "button",
 					onClick: () => a(n),
 					disabled: c,
-					className: `px-3 py-1.5 text-sm font-medium border border-border rounded-md transition-colors ${n.isActive ? "text-destructive hover:bg-destructive/10" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
+					className: `px-3 py-1.5 text-sm font-medium border border-border-subtle rounded-md transition-colors ${n.isActive ? "text-status-error-text hover:bg-status-error-bg-subtle" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
 					children: n.isActive ? "Deactivate" : "Activate"
 				})] })]
 			})
@@ -602,7 +602,7 @@ var C = () => {
 	return i.length === 0 && !s ? null : /* @__PURE__ */ y(_, { children: [!s && i.length > 0 && /* @__PURE__ */ y("button", {
 		type: "button",
 		onClick: c,
-		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-[var(--shadow-elevation-3)] hover:bg-action-primary-bgHover transition-all duration-200",
 		children: [
 			/* @__PURE__ */ v(m, { className: "size-5" }),
 			/* @__PURE__ */ y("span", {
@@ -614,7 +614,7 @@ var C = () => {
 				]
 			}),
 			/* @__PURE__ */ v("span", {
-				className: "px-2 py-0.5 bg-primary-foreground/20 rounded-full text-sm",
+				className: "px-2 py-0.5 bg-[var(--color-accent-soft)] rounded-full text-sm",
 				children: e(i.reduce((e, { addon: t, quantity: r }) => {
 					let { price: i } = S(t, n);
 					return e + i * r;
@@ -627,20 +627,20 @@ var C = () => {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: l
 		}), /* @__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-elevated border border-border-subtle rounded-t-card sm:rounded-card shadow-[var(--shadow-elevation-4)] 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: "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: [
 									x,
 									" item",
@@ -651,19 +651,19 @@ var C = () => {
 					}), /* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: l,
-						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" })
 					})]
 				}),
 				/* @__PURE__ */ v("div", {
-					className: "overflow-y-auto max-h-[50vh] divide-y divide-border",
+					className: "overflow-y-auto max-h-[50vh] divide-y divide-border-subtle",
 					children: i.map(({ addon: r, quantity: i }) => /* @__PURE__ */ y("div", {
 						className: "p-4 flex items-center gap-3",
 						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-[var(--color-accent-soft)] flex items-center justify-center shrink-0",
 								children: /* @__PURE__ */ v("svg", {
-									className: "size-5 text-primary",
+									className: "size-5 text-text-link",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
@@ -678,10 +678,10 @@ var C = () => {
 							/* @__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-muted",
 									children: [
 										(() => {
 											let { price: t, currency: i } = S(r, n);
@@ -699,7 +699,7 @@ var C = () => {
 									/* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => d(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(f, { className: "size-3" })
 									}),
 									/* @__PURE__ */ v("span", {
@@ -709,7 +709,7 @@ var C = () => {
 									/* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => d(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" })
 									})
 								]
@@ -717,7 +717,7 @@ var C = () => {
 							/* @__PURE__ */ v("div", {
 								className: "text-right",
 								children: /* @__PURE__ */ v("p", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: (() => {
 										let { price: t, currency: a } = S(r, n);
 										return e(t * i, a);
@@ -727,21 +727,21 @@ var C = () => {
 							/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => u(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-subtle 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: "Total"
 						}), /* @__PURE__ */ v("span", {
-							className: "text-foreground",
+							className: "text-text-primary",
 							children: e(i.reduce((e, { addon: t, quantity: r }) => {
 								let { price: i } = S(t, n);
 								return e + i * r;
@@ -752,14 +752,14 @@ var C = () => {
 						children: [/* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: b,
-							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-button hover:bg-bg-sunken transition-colors",
 							children: "Clear Cart"
 						}), /* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: () => {
 								l(), r("/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-button hover:bg-action-primary-bgHover transition-colors",
 							children: "Checkout"
 						})]
 					})]