@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/checkout/pages/CheckoutPage.js

@@ -545,8 +545,8 @@ var Ye = () => {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ p("div", {
 			className: "text-center space-y-4",
-			children: [/* @__PURE__ */ f(Le, { className: "size-8 animate-spin mx-auto text-primary" }), /* @__PURE__ */ f("p", {
-				className: "text-muted-foreground",
+			children: [/* @__PURE__ */ f(Le, { className: "size-8 animate-spin mx-auto text-text-link" }), /* @__PURE__ */ f("p", {
+				className: "text-text-secondary",
 				children: m("billing.checkout.loadingCheckout", "Loading checkout...")
 			})]
 		})
@@ -571,20 +571,20 @@ var Ye = () => {
 						className: "inline-flex p-4 rounded-full bg-status-success-bg-subtle text-status-success-text",
 						children: /* @__PURE__ */ f(Pe, { className: "size-12" })
 					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
-						className: "text-2xl font-bold text-foreground",
+						className: "text-2xl font-bold text-text-primary",
 						children: m("billing.checkout.paymentSuccessful", "Payment Successful!")
 					}), /* @__PURE__ */ f("p", {
-						className: "text-muted-foreground mt-2",
+						className: "text-text-secondary mt-2",
 						children: m("billing.checkout.purchaseCompleted", "Your purchase has been completed successfully.")
 					})] })]
 				}),
 				F && /* @__PURE__ */ p("div", {
-					className: "bg-card border border-border rounded-lg overflow-hidden",
+					className: "bg-bg-surface border border-border-subtle rounded-lg overflow-hidden",
 					children: [
 						/* @__PURE__ */ p("div", {
-							className: "p-4 border-b border-border",
+							className: "p-4 border-b border-border-subtle",
 							children: [/* @__PURE__ */ p("h3", {
-								className: "font-semibold text-foreground mb-3 flex items-center gap-2",
+								className: "font-semibold text-text-primary mb-3 flex items-center gap-2",
 								children: [/* @__PURE__ */ f(ze, { className: "size-4" }), m("billing.checkout.itemsPurchased", "Items Purchased")]
 							}), /* @__PURE__ */ f("div", {
 								className: "space-y-2",
@@ -598,72 +598,72 @@ var Ye = () => {
 											t.type === "CREDITS" && /* @__PURE__ */ f(Fe, { className: "size-4 text-status-warning-text" }),
 											t.type === "ORDER" && /* @__PURE__ */ f(Ve, { className: "size-4 text-status-success-text" }),
 											/* @__PURE__ */ f("span", {
-												className: "text-foreground",
+												className: "text-text-primary",
 												children: t.name
 											}),
 											t.quantity > 1 && /* @__PURE__ */ p("span", {
-												className: "text-xs text-muted-foreground",
+												className: "text-xs text-text-secondary",
 												children: ["x", t.quantity]
 											})
 										]
 									}), /* @__PURE__ */ f("span", {
-										className: "text-muted-foreground",
+										className: "text-text-secondary",
 										children: e(t.price * t.quantity)
 									})]
 								}, t.id))
 							})]
 						}),
 						/* @__PURE__ */ f("div", {
-							className: "p-4 border-b border-border bg-muted/30",
+							className: "p-4 border-b border-border-subtle bg-bg-sunken",
 							children: /* @__PURE__ */ p("div", {
 								className: "grid grid-cols-2 gap-4",
 								children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
-									className: "text-xs text-muted-foreground mb-1",
+									className: "text-xs text-text-secondary mb-1",
 									children: m("billing.checkout.paymentMethod", "Payment Method")
 								}), /* @__PURE__ */ f("div", {
 									className: "flex items-center gap-2",
 									children: F.paymentMethod === "credits" ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(He, { className: "size-4 text-status-warning-text" }), /* @__PURE__ */ f("span", {
-										className: "font-medium text-foreground",
+										className: "font-medium text-text-primary",
 										children: m("billing.checkout.credits", "Credits")
 									})] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(Ie, { className: "size-4 text-accent-blue" }), /* @__PURE__ */ f("span", {
-										className: "font-medium text-foreground",
+										className: "font-medium text-text-primary",
 										children: m("billing.checkout.card", "Card")
 									})] })
 								})] }), /* @__PURE__ */ p("div", {
 									className: "text-right",
 									children: [/* @__PURE__ */ f("p", {
-										className: "text-xs text-muted-foreground mb-1",
+										className: "text-xs text-text-secondary mb-1",
 										children: m("billing.checkout.totalPaid", "Total Paid")
 									}), /* @__PURE__ */ f("p", {
-										className: "font-bold text-lg text-foreground",
+										className: "font-bold text-lg text-text-primary",
 										children: e(F.total)
 									})]
 								})]
 							})
 						}),
 						F.paymentMethod === "credits" && /* @__PURE__ */ p("div", {
-							className: "p-4 border-b border-border",
+							className: "p-4 border-b border-border-subtle",
 							children: [/* @__PURE__ */ p("h3", {
-								className: "font-semibold text-foreground mb-3 flex items-center gap-2",
+								className: "font-semibold text-text-primary mb-3 flex items-center gap-2",
 								children: [/* @__PURE__ */ f(He, { className: "size-4" }), m("billing.checkout.creditBalance", "Credit Balance")]
 							}), /* @__PURE__ */ p("div", {
 								className: "flex items-center gap-4",
 								children: [
 									/* @__PURE__ */ p("div", {
-										className: "flex-1 text-center p-3 rounded-lg bg-muted/50",
+										className: "flex-1 text-center p-3 rounded-lg bg-bg-sunken",
 										children: [/* @__PURE__ */ f("p", {
-											className: "text-xs text-muted-foreground mb-1",
+											className: "text-xs text-text-secondary mb-1",
 											children: m("billing.checkout.previousBalance", "Previous Balance")
 										}), /* @__PURE__ */ f("p", {
-											className: "font-semibold text-foreground",
+											className: "font-semibold text-text-primary",
 											children: t(F.previousBalance)
 										})]
 									}),
-									/* @__PURE__ */ f(Me, { className: "size-5 text-muted-foreground shrink-0" }),
+									/* @__PURE__ */ f(Me, { className: "size-5 text-text-secondary shrink-0" }),
 									/* @__PURE__ */ p("div", {
 										className: "flex-1 text-center p-3 rounded-lg bg-status-success-bg-subtle",
 										children: [/* @__PURE__ */ f("p", {
-											className: "text-xs text-muted-foreground mb-1",
+											className: "text-xs text-text-secondary mb-1",
 											children: m("billing.checkout.newBalance", "New Balance")
 										}), /* @__PURE__ */ f("p", {
 											className: "font-semibold text-status-success-text",
@@ -674,22 +674,22 @@ var Ye = () => {
 							})]
 						}),
 						/* @__PURE__ */ f("div", {
-							className: "p-4 bg-muted/20",
+							className: "p-4 bg-bg-sunken",
 							children: /* @__PURE__ */ p("div", {
 								className: "flex items-center justify-between",
 								children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
-									className: "text-xs text-muted-foreground mb-1",
+									className: "text-xs text-text-secondary mb-1",
 									children: m("billing.checkout.billingAccount", "Billing Account")
 								}), /* @__PURE__ */ f("p", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: F.billingAccountName
 								})] }), F.transactionId && /* @__PURE__ */ p("div", {
 									className: "text-right",
 									children: [/* @__PURE__ */ f("p", {
-										className: "text-xs text-muted-foreground mb-1",
+										className: "text-xs text-text-secondary mb-1",
 										children: m("billing.checkout.transactionId", "Transaction ID")
 									}), /* @__PURE__ */ p("p", {
-										className: "font-mono text-xs text-muted-foreground",
+										className: "font-mono text-xs text-text-secondary",
 										children: [F.transactionId.slice(0, 8), "..."]
 									})]
 								})]
@@ -702,12 +702,12 @@ var Ye = () => {
 					children: [/* @__PURE__ */ f("button", {
 						type: "button",
 						onClick: () => g("/overview"),
-						className: "px-6 py-3 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors",
+						className: "px-6 py-3 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-lg hover:bg-action-primary-bgHover transition-colors",
 						children: m("billing.checkout.backToOverview", "Back to Overview")
 					}), /* @__PURE__ */ f("button", {
 						type: "button",
 						onClick: () => g("/subscriptions"),
-						className: "px-6 py-3 text-sm font-medium border border-border text-foreground rounded-lg hover:bg-muted transition-colors",
+						className: "px-6 py-3 text-sm font-medium border border-border-subtle text-text-primary rounded-lg hover:bg-bg-sunken transition-colors",
 						children: m("billing.checkout.viewSubscriptions", "View Subscriptions")
 					})]
 				})
@@ -728,14 +728,14 @@ var Ye = () => {
 			className: "text-center space-y-6",
 			children: [
 				/* @__PURE__ */ f("div", {
-					className: "inline-flex p-4 rounded-full bg-destructive/10 text-destructive",
+					className: "inline-flex p-4 rounded-full bg-status-error-bg-subtle text-status-error-text",
 					children: /* @__PURE__ */ f(Ue, { className: "size-12" })
 				}),
 				/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl font-bold text-text-primary",
 					children: m("billing.checkout.paymentFailed", "Payment Failed")
 				}), /* @__PURE__ */ f("p", {
-					className: "text-muted-foreground mt-2",
+					className: "text-text-secondary mt-2",
 					children: ht || bt || z.error || m("billing.checkout.genericError", "Something went wrong. Please try again.")
 				})] }),
 				/* @__PURE__ */ p("div", {
@@ -743,14 +743,14 @@ var Ye = () => {
 					children: [/* @__PURE__ */ f("button", {
 						type: "button",
 						onClick: () => g(-1),
-						className: "px-4 py-2 rounded-lg border border-border hover:bg-muted",
+						className: "px-4 py-2 rounded-lg border border-border-subtle hover:bg-bg-sunken",
 						children: m("billing.checkout.goBack", "Go Back")
 					}), /* @__PURE__ */ f("button", {
 						type: "button",
 						onClick: () => {
 							j("select"), P(null), z.reset();
 						},
-						className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90",
+						className: "px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover",
 						children: m("billing.checkout.tryAgain", "Try Again")
 					})]
 				})
@@ -763,25 +763,25 @@ var Ye = () => {
 			className: "text-center space-y-6",
 			children: [
 				/* @__PURE__ */ f("div", {
-					className: "inline-flex p-4 rounded-full bg-primary/10 text-primary",
+					className: "inline-flex p-4 rounded-full bg-[var(--color-accent-soft)] text-text-link",
 					children: /* @__PURE__ */ f(Le, { className: "size-12 animate-spin" })
 				}),
 				/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl font-bold text-text-primary",
 					children: m("billing.checkout.verifyingPayment", "Verifying Payment")
 				}), /* @__PURE__ */ f("p", {
-					className: "text-muted-foreground mt-2",
+					className: "text-text-secondary mt-2",
 					children: m("billing.checkout.verifyingPaymentDescription", "Please wait while we confirm your payment...")
 				})] }),
 				/* @__PURE__ */ p("div", {
-					className: "bg-muted/50 rounded-lg p-4",
+					className: "bg-bg-sunken rounded-lg p-4",
 					children: [/* @__PURE__ */ p("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: [
 							m("billing.checkout.timeElapsed", "Time elapsed:"),
 							" ",
 							/* @__PURE__ */ f("span", {
-								className: "font-mono font-medium text-foreground",
+								className: "font-mono font-medium text-text-primary",
 								children: ((e) => {
 									let t = Math.floor(e / 1e3);
 									return `${Math.floor(t / 60)}:${(t % 60).toString().padStart(2, "0")}`;
@@ -789,14 +789,14 @@ var Ye = () => {
 							})
 						]
 					}), /* @__PURE__ */ f("p", {
-						className: "text-xs text-muted-foreground mt-1",
+						className: "text-xs text-text-secondary mt-1",
 						children: m("billing.checkout.keepPageOpen", "This may take a few moments. Please don't close this page.")
 					})]
 				}),
 				/* @__PURE__ */ f("div", {
-					className: "w-full bg-muted rounded-full h-2 overflow-hidden",
+					className: "w-full bg-bg-sunken rounded-full h-2 overflow-hidden",
 					children: /* @__PURE__ */ f("div", {
-						className: "bg-primary h-2 rounded-full transition-all duration-1000",
+						className: "bg-action-primary-bg h-2 rounded-full transition-all duration-1000",
 						style: { width: `${Math.min(V / 3e5 * 100, 100)}%` }
 					})
 				}),
@@ -805,7 +805,7 @@ var Ye = () => {
 					onClick: () => {
 						j("error"), P("Payment verification was cancelled. Please check your billing history.");
 					},
-					className: "text-sm text-muted-foreground hover:text-foreground underline",
+					className: "text-sm text-text-secondary hover:text-text-primary underline",
 					children: m("billing.checkout.cancelAndCheckHistory", "Cancel and check billing history")
 				})
 			]
@@ -824,7 +824,7 @@ var Ye = () => {
 				/* @__PURE__ */ p("button", {
 					type: "button",
 					onClick: () => j("select"),
-					className: "flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground",
+					className: "flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary",
 					children: [/* @__PURE__ */ f(je, { className: "size-4" }), m("billing.checkout.backToCheckout", "Back to checkout")]
 				}),
 				/* @__PURE__ */ f(n, {
@@ -832,42 +832,42 @@ var Ye = () => {
 					description: m("billing.checkout.completePaymentDescription", "Enter your payment details to complete the purchase")
 				}),
 				/* @__PURE__ */ p("div", {
-					className: "rounded-lg border border-border bg-card p-4 space-y-4",
+					className: "rounded-lg border border-border-subtle bg-bg-surface p-4 space-y-4",
 					children: [
 						/* @__PURE__ */ p("h3", {
-							className: "font-semibold text-foreground flex items-center gap-2",
+							className: "font-semibold text-text-primary flex items-center gap-2",
 							children: [/* @__PURE__ */ f(ze, { className: "size-4" }), m("billing.checkout.paymentSummary", "Payment Summary")]
 						}),
 						z.billingAccount && /* @__PURE__ */ p("div", {
-							className: "p-3 bg-muted/30 rounded-lg space-y-1",
+							className: "p-3 bg-bg-sunken rounded-lg space-y-1",
 							children: [
 								/* @__PURE__ */ f("div", {
-									className: "text-xs text-muted-foreground uppercase tracking-wide",
+									className: "text-xs text-text-secondary uppercase tracking-wide",
 									children: m("billing.checkout.billingAccount", "Billing Account")
 								}),
 								/* @__PURE__ */ f("div", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: z.billingAccount.name
 								}),
 								/* @__PURE__ */ f("div", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: z.billingAccount.email
 								})
 							]
 						}),
 						E === "ADDON" && z.selectedSubscriptionId && K && /* @__PURE__ */ p("div", {
-							className: "p-3 bg-muted/30 rounded-lg space-y-1",
+							className: "p-3 bg-bg-sunken rounded-lg space-y-1",
 							children: [
 								/* @__PURE__ */ f("div", {
-									className: "text-xs text-muted-foreground uppercase tracking-wide",
+									className: "text-xs text-text-secondary uppercase tracking-wide",
 									children: m("billing.checkout.addingToSubscription", "Adding to Subscription")
 								}),
 								/* @__PURE__ */ f("div", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: K.plan?.name || m("billing.checkout.subscription", "Subscription")
 								}),
 								K.plan?.product?.name && /* @__PURE__ */ f("div", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: K.plan.product.name
 								})
 							]
@@ -881,10 +881,10 @@ var Ye = () => {
 										/* @__PURE__ */ p("div", {
 											className: "flex justify-between",
 											children: [/* @__PURE__ */ f("span", {
-												className: "text-muted-foreground",
+												className: "text-text-secondary",
 												children: m("billing.checkout.subtotal", "Subtotal")
 											}), /* @__PURE__ */ f("span", {
-												className: "text-foreground",
+												className: "text-text-primary",
 												children: e(i, t)
 											})]
 										}),
@@ -895,7 +895,7 @@ var Ye = () => {
 										a > 0 && /* @__PURE__ */ p("div", {
 											className: "flex justify-between",
 											children: [/* @__PURE__ */ p("span", {
-												className: "text-muted-foreground",
+												className: "text-text-secondary",
 												children: [
 													z.taxType || m("billing.checkout.tax", "Tax"),
 													" (",
@@ -903,20 +903,20 @@ var Ye = () => {
 													"%)"
 												]
 											}), /* @__PURE__ */ f("span", {
-												className: "text-foreground",
+												className: "text-text-primary",
 												children: e(a, t)
 											})]
 										})
 									] });
 								})(),
-								/* @__PURE__ */ f("div", { className: "border-t border-border my-2" }),
+								/* @__PURE__ */ f("div", { className: "border-t border-border-subtle my-2" }),
 								/* @__PURE__ */ p("div", {
 									className: "flex justify-between font-semibold",
 									children: [/* @__PURE__ */ f("span", {
-										className: "text-foreground",
+										className: "text-text-primary",
 										children: m("billing.checkout.total", "Total")
 									}), /* @__PURE__ */ f("span", {
-										className: "text-lg text-foreground",
+										className: "text-lg text-text-primary",
 										children: e(r, t)
 									})]
 								})
@@ -925,7 +925,7 @@ var Ye = () => {
 					]
 				}),
 				z.selectedProvider === "STRIPE" && M.clientSecret && /* @__PURE__ */ f("div", {
-					className: "rounded-lg border border-border bg-card overflow-hidden",
+					className: "rounded-lg border border-border-subtle bg-bg-surface overflow-hidden",
 					children: /* @__PURE__ */ f("div", {
 						className: "p-4 space-y-4",
 						children: /* @__PURE__ */ f(ye, {
@@ -941,7 +941,7 @@ var Ye = () => {
 					})
 				}),
 				z.selectedProvider === "RAZORPAY" && M.orderId && /* @__PURE__ */ f("div", {
-					className: "rounded-lg border border-border bg-card overflow-hidden",
+					className: "rounded-lg border border-border-subtle bg-bg-surface overflow-hidden",
 					children: /* @__PURE__ */ p("div", {
 						className: "p-4 space-y-4",
 						children: [/* @__PURE__ */ p("label", {
@@ -950,9 +950,9 @@ var Ye = () => {
 								type: "checkbox",
 								checked: z.saveCard,
 								onChange: (e) => z.setSaveCard(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__ */ f("span", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-secondary",
 								children: "Save card for future purchases"
 							})]
 						}), /* @__PURE__ */ f(be, {
@@ -981,19 +981,19 @@ var Ye = () => {
 			/* @__PURE__ */ p("button", {
 				type: "button",
 				onClick: () => g(-1),
-				className: "flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-4",
+				className: "flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary mb-4",
 				children: [/* @__PURE__ */ f(je, { className: "size-4" }), "Back"]
 			}),
 			/* @__PURE__ */ p("div", {
 				className: "flex items-center gap-3 mb-6",
 				children: [/* @__PURE__ */ f("div", {
-					className: "p-2 rounded-lg bg-primary/10 text-primary",
+					className: "p-2 rounded-lg bg-[var(--color-accent-soft)] text-text-link",
 					children: Ut()
 				}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl font-bold text-text-primary",
 					children: Ht()
 				}), /* @__PURE__ */ f("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: "Complete your purchase securely"
 				})] })]
 			}),
@@ -1055,7 +1055,7 @@ var Ye = () => {
 					className: "lg:col-span-3 space-y-6 order-2 lg:order-1",
 					children: [
 						E === "CREDITS" && z.items[0] && /* @__PURE__ */ f("div", {
-							className: "rounded-lg border border-border bg-card p-4 sm:p-6",
+							className: "rounded-lg border border-border-subtle bg-bg-surface p-4 sm:p-6",
 							children: /* @__PURE__ */ f(ve, {
 								value: z.items[0].quantity,
 								onChange: Bt,
@@ -1065,7 +1065,7 @@ var Ye = () => {
 							})
 						}),
 						/* @__PURE__ */ p("div", {
-							className: "rounded-lg border border-border bg-card p-4 sm:p-6 space-y-4",
+							className: "rounded-lg border border-border-subtle bg-bg-surface p-4 sm:p-6 space-y-4",
 							children: [/* @__PURE__ */ f(he, {
 								accounts: X,
 								selectedAccountId: z.billingAccount?.id ?? null,
@@ -1081,7 +1081,7 @@ var Ye = () => {
 							})]
 						}),
 						/* @__PURE__ */ p("div", {
-							className: "rounded-lg border border-border bg-card p-4 sm:p-6 space-y-4",
+							className: "rounded-lg border border-border-subtle bg-bg-surface p-4 sm:p-6 space-y-4",
 							children: [
 								/* @__PURE__ */ f(Ce, {
 									savedPaymentMethods: Y,
@@ -1100,12 +1100,12 @@ var Ye = () => {
 									autoRenewEnabled: E === "PLAN" && z.autoRenew,
 									isLoading: Dt
 								}),
-								z.selectedProvider !== "CREDITS" && z.selectedProvider !== "AUTO" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", { className: "border-t border-border" }), /* @__PURE__ */ f("div", {
-									className: "bg-muted/50 p-4 rounded-md",
+								z.selectedProvider !== "CREDITS" && z.selectedProvider !== "AUTO" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", { className: "border-t border-border-subtle" }), /* @__PURE__ */ f("div", {
+									className: "bg-bg-sunken p-4 rounded-button",
 									children: /* @__PURE__ */ p("div", {
 										className: "flex items-start gap-3",
 										children: [/* @__PURE__ */ f("svg", {
-											className: "size-5 text-muted-foreground mt-0.5",
+											className: "size-5 text-text-secondary mt-0.5",
 											fill: "none",
 											stroke: "currentColor",
 											viewBox: "0 0 24 24",
@@ -1118,15 +1118,15 @@ var Ye = () => {
 										}), /* @__PURE__ */ p("div", {
 											className: "flex-1 text-sm",
 											children: [/* @__PURE__ */ p("p", {
-												className: "font-medium text-foreground mb-1",
+												className: "font-medium text-text-primary mb-1",
 												children: ["Currency: ", z.selectedCurrency]
 											}), /* @__PURE__ */ p("p", {
-												className: "text-muted-foreground text-xs",
+												className: "text-text-secondary text-xs",
 												children: [
 													"All prices are shown in",
 													" ",
 													/* @__PURE__ */ f("strong", {
-														className: "text-foreground",
+														className: "text-text-primary",
 														children: z.selectedCurrency
 													}),
 													" ",
@@ -1138,14 +1138,14 @@ var Ye = () => {
 									})
 								})] }),
 								E === "PLAN" && H?.getPlan?.pricingModel === "PER_SEAT" && /* @__PURE__ */ f("div", {
-									className: "border-t border-border pt-4",
+									className: "border-t border-border-subtle pt-4",
 									children: /* @__PURE__ */ p("div", {
 										className: "space-y-3",
 										children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
-											className: "text-sm font-medium text-foreground",
+											className: "text-sm font-medium text-text-primary",
 											children: "Number of seats"
 										}), H.getPlan.minSeats && /* @__PURE__ */ p("p", {
-											className: "text-xs text-muted-foreground mt-0.5",
+											className: "text-xs text-text-secondary mt-0.5",
 											children: [
 												"Minimum ",
 												H.getPlan.minSeats,
@@ -1160,7 +1160,7 @@ var Ye = () => {
 													type: "button",
 													onClick: () => R((e) => Math.max(H.getPlan?.minSeats ?? 1, e - 1)),
 													disabled: L <= (H.getPlan.minSeats ?? 1),
-													className: "size-9 rounded-md border border-border flex items-center justify-center hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-foreground",
+													className: "size-9 rounded-button border border-border-subtle flex items-center justify-center hover:bg-action-ghost-bgHover disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-text-primary",
 													children: "−"
 												}),
 												/* @__PURE__ */ f("input", {
@@ -1172,17 +1172,17 @@ var Ye = () => {
 														let t = parseInt(e.target.value, 10);
 														isNaN(t) || R(Math.max(H.getPlan?.minSeats ?? 1, t));
 													},
-													className: "w-20 h-9 text-center border border-border rounded-md bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+													className: "w-20 h-9 text-center border border-border-subtle rounded-button bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 												}),
 												/* @__PURE__ */ f("button", {
 													type: "button",
 													onClick: () => R((e) => Math.min(H.getPlan?.maxSeats ?? 999, e + 1)),
 													disabled: L >= (H.getPlan.maxSeats ?? 999),
-													className: "size-9 rounded-md border border-border flex items-center justify-center hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-foreground",
+													className: "size-9 rounded-button border border-border-subtle flex items-center justify-center hover:bg-action-ghost-bgHover disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-text-primary",
 													children: "+"
 												}),
 												H.getPlan.pricePerSeat && /* @__PURE__ */ p("span", {
-													className: "text-sm text-muted-foreground",
+													className: "text-sm text-text-secondary",
 													children: [
 														"×",
 														" ",
@@ -1213,7 +1213,7 @@ var Ye = () => {
 						className: "lg:sticky lg:top-6 space-y-4",
 						children: [
 							/* @__PURE__ */ p("div", {
-								className: "rounded-lg border border-border bg-card",
+								className: "rounded-lg border border-border-subtle bg-bg-surface",
 								children: [
 									/* @__PURE__ */ f("div", {
 										className: "p-4",
@@ -1234,7 +1234,7 @@ var Ye = () => {
 										})
 									}),
 									/* @__PURE__ */ f("div", {
-										className: "px-4 pb-4 border-t border-border pt-4",
+										className: "px-4 pb-4 border-t border-border-subtle pt-4",
 										children: /* @__PURE__ */ f(_e, {
 											value: z.promoCode,
 											onChange: z.setPromoCode,
@@ -1271,11 +1271,11 @@ var Ye = () => {
 								type: "button",
 								onClick: Lt,
 								disabled: z.isProcessing || !z.billingAccount || z.items.length === 0 || E === "ADDON" && !T && kt || E === "ADDON" && !T && G.length === 0 || E === "ADDON" && !T && !z.selectedSubscriptionId,
-								className: "w-full px-6 py-4 rounded-lg bg-primary text-primary-foreground font-semibold\n                hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors flex items-center justify-center gap-2",
+								className: "w-full px-6 py-4 rounded-lg bg-action-primary-bg text-action-primary-text font-semibold\n                hover:bg-action-primary-bgHover disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors flex items-center justify-center gap-2",
 								children: z.isProcessing ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(Le, { className: "size-5 animate-spin" }), "Processing…"] }) : z.selectedProvider === "CREDITS" ? "Pay with Credits" : "Proceed to Payment"
 							}),
 							/* @__PURE__ */ f("p", {
-								className: "text-center text-xs text-muted-foreground",
+								className: "text-center text-xs text-text-secondary",
 								children: "🔒 Secure checkout with 256-bit SSL encryption"
 							})
 						]