@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/billing/pages/InvoiceDetailPage.js

@@ -57,9 +57,9 @@ var y = () => {
 			className: "text-center space-y-2",
 			children: [
 				/* @__PURE__ */ g("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__ */ g("svg", {
-						className: "size-6 text-muted-foreground",
+						className: "size-6 text-text-secondary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -72,63 +72,63 @@ var y = () => {
 					})
 				}),
 				/* @__PURE__ */ g("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: b("billing.accessDenied.title", "Access Denied")
 				}),
 				/* @__PURE__ */ g("p", {
-					className: "text-sm text-muted-foreground max-w-sm",
+					className: "text-sm text-text-secondary max-w-sm",
 					children: b("billing.invoices.noViewPermission", "You don't have permission to view invoices.")
 				})
 			]
 		})
 	});
 	if (k) return /* @__PURE__ */ _("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [/* @__PURE__ */ _("div", {
 			className: "flex items-center gap-4",
-			children: [/* @__PURE__ */ g("div", { className: "size-10 bg-muted animate-pulse rounded" }), /* @__PURE__ */ _("div", {
+			children: [/* @__PURE__ */ g("div", { className: "size-10 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ _("div", {
 				className: "space-y-2",
-				children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", { className: "h-4 w-32 bg-muted animate-pulse rounded" })]
+				children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ g("div", { className: "h-4 w-32 bg-bg-sunken animate-pulse rounded" })]
 			})]
 		}), /* @__PURE__ */ _("div", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
 			children: [/* @__PURE__ */ _("div", {
 				className: "lg:col-span-2 space-y-6",
 				children: [/* @__PURE__ */ _("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__ */ g("div", { className: "h-6 w-32 bg-muted animate-pulse rounded" }),
-						/* @__PURE__ */ g("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }),
-						/* @__PURE__ */ g("div", { className: "h-4 w-3/4 bg-muted animate-pulse rounded" })
+						/* @__PURE__ */ g("div", { className: "h-6 w-32 bg-bg-sunken animate-pulse rounded" }),
+						/* @__PURE__ */ g("div", { className: "h-4 w-full bg-bg-sunken animate-pulse rounded" }),
+						/* @__PURE__ */ g("div", { className: "h-4 w-3/4 bg-bg-sunken animate-pulse rounded" })
 					]
 				}), /* @__PURE__ */ _("div", {
-					className: "border border-border rounded-lg p-6 space-y-4",
-					children: [/* @__PURE__ */ g("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }), [
+					className: "border border-border-subtle rounded-lg p-6 space-y-4",
+					children: [/* @__PURE__ */ g("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded" }), [
 						1,
 						2,
 						3
 					].map((e) => /* @__PURE__ */ _("div", {
 						className: "flex items-center gap-4",
 						children: [
-							/* @__PURE__ */ g("div", { className: "h-4 flex-1 bg-muted animate-pulse rounded" }),
-							/* @__PURE__ */ g("div", { className: "h-4 w-16 bg-muted animate-pulse rounded" }),
-							/* @__PURE__ */ g("div", { className: "h-4 w-16 bg-muted animate-pulse rounded" }),
-							/* @__PURE__ */ g("div", { className: "h-4 w-20 bg-muted animate-pulse rounded" })
+							/* @__PURE__ */ g("div", { className: "h-4 flex-1 bg-bg-sunken animate-pulse rounded" }),
+							/* @__PURE__ */ g("div", { className: "h-4 w-16 bg-bg-sunken animate-pulse rounded" }),
+							/* @__PURE__ */ g("div", { className: "h-4 w-16 bg-bg-sunken animate-pulse rounded" }),
+							/* @__PURE__ */ g("div", { className: "h-4 w-20 bg-bg-sunken animate-pulse rounded" })
 						]
 					}, e))]
 				})]
 			}), /* @__PURE__ */ g("div", {
 				className: "space-y-6",
 				children: /* @__PURE__ */ _("div", {
-					className: "border border-border rounded-lg p-6 space-y-4",
-					children: [/* @__PURE__ */ g("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }), [
+					className: "border border-border-subtle rounded-lg p-6 space-y-4",
+					children: [/* @__PURE__ */ g("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded" }), [
 						1,
 						2,
 						3,
 						4
 					].map((e) => /* @__PURE__ */ _("div", {
 						className: "space-y-1",
-						children: [/* @__PURE__ */ g("div", { className: "h-3 w-20 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", { className: "h-4 w-28 bg-muted animate-pulse rounded" })]
+						children: [/* @__PURE__ */ g("div", { className: "h-3 w-20 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ g("div", { className: "h-4 w-28 bg-bg-sunken animate-pulse rounded" })]
 					}, e))]
 				})
 			})]
@@ -140,9 +140,9 @@ var y = () => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ g("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__ */ g("svg", {
-						className: "size-6 text-destructive",
+						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -155,11 +155,11 @@ var y = () => {
 					})
 				}),
 				/* @__PURE__ */ g("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: b("billing.invoices.invoiceNotFound", "Invoice not found")
 				}),
 				/* @__PURE__ */ g("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: A?.message || b("billing.invoices.invoiceNotFoundMessage", "The invoice you are looking for does not exist.")
 				}),
 				/* @__PURE__ */ _("div", {
@@ -167,12 +167,12 @@ var y = () => {
 					children: [/* @__PURE__ */ g("button", {
 						type: "button",
 						onClick: () => j(),
-						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"
 					}), /* @__PURE__ */ g("button", {
 						type: "button",
 						onClick: () => S(d("/invoices", D)),
-						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: "Back to Invoices"
 					})]
 				})
@@ -181,7 +181,7 @@ var y = () => {
 	});
 	let V = o(O.status), H = O.status === "OPEN", U = O.status === "DRAFT", W = O.items || [], G = O.total - O.amountPaid;
 	return /* @__PURE__ */ _("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ _("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
@@ -190,7 +190,7 @@ var y = () => {
 					children: [/* @__PURE__ */ g("button", {
 						type: "button",
 						onClick: () => S(d("/invoices", D)),
-						className: "p-2 -ml-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors",
+						className: "p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
 						children: /* @__PURE__ */ g("svg", {
 							className: "size-5",
 							fill: "none",
@@ -206,14 +206,14 @@ var y = () => {
 					}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ _("h1", {
-							className: "text-2xl font-bold text-foreground",
+							className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 							children: ["Invoice ", i(O.invoiceNumber)]
 						}), /* @__PURE__ */ g("span", {
 							className: `px-2 py-1 text-xs font-medium rounded ${s(V)}`,
 							children: a(O.status)
 						})]
 					}), /* @__PURE__ */ _("p", {
-						className: "text-sm text-muted-foreground mt-1",
+						className: "text-sm text-text-secondary mt-1",
 						children: [
 							"Created ",
 							r(O.createdAt, "short"),
@@ -227,37 +227,37 @@ var y = () => {
 							href: O.pdfUrl,
 							target: "_blank",
 							rel: "noopener noreferrer",
-							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: "Download PDF"
 						}),
 						O.invoiceUrl && /* @__PURE__ */ g("a", {
 							href: O.invoiceUrl,
 							target: "_blank",
 							rel: "noopener noreferrer",
-							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: "View on Portal"
 						}),
 						H && w.canPayInvoice && /* @__PURE__ */ g("button", {
 							type: "button",
 							onClick: z,
 							disabled: P || !I,
-							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",
+							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",
 							children: I ? P ? "Processing..." : "Pay Invoice" : "Default Payment Method Required"
 						}),
 						(H || U) && w.canVoidInvoice && /* @__PURE__ */ g("button", {
 							type: "button",
 							onClick: B,
 							disabled: F,
-							className: "px-4 py-2 text-sm font-medium border border-border text-destructive rounded-md hover:bg-destructive/10 transition-colors disabled:opacity-50",
+							className: "px-4 py-2 text-sm font-medium border border-border-subtle text-status-error-text rounded-button hover:bg-status-error-bg-subtle transition-colors disabled:opacity-50",
 							children: F ? b("billing.invoices.voiding", "Voiding...") : b("billing.invoices.voidInvoice", "Void Invoice")
 						})
 					]
 				})]
 			}),
 			L && /* @__PURE__ */ g("div", {
-				className: "p-3 bg-destructive/10 border border-destructive/20 rounded-md",
+				className: "p-3 bg-status-error-bg-subtle border border-status-error-border rounded-button",
 				children: /* @__PURE__ */ g("p", {
-					className: "text-sm text-destructive",
+					className: "text-sm text-status-error-text",
 					children: L
 				})
 			}),
@@ -267,12 +267,12 @@ var y = () => {
 					className: "lg:col-span-2 space-y-6",
 					children: [
 						/* @__PURE__ */ _("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+							className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 							children: [
 								/* @__PURE__ */ g("div", {
-									className: "p-6 border-b border-border bg-muted/30",
+									className: "p-6 border-b border-border-subtle bg-bg-sunken",
 									children: /* @__PURE__ */ _("h2", {
-										className: "text-lg font-semibold text-foreground",
+										className: "text-lg font-semibold text-text-primary",
 										children: [
 											b("billing.invoices.lineItems", "Line Items"),
 											" (",
@@ -284,7 +284,7 @@ var y = () => {
 								W.length === 0 ? /* @__PURE__ */ g("div", {
 									className: "p-6",
 									children: /* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: b("billing.invoices.noLineItems", "No line items on this invoice.")
 									})
 								}) : /* @__PURE__ */ g("div", {
@@ -292,44 +292,44 @@ var y = () => {
 									children: /* @__PURE__ */ _("table", {
 										className: "w-full",
 										children: [/* @__PURE__ */ g("thead", {
-											className: "bg-muted/50",
+											className: "bg-bg-sunken",
 											children: /* @__PURE__ */ _("tr", { children: [
 												/* @__PURE__ */ g("th", {
-													className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground",
+													className: "text-left px-4 py-3 text-sm font-medium text-text-secondary",
 													children: "Description"
 												}),
 												/* @__PURE__ */ g("th", {
-													className: "text-right px-4 py-3 text-sm font-medium text-muted-foreground",
+													className: "text-right px-4 py-3 text-sm font-medium text-text-secondary",
 													children: "Qty"
 												}),
 												/* @__PURE__ */ g("th", {
-													className: "text-right px-4 py-3 text-sm font-medium text-muted-foreground",
+													className: "text-right px-4 py-3 text-sm font-medium text-text-secondary",
 													children: "Unit Price"
 												}),
 												/* @__PURE__ */ g("th", {
-													className: "text-right px-4 py-3 text-sm font-medium text-muted-foreground",
+													className: "text-right px-4 py-3 text-sm font-medium text-text-secondary",
 													children: "Amount"
 												})
 											] })
 										}), /* @__PURE__ */ g("tbody", {
-											className: "divide-y divide-border",
+											className: "divide-y divide-border-subtle",
 											children: W.map((e) => /* @__PURE__ */ _("tr", {
-												className: "hover:bg-muted/30 transition-colors",
+												className: "hover:bg-bg-sunken transition-colors",
 												children: [
 													/* @__PURE__ */ g("td", {
-														className: "p-4 text-sm text-foreground",
+														className: "p-4 text-sm text-text-primary",
 														children: e.description
 													}),
 													/* @__PURE__ */ g("td", {
-														className: "p-4 text-sm text-muted-foreground text-right",
+														className: "p-4 text-sm text-text-secondary text-right",
 														children: e.quantity
 													}),
 													/* @__PURE__ */ g("td", {
-														className: "p-4 text-sm text-muted-foreground text-right",
+														className: "p-4 text-sm text-text-secondary text-right",
 														children: n(e.unitPrice, O.currency)
 													}),
 													/* @__PURE__ */ g("td", {
-														className: "p-4 text-sm font-medium text-foreground text-right",
+														className: "p-4 text-sm font-medium text-text-primary text-right",
 														children: n(e.amount, O.currency)
 													})
 												]
@@ -338,44 +338,44 @@ var y = () => {
 									})
 								}),
 								/* @__PURE__ */ g("div", {
-									className: "border-t border-border p-4",
+									className: "border-t border-border-subtle p-4",
 									children: /* @__PURE__ */ _("div", {
 										className: "max-w-xs ml-auto space-y-2",
 										children: [
 											/* @__PURE__ */ _("div", {
 												className: "flex items-center justify-between text-sm",
 												children: [/* @__PURE__ */ g("span", {
-													className: "text-muted-foreground",
+													className: "text-text-secondary",
 													children: b("billing.invoices.subtotal", "Subtotal")
 												}), /* @__PURE__ */ g("span", {
-													className: "text-foreground",
+													className: "text-text-primary",
 													children: n(O.subtotal, O.currency)
 												})]
 											}),
 											/* @__PURE__ */ _("div", {
 												className: "flex items-center justify-between text-sm",
 												children: [/* @__PURE__ */ g("span", {
-													className: "text-muted-foreground",
+													className: "text-text-secondary",
 													children: b("billing.invoices.tax", "Tax")
 												}), /* @__PURE__ */ g("span", {
-													className: "text-foreground",
+													className: "text-text-primary",
 													children: n(O.tax, O.currency)
 												})]
 											}),
 											/* @__PURE__ */ _("div", {
-												className: "flex items-center justify-between text-sm font-semibold border-t border-border pt-2",
+												className: "flex items-center justify-between text-sm font-semibold border-t border-border-subtle pt-2",
 												children: [/* @__PURE__ */ g("span", {
-													className: "text-foreground",
+													className: "text-text-primary",
 													children: b("billing.invoices.total", "Total")
 												}), /* @__PURE__ */ g("span", {
-													className: "text-foreground",
+													className: "text-text-primary",
 													children: n(O.total, O.currency)
 												})]
 											}),
 											O.amountPaid > 0 && /* @__PURE__ */ _("div", {
 												className: "flex items-center justify-between text-sm",
 												children: [/* @__PURE__ */ g("span", {
-													className: "text-muted-foreground",
+													className: "text-text-secondary",
 													children: b("billing.invoices.amountPaid", "Amount Paid")
 												}), /* @__PURE__ */ _("span", {
 													className: "text-status-success-text",
@@ -383,9 +383,9 @@ var y = () => {
 												})]
 											}),
 											G > 0 && /* @__PURE__ */ _("div", {
-												className: "flex items-center justify-between text-sm font-semibold border-t border-border pt-2",
+												className: "flex items-center justify-between text-sm font-semibold border-t border-border-subtle pt-2",
 												children: [/* @__PURE__ */ g("span", {
-													className: "text-foreground",
+													className: "text-text-primary",
 													children: b("billing.invoices.amountDue", "Amount Due")
 												}), /* @__PURE__ */ g("span", {
 													className: "text-status-warning-text",
@@ -398,11 +398,11 @@ var y = () => {
 							]
 						}),
 						O.subscription && /* @__PURE__ */ _("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+							className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 							children: [/* @__PURE__ */ g("div", {
-								className: "p-6 border-b border-border bg-muted/30",
+								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
-									className: "text-lg font-semibold text-foreground",
+									className: "text-lg font-semibold text-text-primary",
 									children: b("billing.invoices.subscription", "Subscription")
 								})
 							}), /* @__PURE__ */ g("div", {
@@ -410,10 +410,10 @@ var y = () => {
 								children: /* @__PURE__ */ _("div", {
 									className: "flex items-center justify-between",
 									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "font-medium text-foreground",
+										className: "font-medium text-text-primary",
 										children: O.subscription.plan?.name || "Unknown Plan"
 									}), /* @__PURE__ */ _("p", {
-										className: "text-sm text-muted-foreground mt-0.5",
+										className: "text-sm text-text-secondary mt-0.5",
 										children: [
 											"Subscription ID:",
 											" ",
@@ -425,18 +425,18 @@ var y = () => {
 									})] }), /* @__PURE__ */ g("button", {
 										type: "button",
 										onClick: () => S(d(`/subscriptions/${O.subscription.id}`, D)),
-										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",
 										children: "View"
 									})]
 								})
 							})]
 						}),
 						O.payment && /* @__PURE__ */ _("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+							className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 							children: [/* @__PURE__ */ g("div", {
-								className: "p-6 border-b border-border bg-muted/30",
+								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
-									className: "text-lg font-semibold text-foreground",
+									className: "text-lg font-semibold text-text-primary",
 									children: b("billing.invoices.payment", "Payment")
 								})
 							}), /* @__PURE__ */ g("div", {
@@ -445,45 +445,45 @@ var y = () => {
 									className: "grid grid-cols-2 gap-4",
 									children: [
 										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Payment ID"
 										}), /* @__PURE__ */ g("p", {
-											className: "font-mono text-sm text-foreground mt-0.5 break-all",
+											className: "font-mono text-sm text-text-primary mt-0.5 break-all",
 											children: O.payment.id
 										})] }),
 										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Amount"
 										}), /* @__PURE__ */ g("p", {
-											className: "text-sm text-foreground mt-0.5",
+											className: "text-sm text-text-primary mt-0.5",
 											children: n(O.payment.amount, O.payment.currency)
 										})] }),
 										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Status"
 										}), /* @__PURE__ */ g("p", {
-											className: "text-sm text-foreground mt-0.5 capitalize",
+											className: "text-sm text-text-primary mt-0.5 capitalize",
 											children: O.payment.status.toLowerCase()
 										})] }),
 										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Method"
 										}), /* @__PURE__ */ g("p", {
-											className: "text-sm text-foreground mt-0.5 capitalize",
+											className: "text-sm text-text-primary mt-0.5 capitalize",
 											children: O.payment.method.toLowerCase().replace(/_/g, " ")
 										})] }),
 										O.payment.provider && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Provider"
 										}), /* @__PURE__ */ g("p", {
-											className: "text-sm text-foreground mt-0.5 capitalize",
+											className: "text-sm text-text-primary mt-0.5 capitalize",
 											children: O.payment.provider
 										})] }),
 										O.payment.paidAt && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Paid At"
 										}), /* @__PURE__ */ g("p", {
-											className: "text-sm text-foreground mt-0.5",
+											className: "text-sm text-text-primary mt-0.5",
 											children: r(O.payment.paidAt, "short")
 										})] })
 									]
@@ -495,67 +495,67 @@ var y = () => {
 					className: "space-y-6",
 					children: [
 						/* @__PURE__ */ _("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+							className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 							children: [/* @__PURE__ */ g("div", {
-								className: "p-6 border-b border-border bg-muted/30",
+								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
-									className: "text-lg font-semibold text-foreground",
+									className: "text-lg font-semibold text-text-primary",
 									children: b("billing.invoices.details", "Details")
 								})
 							}), /* @__PURE__ */ _("div", {
 								className: "p-6 space-y-4",
 								children: [
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Invoice ID"
 									}), /* @__PURE__ */ g("p", {
-										className: "font-mono text-sm text-foreground mt-0.5 break-all",
+										className: "font-mono text-sm text-text-primary mt-0.5 break-all",
 										children: O.id
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Invoice Number"
 									}), /* @__PURE__ */ g("p", {
-										className: "text-sm text-foreground mt-0.5",
+										className: "text-sm text-text-primary mt-0.5",
 										children: i(O.invoiceNumber)
 									})] }),
 									O.itemDescription && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Description"
 									}), /* @__PURE__ */ g("p", {
-										className: "text-sm text-foreground mt-0.5",
+										className: "text-sm text-text-primary mt-0.5",
 										children: O.itemDescription
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Status"
 									}), /* @__PURE__ */ g("span", {
 										className: `inline-flex mt-0.5 px-2 py-1 text-xs font-medium rounded ${s(V)}`,
 										children: a(O.status)
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Currency"
 									}), /* @__PURE__ */ g("p", {
-										className: "text-sm text-foreground mt-0.5",
+										className: "text-sm text-text-primary mt-0.5",
 										children: O.currency
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Total"
 									}), /* @__PURE__ */ g("p", {
-										className: "text-sm font-semibold text-foreground mt-0.5",
+										className: "text-sm font-semibold text-text-primary mt-0.5",
 										children: n(O.total, O.currency)
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Amount Paid"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm text-status-success-text mt-0.5",
 										children: n(O.amountPaid, O.currency)
 									})] }),
 									G > 0 && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Amount Due"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm font-semibold text-status-warning-text mt-0.5",
@@ -565,62 +565,62 @@ var y = () => {
 							})]
 						}),
 						/* @__PURE__ */ _("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+							className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 							children: [/* @__PURE__ */ g("div", {
-								className: "p-6 border-b border-border bg-muted/30",
+								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
-									className: "text-lg font-semibold text-foreground",
+									className: "text-lg font-semibold text-text-primary",
 									children: b("billing.invoices.dates", "Dates")
 								})
 							}), /* @__PURE__ */ _("div", {
 								className: "p-6 space-y-4",
 								children: [
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Created"
 									}), /* @__PURE__ */ g("p", {
-										className: "text-sm text-foreground mt-0.5",
+										className: "text-sm text-text-primary mt-0.5",
 										children: r(O.createdAt)
 									})] }),
 									O.dueDate && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Due Date"
 									}), /* @__PURE__ */ g("p", {
-										className: "text-sm text-foreground mt-0.5",
+										className: "text-sm text-text-primary mt-0.5",
 										children: r(O.dueDate)
 									})] }),
 									O.paidAt && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Paid At"
 									}), /* @__PURE__ */ g("p", {
-										className: "text-sm text-foreground mt-0.5",
+										className: "text-sm text-text-primary mt-0.5",
 										children: r(O.paidAt)
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Last Updated"
 									}), /* @__PURE__ */ g("p", {
-										className: "text-sm text-foreground mt-0.5",
+										className: "text-sm text-text-primary mt-0.5",
 										children: r(O.updatedAt)
 									})] })
 								]
 							})]
 						}),
 						/* @__PURE__ */ _("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+							className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 							children: [/* @__PURE__ */ g("div", {
-								className: "p-6 border-b border-border bg-muted/30",
+								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
-									className: "text-lg font-semibold text-foreground",
+									className: "text-lg font-semibold text-text-primary",
 									children: b("billing.invoices.organization", "Organization")
 								})
 							}), /* @__PURE__ */ g("div", {
 								className: "p-6 space-y-4",
 								children: /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "Organization ID"
 								}), /* @__PURE__ */ g("p", {
-									className: "font-mono text-sm text-foreground mt-0.5 break-all",
+									className: "font-mono text-sm text-text-primary mt-0.5 break-all",
 									children: O.orgId
 								})] })
 							})]