@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/discounts/pages/DiscountsListPage.js

@@ -115,7 +115,7 @@ var g = {
 	return b && U.length === 0 ? /* @__PURE__ */ f("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ d("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }),
+			/* @__PURE__ */ d("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }),
 			/* @__PURE__ */ d("div", {
 				className: "grid grid-cols-1 sm:grid-cols-3 gap-4",
 				children: [
@@ -123,8 +123,8 @@ var g = {
 					2,
 					3
 				].map((e) => /* @__PURE__ */ f("div", {
-					className: "border border-border rounded-lg p-4 space-y-2",
-					children: [/* @__PURE__ */ d("div", { className: "h-4 w-24 bg-muted animate-pulse rounded" }), /* @__PURE__ */ d("div", { className: "h-6 w-16 bg-muted animate-pulse rounded" })]
+					className: "border border-border-subtle rounded-lg p-4 space-y-2",
+					children: [/* @__PURE__ */ d("div", { className: "h-4 w-24 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ d("div", { className: "h-6 w-16 bg-bg-sunken animate-pulse rounded" })]
 				}, e))
 			}),
 			/* @__PURE__ */ d("div", {
@@ -136,12 +136,12 @@ var g = {
 					4,
 					5
 				].map((e) => /* @__PURE__ */ d("div", {
-					className: "border border-border rounded-lg p-4",
+					className: "border border-border-subtle rounded-lg p-4",
 					children: /* @__PURE__ */ f("div", {
 						className: "flex items-center gap-4",
-						children: [/* @__PURE__ */ d("div", { className: "size-10 bg-muted animate-pulse rounded" }), /* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ d("div", { className: "size-10 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ f("div", {
 							className: "flex-1 space-y-2",
-							children: [/* @__PURE__ */ d("div", { className: "h-4 w-32 bg-muted animate-pulse rounded" }), /* @__PURE__ */ d("div", { className: "h-3 w-48 bg-muted animate-pulse rounded" })]
+							children: [/* @__PURE__ */ d("div", { className: "h-4 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ d("div", { className: "h-3 w-48 bg-bg-sunken animate-pulse rounded" })]
 						})]
 					})
 				}, e))
@@ -153,9 +153,9 @@ var g = {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ d("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__ */ d("svg", {
-						className: "size-6 text-destructive",
+						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -168,17 +168,17 @@ var g = {
 					})
 				}),
 				/* @__PURE__ */ d("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: "Failed to load discounts"
 				}),
 				/* @__PURE__ */ d("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-muted",
 					children: x.message
 				}),
 				/* @__PURE__ */ d("button", {
 					type: "button",
 					onClick: () => S(),
-					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"
 				})
 			]
@@ -189,15 +189,15 @@ var g = {
 			/* @__PURE__ */ f("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 					children: "Discount Codes"
 				}), /* @__PURE__ */ d("p", {
-					className: "text-sm text-muted-foreground mt-1",
+					className: "text-sm text-text-secondary mt-1",
 					children: "Create, view, and manage discount codes for billing"
 				})] }), /* @__PURE__ */ f("button", {
 					type: "button",
 					onClick: Z,
-					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 duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
 					children: [/* @__PURE__ */ d("svg", {
 						className: "size-4",
 						fill: "none",
@@ -216,43 +216,43 @@ var g = {
 				className: "grid grid-cols-1 sm:grid-cols-3 gap-4",
 				children: [
 					/* @__PURE__ */ f("div", {
-						className: "border border-border rounded-lg bg-card p-4",
+						className: "rounded-card border border-border-subtle bg-bg-surface p-5 shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ d("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: "Total Discounts"
 						}), /* @__PURE__ */ d("p", {
-							className: "text-xl font-semibold text-foreground mt-1",
+							className: "text-2xl font-semibold text-text-primary tabular-nums mt-1",
 							children: J
 						})]
 					}),
 					/* @__PURE__ */ f("div", {
-						className: "border border-border rounded-lg bg-card p-4",
+						className: "rounded-card border border-border-subtle bg-bg-surface p-5 shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ d("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: "Active"
 						}), /* @__PURE__ */ d("p", {
-							className: "text-xl font-semibold text-status-success-text mt-1",
+							className: "text-2xl font-semibold text-status-success-text tabular-nums mt-1",
 							children: Y
 						})]
 					}),
 					/* @__PURE__ */ f("div", {
-						className: "border border-border rounded-lg bg-card p-4",
+						className: "rounded-card border border-border-subtle bg-bg-surface p-5 shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ d("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: "Expired"
 						}), /* @__PURE__ */ d("p", {
-							className: "text-xl font-semibold text-status-warning-text mt-1",
+							className: "text-2xl font-semibold text-status-warning-text tabular-nums mt-1",
 							children: X
 						})]
 					})
 				]
 			}),
 			/* @__PURE__ */ d("div", {
-				className: "flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 pb-4 border-b border-border",
+				className: "flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 pb-4 border-b border-border-subtle",
 				children: /* @__PURE__ */ f("div", {
 					className: "relative flex-1 min-w-0 w-full sm:max-w-md",
 					children: [/* @__PURE__ */ d("svg", {
-						className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground",
+						className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-muted",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -267,14 +267,14 @@ var g = {
 						placeholder: "Search by discount code...",
 						value: k,
 						onChange: (e) => A(e.target.value),
-						className: "w-full pl-[3.25rem] pr-4 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+						className: "w-full pl-[3.25rem] pr-4 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent"
 					})]
 				})
 			}),
 			W.length > 0 && /* @__PURE__ */ f("div", {
-				className: "flex flex-col gap-3 rounded-lg border border-border bg-card p-4 sm:flex-row sm:items-center sm:justify-between",
+				className: "flex flex-col gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ f("label", {
-					className: "flex items-center gap-2 text-sm text-foreground",
+					className: "flex items-center gap-2 text-sm text-text-primary",
 					children: [/* @__PURE__ */ d("input", {
 						type: "checkbox",
 						checked: K,
@@ -283,13 +283,13 @@ var g = {
 						},
 						onChange: (e) => $(e.target.checked),
 						"aria-label": "Select all discounts",
-						className: "size-4 rounded border-border text-primary"
+						className: "size-4 rounded border-border-subtle text-text-link"
 					}), /* @__PURE__ */ d("span", { children: "Select all visible" })]
 				}), /* @__PURE__ */ f("div", {
 					className: "flex items-center gap-2",
 					children: [
 						/* @__PURE__ */ f("span", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-muted",
 							children: [z.size, " selected"]
 						}),
 						z.size > 0 && /* @__PURE__ */ d("button", {
@@ -297,25 +297,25 @@ var g = {
 							onClick: () => {
 								B(/* @__PURE__ */ new Set()), H(!1);
 							},
-							className: "text-sm text-muted-foreground hover:text-foreground",
+							className: "text-sm text-text-muted hover:text-text-primary",
 							children: "Clear selection"
 						}),
 						/* @__PURE__ */ f("button", {
 							type: "button",
 							onClick: () => H(!0),
 							disabled: G.length === 0 || O,
-							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium border border-destructive/30 text-destructive rounded-md hover:bg-destructive/10 transition-colors disabled:opacity-50",
+							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium border border-status-error-border text-status-error-text rounded-md hover:bg-status-error-bg-subtle transition-colors disabled:opacity-50",
 							children: ["Delete Selected", G.length > 0 ? ` (${G.length})` : ""]
 						})
 					]
 				})]
 			}),
 			V && G.length > 0 && /* @__PURE__ */ d("div", {
-				className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4",
+				className: "rounded-lg border border-status-error-border bg-status-error-bg-subtle p-4",
 				children: /* @__PURE__ */ f("div", {
 					className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
 					children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("p", {
-						className: "text-sm font-medium text-foreground",
+						className: "text-sm font-medium text-text-primary",
 						children: [
 							"Delete ",
 							G.length,
@@ -324,32 +324,32 @@ var g = {
 							"?"
 						]
 					}), /* @__PURE__ */ d("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-muted",
 						children: "This action cannot be undone."
 					})] }), /* @__PURE__ */ f("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ d("button", {
 							type: "button",
 							onClick: () => H(!1),
-							className: "px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground",
+							className: "px-3 py-2 text-sm font-medium text-text-muted hover:text-text-primary",
 							children: "Cancel"
 						}), /* @__PURE__ */ d("button", {
 							type: "button",
 							onClick: se,
 							disabled: O,
-							className: "inline-flex items-center gap-2 rounded-md bg-destructive px-3 py-2 text-sm font-medium text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50",
+							className: "inline-flex items-center gap-2 rounded-button bg-action-danger-bg px-3 py-2 text-sm font-medium text-action-danger-text hover:bg-action-danger-bgHover disabled:opacity-50",
 							children: "Confirm Delete"
 						})]
 					})]
 				})
 			}),
 			W.length === 0 ? /* @__PURE__ */ f("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__ */ d("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__ */ d("svg", {
-							className: "size-6 text-muted-foreground",
+							className: "size-6 text-text-muted",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -362,31 +362,31 @@ var g = {
 						})
 					}),
 					/* @__PURE__ */ d("h3", {
-						className: "text-lg font-medium text-foreground",
+						className: "text-lg font-medium text-text-primary",
 						children: "No discount codes found"
 					}),
 					/* @__PURE__ */ d("p", {
-						className: "text-sm text-muted-foreground mt-1",
+						className: "text-sm text-text-muted mt-1",
 						children: k ? "No discount codes match your search." : "Create your first discount code to get started."
 					}),
 					!k && /* @__PURE__ */ d("button", {
 						type: "button",
 						onClick: Z,
-						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: "Create your first discount"
 					})
 				]
 			}) : /* @__PURE__ */ d("div", {
-				className: "border border-border rounded-lg overflow-hidden",
+				className: "border border-border-subtle rounded-card overflow-hidden shadow-[var(--shadow-elevation-1)]",
 				children: /* @__PURE__ */ d("div", {
 					className: "overflow-x-auto",
 					children: /* @__PURE__ */ f("table", {
 						className: "w-full",
 						children: [/* @__PURE__ */ d("thead", {
-							className: "bg-muted/50",
+							className: "sticky top-0 z-10 bg-bg-sunken border-b border-border-subtle",
 							children: /* @__PURE__ */ f("tr", { children: [
 								/* @__PURE__ */ d("th", {
-									className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground w-12",
+									className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted w-12",
 									children: /* @__PURE__ */ d("input", {
 										type: "checkbox",
 										checked: K,
@@ -395,44 +395,44 @@ var g = {
 										},
 										onChange: (e) => $(e.target.checked),
 										"aria-label": "Select all discounts",
-										className: "size-4 rounded border-border text-primary"
+										className: "size-4 rounded border-border-subtle text-action-primary-bg focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
 									})
 								}),
 								/* @__PURE__ */ d("th", {
-									className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground",
+									className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted",
 									children: "Code"
 								}),
 								/* @__PURE__ */ d("th", {
-									className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground",
+									className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted",
 									children: "Type"
 								}),
 								/* @__PURE__ */ d("th", {
-									className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground",
+									className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted",
 									children: "Value"
 								}),
 								/* @__PURE__ */ d("th", {
-									className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground hidden md:table-cell",
+									className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted hidden md:table-cell",
 									children: "Uses"
 								}),
 								/* @__PURE__ */ d("th", {
-									className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground hidden lg:table-cell",
+									className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted hidden lg:table-cell",
 									children: "Valid From"
 								}),
 								/* @__PURE__ */ d("th", {
-									className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground hidden sm:table-cell",
+									className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted hidden sm:table-cell",
 									children: "Valid Until"
 								}),
 								/* @__PURE__ */ d("th", {
-									className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground",
+									className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted",
 									children: "Status"
 								}),
 								/* @__PURE__ */ d("th", {
-									className: "text-right px-4 py-3 text-sm font-medium text-muted-foreground",
+									className: "text-right px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted",
 									children: "Actions"
 								})
 							] })
 						}), /* @__PURE__ */ d("tbody", {
-							className: "divide-y divide-border",
+							className: "divide-y divide-border-subtle",
 							children: W.map((e) => /* @__PURE__ */ d(v, {
 								discount: e,
 								selected: z.has(e.id),
@@ -453,14 +453,14 @@ var g = {
 						/* @__PURE__ */ f("div", {
 							className: "flex items-center justify-between mb-2",
 							children: [/* @__PURE__ */ d("h2", {
-								className: "text-lg font-semibold text-foreground",
+								className: "text-lg font-semibold text-text-primary",
 								children: n("billing.discounts.createDiscountCode", "Create Discount Code")
 							}), /* @__PURE__ */ d("button", {
 								type: "button",
 								onClick: Q,
-								className: "p-1.5 rounded hover:bg-muted transition-colors",
+								className: "p-1.5 rounded hover:bg-bg-sunken transition-colors",
 								children: /* @__PURE__ */ d("svg", {
-									className: "size-5 text-muted-foreground",
+									className: "size-5 text-text-muted",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
@@ -474,17 +474,17 @@ var g = {
 							})]
 						}),
 						L && /* @__PURE__ */ d("div", {
-							className: "p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md",
+							className: "p-3 text-sm text-status-error-text bg-status-error-bg-subtle border border-status-error-border rounded-md",
 							children: L
 						}),
 						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("label", {
 							htmlFor: "create-code",
-							className: "block text-sm font-medium text-foreground mb-1",
+							className: "block text-sm font-medium text-text-primary mb-1",
 							children: [
 								n("billing.discounts.code", "Code"),
 								" ",
 								/* @__PURE__ */ d("span", {
-									className: "text-destructive",
+									className: "text-status-error-text",
 									children: "*"
 								})
 							]
@@ -498,18 +498,18 @@ var g = {
 								code: e.target.value
 							})),
 							placeholder: n("billing.discounts.codePlaceholder", "e.g. SUMMER25"),
-							className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent uppercase"
+							className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent uppercase"
 						})] }),
 						/* @__PURE__ */ f("div", {
 							className: "grid grid-cols-2 gap-4",
 							children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("label", {
 								htmlFor: "create-type",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: [
 									n("billing.discounts.type", "Type"),
 									" ",
 									/* @__PURE__ */ d("span", {
-										className: "text-destructive",
+										className: "text-status-error-text",
 										children: "*"
 									})
 								]
@@ -520,7 +520,7 @@ var g = {
 									...t,
 									type: e.target.value
 								})),
-								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent",
 								children: [/* @__PURE__ */ d("option", {
 									value: "PERCENTAGE",
 									children: n("billing.discounts.typePercentage", "Percentage")
@@ -530,12 +530,12 @@ var g = {
 								})]
 							})] }), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("label", {
 								htmlFor: "create-value",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: [
 									n("billing.discounts.value", "Value"),
 									" ",
 									/* @__PURE__ */ d("span", {
-										className: "text-destructive",
+										className: "text-status-error-text",
 										children: "*"
 									})
 								]
@@ -554,16 +554,16 @@ var g = {
 										value: e.target.value
 									})),
 									placeholder: N.type === "PERCENTAGE" ? "10" : "25.00",
-									className: "w-full px-3 py-2 pr-8 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+									className: "w-full px-3 py-2 pr-8 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent"
 								}), /* @__PURE__ */ d("span", {
-									className: "absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground",
+									className: "absolute right-3 top-1/2 -translate-y-1/2 text-sm text-text-muted",
 									children: N.type === "PERCENTAGE" ? "%" : N.currency
 								})]
 							})] })]
 						}),
 						N.type === "FIXED" && /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 							htmlFor: "create-currency",
-							className: "block text-sm font-medium text-foreground mb-1",
+							className: "block text-sm font-medium text-text-primary mb-1",
 							children: n("billing.discounts.currency", "Currency")
 						}), /* @__PURE__ */ f("select", {
 							id: "create-currency",
@@ -572,7 +572,7 @@ var g = {
 								...t,
 								currency: e.target.value
 							})),
-							className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
+							className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent",
 							children: [
 								/* @__PURE__ */ d("option", {
 									value: "USD",
@@ -603,7 +603,7 @@ var g = {
 						/* @__PURE__ */ f("div", { children: [
 							/* @__PURE__ */ d("label", {
 								htmlFor: "create-max-uses",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: n("billing.discounts.maxUses", "Max Uses")
 							}),
 							/* @__PURE__ */ d("input", {
@@ -617,10 +617,10 @@ var g = {
 									maxUses: e.target.value
 								})),
 								placeholder: n("billing.discounts.unlimited", "Unlimited"),
-								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent"
 							}),
 							/* @__PURE__ */ d("p", {
-								className: "text-xs text-muted-foreground mt-1",
+								className: "text-xs text-text-muted mt-1",
 								children: n("billing.discounts.unlimitedHelp", "Leave empty for unlimited uses.")
 							})
 						] }),
@@ -628,7 +628,7 @@ var g = {
 							className: "grid grid-cols-2 gap-4",
 							children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 								htmlFor: "create-valid-from",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: n("billing.discounts.validFrom", "Valid From")
 							}), /* @__PURE__ */ d("input", {
 								id: "create-valid-from",
@@ -638,10 +638,10 @@ var g = {
 									...t,
 									validFrom: e.target.value
 								})),
-								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent"
 							})] }), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 								htmlFor: "create-valid-until",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: n("billing.discounts.validUntil", "Valid Until")
 							}), /* @__PURE__ */ d("input", {
 								id: "create-valid-until",
@@ -651,20 +651,20 @@ var g = {
 									...t,
 									validUntil: e.target.value
 								})),
-								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent"
 							})] })]
 						}),
 						/* @__PURE__ */ f("div", {
-							className: "flex items-center justify-end gap-3 pt-2 border-t border-border",
+							className: "flex items-center justify-end gap-3 pt-2 border-t border-border-subtle",
 							children: [/* @__PURE__ */ d("button", {
 								type: "button",
 								onClick: Q,
-								className: "px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+								className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 								children: n("billing.discounts.cancel", "Cancel")
 							}), /* @__PURE__ */ d("button", {
 								type: "submit",
 								disabled: w,
-								className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+								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 disabled:opacity-50 disabled:cursor-not-allowed",
 								children: w ? n("billing.discounts.creating", "Creating...") : n("billing.discounts.createDiscount", "Create Discount")
 							})]
 						})
@@ -680,14 +680,14 @@ var g = {
 						/* @__PURE__ */ f("div", {
 							className: "flex items-center justify-between mb-2",
 							children: [/* @__PURE__ */ d("h2", {
-								className: "text-lg font-semibold text-foreground",
+								className: "text-lg font-semibold text-text-primary",
 								children: "Edit Discount"
 							}), /* @__PURE__ */ d("button", {
 								type: "button",
 								onClick: Q,
-								className: "p-1.5 rounded hover:bg-muted transition-colors",
+								className: "p-1.5 rounded hover:bg-bg-sunken transition-colors",
 								children: /* @__PURE__ */ d("svg", {
-									className: "size-5 text-muted-foreground",
+									className: "size-5 text-text-muted",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
@@ -701,49 +701,49 @@ var g = {
 							})]
 						}),
 						L && /* @__PURE__ */ d("div", {
-							className: "p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md",
+							className: "p-3 text-sm text-status-error-text bg-status-error-bg-subtle border border-status-error-border rounded-md",
 							children: L
 						}),
 						/* @__PURE__ */ f("div", {
-							className: "p-3 bg-muted/50 border border-border rounded-md space-y-1",
+							className: "p-3 bg-bg-sunken/50 border border-border-subtle rounded-md space-y-1",
 							children: [
 								/* @__PURE__ */ f("div", {
 									className: "flex items-center justify-between text-sm",
 									children: [/* @__PURE__ */ d("span", {
-										className: "text-muted-foreground",
+										className: "text-text-muted",
 										children: "Code"
 									}), /* @__PURE__ */ d("span", {
-										className: "font-mono font-medium text-foreground",
+										className: "font-mono font-medium text-text-primary",
 										children: j.discount.code
 									})]
 								}),
 								/* @__PURE__ */ f("div", {
 									className: "flex items-center justify-between text-sm",
 									children: [/* @__PURE__ */ d("span", {
-										className: "text-muted-foreground",
+										className: "text-text-muted",
 										children: "Type"
 									}), /* @__PURE__ */ d("span", {
-										className: "text-foreground",
+										className: "text-text-primary",
 										children: j.discount.type === "PERCENTAGE" ? "Percentage" : "Fixed Amount"
 									})]
 								}),
 								/* @__PURE__ */ f("div", {
 									className: "flex items-center justify-between text-sm",
 									children: [/* @__PURE__ */ d("span", {
-										className: "text-muted-foreground",
+										className: "text-text-muted",
 										children: "Value"
 									}), /* @__PURE__ */ d("span", {
-										className: "text-foreground",
+										className: "text-text-primary",
 										children: h(j.discount)
 									})]
 								}),
 								/* @__PURE__ */ f("div", {
 									className: "flex items-center justify-between text-sm",
 									children: [/* @__PURE__ */ d("span", {
-										className: "text-muted-foreground",
+										className: "text-text-muted",
 										children: "Used"
 									}), /* @__PURE__ */ f("span", {
-										className: "text-foreground",
+										className: "text-text-primary",
 										children: [j.discount.usedCount, " times"]
 									})]
 								})
@@ -752,7 +752,7 @@ var g = {
 						/* @__PURE__ */ f("div", { children: [
 							/* @__PURE__ */ d("label", {
 								htmlFor: "edit-max-uses",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: "Max Uses"
 							}),
 							/* @__PURE__ */ d("input", {
@@ -766,16 +766,16 @@ var g = {
 									maxUses: e.target.value
 								})),
 								placeholder: "Unlimited",
-								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent"
 							}),
 							/* @__PURE__ */ d("p", {
-								className: "text-xs text-muted-foreground mt-1",
+								className: "text-xs text-text-muted mt-1",
 								children: "Leave empty for unlimited uses."
 							})
 						] }),
 						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
 							htmlFor: "edit-valid-until",
-							className: "block text-sm font-medium text-foreground mb-1",
+							className: "block text-sm font-medium text-text-primary mb-1",
 							children: "Valid Until"
 						}), /* @__PURE__ */ d("input", {
 							id: "edit-valid-until",
@@ -785,19 +785,19 @@ var g = {
 								...t,
 								validUntil: e.target.value
 							})),
-							className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+							className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent"
 						})] }),
 						/* @__PURE__ */ f("div", {
-							className: "flex items-center justify-end gap-3 pt-2 border-t border-border",
+							className: "flex items-center justify-end gap-3 pt-2 border-t border-border-subtle",
 							children: [/* @__PURE__ */ d("button", {
 								type: "button",
 								onClick: Q,
-								className: "px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+								className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 								children: "Cancel"
 							}), /* @__PURE__ */ d("button", {
 								type: "submit",
 								disabled: E,
-								className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+								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 disabled:opacity-50 disabled:cursor-not-allowed",
 								children: E ? "Saving..." : "Save Changes"
 							})]
 						})
@@ -812,14 +812,14 @@ var g = {
 						/* @__PURE__ */ f("div", {
 							className: "flex items-center justify-between mb-2",
 							children: [/* @__PURE__ */ d("h2", {
-								className: "text-lg font-semibold text-foreground",
+								className: "text-lg font-semibold text-text-primary",
 								children: "Delete Discount"
 							}), /* @__PURE__ */ d("button", {
 								type: "button",
 								onClick: Q,
-								className: "p-1.5 rounded hover:bg-muted transition-colors",
+								className: "p-1.5 rounded hover:bg-bg-sunken transition-colors",
 								children: /* @__PURE__ */ d("svg", {
-									className: "size-5 text-muted-foreground",
+									className: "size-5 text-text-muted",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
@@ -833,15 +833,15 @@ var g = {
 							})]
 						}),
 						L && /* @__PURE__ */ d("div", {
-							className: "p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md",
+							className: "p-3 text-sm text-status-error-text bg-status-error-bg-subtle border border-status-error-border rounded-md",
 							children: L
 						}),
 						/* @__PURE__ */ f("div", {
 							className: "flex items-start gap-3",
 							children: [/* @__PURE__ */ d("div", {
-								className: "size-10 rounded-full bg-destructive/10 flex items-center justify-center shrink-0",
+								className: "size-10 rounded-full bg-status-error-bg-subtle flex items-center justify-center shrink-0",
 								children: /* @__PURE__ */ d("svg", {
-									className: "size-5 text-destructive",
+									className: "size-5 text-status-error-text",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
@@ -853,7 +853,7 @@ var g = {
 									})
 								})
 							}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("p", {
-								className: "text-sm text-foreground",
+								className: "text-sm text-text-primary",
 								children: [
 									"Are you sure you want to delete the discount code",
 									" ",
@@ -864,7 +864,7 @@ var g = {
 									"?"
 								]
 							}), /* @__PURE__ */ f("p", {
-								className: "text-sm text-muted-foreground mt-1",
+								className: "text-sm text-text-muted mt-1",
 								children: [
 									"This action cannot be undone. The discount has been used",
 									" ",
@@ -879,17 +879,17 @@ var g = {
 							})] })]
 						}),
 						/* @__PURE__ */ f("div", {
-							className: "flex items-center justify-end gap-3 pt-2 border-t border-border",
+							className: "flex items-center justify-end gap-3 pt-2 border-t border-border-subtle",
 							children: [/* @__PURE__ */ d("button", {
 								type: "button",
 								onClick: Q,
-								className: "px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+								className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 								children: "Cancel"
 							}), /* @__PURE__ */ d("button", {
 								type: "button",
 								onClick: oe,
 								disabled: O,
-								className: "px-4 py-2 text-sm font-medium bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+								className: "px-4 py-2 text-sm font-medium bg-action-danger-bg text-action-danger-text rounded-button hover:bg-action-danger-bgHover transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 								children: O ? "Deleting..." : "Delete Discount"
 							})]
 						})
@@ -901,7 +901,7 @@ var g = {
 }, v = ({ discount: e, selected: t, onToggleSelect: r, onEdit: i, onDelete: a }) => {
 	let o = m(e);
 	return /* @__PURE__ */ f("tr", {
-		className: `hover:bg-muted/30 transition-colors ${t ? "bg-muted/20" : ""}`,
+		className: `hover:bg-bg-sunken/30 transition-colors ${t ? "bg-bg-sunken/20" : ""}`,
 		children: [
 			/* @__PURE__ */ d("td", {
 				className: "p-4",
@@ -910,43 +910,43 @@ var g = {
 					checked: t,
 					onChange: (t) => r(e.id, t.target.checked),
 					"aria-label": `Select discount ${e.code}`,
-					className: "size-4 rounded border-border text-primary"
+					className: "size-4 rounded border-border-subtle text-text-link"
 				})
 			}),
 			/* @__PURE__ */ d("td", {
 				className: "p-4",
 				children: /* @__PURE__ */ d("span", {
-					className: "font-mono font-medium text-foreground",
+					className: "font-mono font-medium text-text-primary",
 					children: e.code
 				})
 			}),
 			/* @__PURE__ */ d("td", {
 				className: "p-4",
 				children: /* @__PURE__ */ d("span", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-muted",
 					children: e.type === "PERCENTAGE" ? "Percentage" : "Fixed"
 				})
 			}),
 			/* @__PURE__ */ d("td", {
 				className: "p-4",
 				children: /* @__PURE__ */ d("span", {
-					className: "text-sm font-medium text-foreground",
+					className: "text-sm font-medium text-text-primary",
 					children: h(e)
 				})
 			}),
 			/* @__PURE__ */ d("td", {
 				className: "p-4 hidden md:table-cell",
 				children: /* @__PURE__ */ f("span", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-muted",
 					children: [e.usedCount, e.maxUses == null ? " / ∞" : ` / ${e.maxUses}`]
 				})
 			}),
 			/* @__PURE__ */ d("td", {
-				className: "p-4 text-sm text-muted-foreground hidden lg:table-cell",
+				className: "p-4 text-sm text-text-muted hidden lg:table-cell",
 				children: e.validFrom ? n(e.validFrom, "short") : "—"
 			}),
 			/* @__PURE__ */ d("td", {
-				className: "p-4 text-sm text-muted-foreground hidden sm:table-cell",
+				className: "p-4 text-sm text-text-muted hidden sm:table-cell",
 				children: e.validUntil ? n(e.validUntil, "short") : "—"
 			}),
 			/* @__PURE__ */ d("td", {
@@ -966,7 +966,7 @@ var g = {
 					children: [/* @__PURE__ */ d("button", {
 						type: "button",
 						onClick: () => i(e),
-						className: "px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted rounded-md transition-colors",
+						className: "px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
 						title: "Edit discount",
 						children: /* @__PURE__ */ d("svg", {
 							className: "size-4",
@@ -983,7 +983,7 @@ var g = {
 					}), /* @__PURE__ */ d("button", {
 						type: "button",
 						onClick: () => a(e),
-						className: "px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-md transition-colors",
+						className: "px-3 py-1.5 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
 						title: "Delete discount",
 						children: /* @__PURE__ */ d("svg", {
 							className: "size-4",
@@ -1005,10 +1005,10 @@ var g = {
 }, y = ({ onClose: e, children: t }) => /* @__PURE__ */ f("div", {
 	className: "fixed inset-0 z-50 flex items-center justify-center",
 	children: [/* @__PURE__ */ d("div", {
-		className: "absolute inset-0 bg-overlay-scrim",
+		className: "absolute inset-0 bg-bg-overlay",
 		onClick: e
 	}), /* @__PURE__ */ d("div", {
-		className: "relative w-full max-w-lg max-h-[85vh] overflow-y-auto bg-card border border-border rounded-xl shadow-xl p-6 mx-4",
+		className: "relative w-full max-w-lg max-h-[85vh] overflow-y-auto bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] p-6 mx-4",
 		children: t
 	})]
 });