@carlonicora/nextjs-jsonapi 1.129.1 → 1.130.0

package/dist/billing/index.mjs

@@ -36,6 +36,7 @@ import {
   FormTextarea,
   Input,
   Label,
+  SectionHeader,
   Skeleton,
   Table,
   TableBody,
@@ -47,7 +48,7 @@ import {
   TabsList,
   TabsTrigger,
   useCurrentUserContext
-} from "../chunk-F54XZKPY.mjs";
+} from "../chunk-NXHNJCY2.mjs";
 import {
   getRoleId,
   getStripePublishableKey
@@ -115,7 +116,7 @@ function SubscriptionSummaryCard({
   if (loading) {
     return /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: "Subscriptions" }),
+        /* @__PURE__ */ jsx(CardTitle, { children: "Subscriptions" }),
         /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
       /* @__PURE__ */ jsxs(CardContent, { children: [
@@ -128,10 +129,10 @@ function SubscriptionSummaryCard({
   if (error) {
     return /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: "Subscriptions" }),
+        /* @__PURE__ */ jsx(CardTitle, { children: "Subscriptions" }),
         /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
-      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }) })
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs/relaxed", children: error }) })
     ] });
   }
   const activeSubscriptions = subscriptions.filter(
@@ -140,7 +141,7 @@ function SubscriptionSummaryCard({
   const primarySubscription = activeSubscriptions[0];
   return /* @__PURE__ */ jsxs(Card, { className: "cursor-pointer hover:bg-accent/50 transition-colors", onClick: onManageClick, children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: "Subscriptions" }),
+      /* @__PURE__ */ jsx(CardTitle, { children: "Subscriptions" }),
       /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" })
     ] }),
     /* @__PURE__ */ jsx(CardContent, { children: subscriptions.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
@@ -210,7 +211,7 @@ function PaymentMethodSummaryCard({
   if (loading) {
     return /* @__PURE__ */ jsxs2(Card, { children: [
       /* @__PURE__ */ jsxs2(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx2(CardTitle, { className: "text-sm font-medium", children: "Payment Method" }),
+        /* @__PURE__ */ jsx2(CardTitle, { children: "Payment Method" }),
         /* @__PURE__ */ jsx2(Wallet, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
       /* @__PURE__ */ jsxs2(CardContent, { children: [
@@ -222,16 +223,16 @@ function PaymentMethodSummaryCard({
   if (error) {
     return /* @__PURE__ */ jsxs2(Card, { children: [
       /* @__PURE__ */ jsxs2(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx2(CardTitle, { className: "text-sm font-medium", children: "Payment Method" }),
+        /* @__PURE__ */ jsx2(CardTitle, { children: "Payment Method" }),
         /* @__PURE__ */ jsx2(Wallet, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
-      /* @__PURE__ */ jsx2(CardContent, { children: /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: error }) })
+      /* @__PURE__ */ jsx2(CardContent, { children: /* @__PURE__ */ jsx2("p", { className: "text-destructive text-xs/relaxed", children: error }) })
     ] });
   }
   const defaultMethod = paymentMethods.find((pm) => pm.id === defaultPaymentMethodId) || paymentMethods[0];
   return /* @__PURE__ */ jsxs2(Card, { className: "cursor-pointer hover:bg-accent/50 transition-colors", onClick: onManageClick, children: [
     /* @__PURE__ */ jsxs2(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-      /* @__PURE__ */ jsx2(CardTitle, { className: "text-sm font-medium", children: "Payment Method" }),
+      /* @__PURE__ */ jsx2(CardTitle, { children: "Payment Method" }),
       /* @__PURE__ */ jsx2(Wallet, { className: "h-4 w-4 text-muted-foreground" })
     ] }),
     /* @__PURE__ */ jsx2(CardContent, { children: paymentMethods.length === 0 ? /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
@@ -313,7 +314,7 @@ function CustomerInfoCard({ customer, loading, error }) {
   if (loading) {
     return /* @__PURE__ */ jsxs3(Card, { children: [
       /* @__PURE__ */ jsxs3(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx3(CardTitle, { className: "text-sm font-medium", children: "Billing Account" }),
+        /* @__PURE__ */ jsx3(CardTitle, { children: "Billing Account" }),
         /* @__PURE__ */ jsx3(User, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
       /* @__PURE__ */ jsxs3(CardContent, { children: [
@@ -326,16 +327,16 @@ function CustomerInfoCard({ customer, loading, error }) {
   if (error) {
     return /* @__PURE__ */ jsxs3(Card, { children: [
       /* @__PURE__ */ jsxs3(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx3(CardTitle, { className: "text-sm font-medium", children: "Billing Account" }),
+        /* @__PURE__ */ jsx3(CardTitle, { children: "Billing Account" }),
         /* @__PURE__ */ jsx3(User, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
-      /* @__PURE__ */ jsx3(CardContent, { children: /* @__PURE__ */ jsx3("p", { className: "text-sm text-destructive", children: error }) })
+      /* @__PURE__ */ jsx3(CardContent, { children: /* @__PURE__ */ jsx3("p", { className: "text-destructive text-xs/relaxed", children: error }) })
     ] });
   }
   if (!customer) {
     return /* @__PURE__ */ jsxs3(Card, { children: [
       /* @__PURE__ */ jsxs3(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx3(CardTitle, { className: "text-sm font-medium", children: "Billing Account" }),
+        /* @__PURE__ */ jsx3(CardTitle, { children: "Billing Account" }),
         /* @__PURE__ */ jsx3(User, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
       /* @__PURE__ */ jsxs3(CardContent, { children: [
@@ -346,7 +347,7 @@ function CustomerInfoCard({ customer, loading, error }) {
   }
   return /* @__PURE__ */ jsxs3(Card, { children: [
     /* @__PURE__ */ jsxs3(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-      /* @__PURE__ */ jsx3(CardTitle, { className: "text-sm font-medium", children: "Billing Account" }),
+      /* @__PURE__ */ jsx3(CardTitle, { children: "Billing Account" }),
       /* @__PURE__ */ jsx3(User, { className: "h-4 w-4 text-muted-foreground" })
     ] }),
     /* @__PURE__ */ jsx3(CardContent, { children: /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
@@ -354,7 +355,7 @@ function CustomerInfoCard({ customer, loading, error }) {
       customer.email && /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: customer.email }),
       customer.balance !== void 0 && customer.balance !== 0 && /* @__PURE__ */ jsxs3("p", { className: "text-sm", children: [
         /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground", children: "Credit Balance: " }),
-        /* @__PURE__ */ jsx3("span", { className: customer.balance < 0 ? "text-green-600" : "text-destructive", children: formatBalance(customer.balance, customer.currency) })
+        /* @__PURE__ */ jsx3("span", { className: customer.balance < 0 ? "text-success" : "text-destructive", children: formatBalance(customer.balance, customer.currency) })
       ] }),
       /* @__PURE__ */ jsxs3(Button, { variant: "outline", size: "sm", className: "mt-2", onClick: handlePortalClick, disabled: portalLoading, children: [
         portalLoading ? "Loading..." : "Manage in Stripe Portal",
@@ -402,7 +403,7 @@ function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }) {
   if (loading) {
     return /* @__PURE__ */ jsxs4(Card, { children: [
       /* @__PURE__ */ jsxs4(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx4(CardTitle, { className: "text-sm font-medium", children: "Recent Invoices" }),
+        /* @__PURE__ */ jsx4(CardTitle, { children: "Recent Invoices" }),
         /* @__PURE__ */ jsx4(ReceiptIcon, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
       /* @__PURE__ */ jsxs4(CardContent, { children: [
@@ -415,10 +416,10 @@ function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }) {
   if (error) {
     return /* @__PURE__ */ jsxs4(Card, { children: [
       /* @__PURE__ */ jsxs4(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx4(CardTitle, { className: "text-sm font-medium", children: "Recent Invoices" }),
+        /* @__PURE__ */ jsx4(CardTitle, { children: "Recent Invoices" }),
         /* @__PURE__ */ jsx4(ReceiptIcon, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
-      /* @__PURE__ */ jsx4(CardContent, { children: /* @__PURE__ */ jsx4("p", { className: "text-sm text-destructive", children: error }) })
+      /* @__PURE__ */ jsx4(CardContent, { children: /* @__PURE__ */ jsx4("p", { className: "text-destructive text-xs/relaxed", children: error }) })
     ] });
   }
   const latestInvoice = invoices[0];
@@ -426,7 +427,7 @@ function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }) {
   const openInvoices = invoices.filter((inv) => inv.status === "open" /* OPEN */);
   return /* @__PURE__ */ jsxs4(Card, { className: "cursor-pointer hover:bg-accent/50 transition-colors", onClick: onViewAllClick, children: [
     /* @__PURE__ */ jsxs4(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-      /* @__PURE__ */ jsx4(CardTitle, { className: "text-sm font-medium", children: "Recent Invoices" }),
+      /* @__PURE__ */ jsx4(CardTitle, { children: "Recent Invoices" }),
       /* @__PURE__ */ jsx4(ReceiptIcon, { className: "h-4 w-4 text-muted-foreground" })
     ] }),
     /* @__PURE__ */ jsx4(CardContent, { children: invoices.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
@@ -443,7 +444,7 @@ function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }) {
           paidInvoices.length,
           " paid"
         ] }),
-        openInvoices.length > 0 && /* @__PURE__ */ jsxs4("span", { className: "text-orange-600", children: [
+        openInvoices.length > 0 && /* @__PURE__ */ jsxs4("span", { className: "text-warning", children: [
           openInvoices.length,
           " open"
         ] }),
@@ -477,7 +478,7 @@ function BillingUsageSummaryCard({
   if (loading) {
     return /* @__PURE__ */ jsxs5(Card, { children: [
       /* @__PURE__ */ jsxs5(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx5(CardTitle, { className: "text-sm font-medium", children: "Usage This Month" }),
+        /* @__PURE__ */ jsx5(CardTitle, { children: "Usage This Month" }),
         /* @__PURE__ */ jsx5(Activity, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
       /* @__PURE__ */ jsxs5(CardContent, { children: [
@@ -489,10 +490,10 @@ function BillingUsageSummaryCard({
   if (error) {
     return /* @__PURE__ */ jsxs5(Card, { children: [
       /* @__PURE__ */ jsxs5(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-        /* @__PURE__ */ jsx5(CardTitle, { className: "text-sm font-medium", children: "Usage This Month" }),
+        /* @__PURE__ */ jsx5(CardTitle, { children: "Usage This Month" }),
         /* @__PURE__ */ jsx5(Activity, { className: "h-4 w-4 text-muted-foreground" })
       ] }),
-      /* @__PURE__ */ jsx5(CardContent, { children: /* @__PURE__ */ jsx5("p", { className: "text-sm text-destructive", children: error }) })
+      /* @__PURE__ */ jsx5(CardContent, { children: /* @__PURE__ */ jsx5("p", { className: "text-destructive text-xs/relaxed", children: error }) })
     ] });
   }
   const totalUsage = Object.values(summaries).reduce((acc, summary) => {
@@ -502,7 +503,7 @@ function BillingUsageSummaryCard({
   const primarySummary = primaryMeter ? summaries[primaryMeter.id] : null;
   return /* @__PURE__ */ jsxs5(Card, { className: "cursor-pointer hover:bg-accent/50 transition-colors", onClick: onViewDetailsClick, children: [
     /* @__PURE__ */ jsxs5(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-      /* @__PURE__ */ jsx5(CardTitle, { className: "text-sm font-medium", children: "Usage This Month" }),
+      /* @__PURE__ */ jsx5(CardTitle, { children: "Usage This Month" }),
       /* @__PURE__ */ jsx5(Activity, { className: "h-4 w-4 text-muted-foreground" })
     ] }),
     /* @__PURE__ */ jsx5(CardContent, { children: meters.length === 0 ? /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
@@ -635,7 +636,7 @@ function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }) {
     ) }),
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx6(Checkbox, { id: "setAsDefault", checked: setAsDefault, onCheckedChange: (checked) => setSetAsDefault(!!checked) }),
-      /* @__PURE__ */ jsx6(Label, { htmlFor: "setAsDefault", className: "text-sm font-normal", children: "Set as default payment method" })
+      /* @__PURE__ */ jsx6(Label, { htmlFor: "setAsDefault", className: "font-normal", children: "Set as default payment method" })
     ] }),
     error && /* @__PURE__ */ jsx6(Alert, { variant: "destructive", className: "bg-red-50 border-red-200", children: /* @__PURE__ */ jsx6(AlertDescription, { children: error }) }),
     /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-x-2", children: [
@@ -721,7 +722,7 @@ function PaymentMethodCard({ paymentMethod, onUpdate }) {
   }, "handleRemove");
   return /* @__PURE__ */ jsxs8(Fragment, { children: [
     /* @__PURE__ */ jsxs8(Card, { className: "relative", children: [
-      isDefault && /* @__PURE__ */ jsx8(Badge, { className: "absolute right-2 top-2 bg-green-100 text-green-800 hover:bg-green-100", children: "Default" }),
+      isDefault && /* @__PURE__ */ jsx8(Badge, { variant: "softGreen", className: "absolute right-2 top-2", children: "Default" }),
       /* @__PURE__ */ jsxs8(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [
         /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ jsx8("span", { className: "text-2xl", children: brandIcon }),
@@ -742,7 +743,15 @@ function PaymentMethodCard({ paymentMethod, onUpdate }) {
           ) }),
           /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", children: [
             !isDefault && /* @__PURE__ */ jsx8(DropdownMenuItem, { onClick: handleSetDefault, disabled: loading, children: "Set as Default" }),
-            /* @__PURE__ */ jsx8(DropdownMenuItem, { onClick: () => setShowRemoveDialog(true), disabled: loading, className: "text-red-600", children: "Remove" })
+            /* @__PURE__ */ jsx8(
+              DropdownMenuItem,
+              {
+                onClick: () => setShowRemoveDialog(true),
+                disabled: loading,
+                className: "text-destructive",
+                children: "Remove"
+              }
+            )
           ] })
         ] })
       ] }),
@@ -810,14 +819,14 @@ function PaymentMethodsContainer() {
     /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-x-3", children: [
         /* @__PURE__ */ jsx10(CreditCard2, { className: "h-8 w-8" }),
-        /* @__PURE__ */ jsx10("h1", { className: "text-3xl font-bold", children: "Payment Methods" })
+        /* @__PURE__ */ jsx10("h1", { className: "text-primary text-3xl font-semibold", children: "Payment Methods" })
       ] }),
       /* @__PURE__ */ jsx10(Button, { onClick: () => setShowAddPaymentMethod(true), children: "Add Payment Method" })
     ] }),
     paymentMethods.length === 0 && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 bg-muted/50 p-12", children: [
       /* @__PURE__ */ jsx10(CreditCard2, { className: "h-16 w-16 text-muted-foreground" }),
       /* @__PURE__ */ jsxs9("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx10("h3", { className: "mb-2 text-xl font-semibold", children: "No payment methods" }),
+        /* @__PURE__ */ jsx10("h3", { className: "mb-2 text-sm font-medium", children: "No payment methods" }),
         /* @__PURE__ */ jsx10("p", { className: "mb-4 text-muted-foreground", children: "Add a payment method to enable subscriptions and secure checkout." }),
         /* @__PURE__ */ jsx10(Button, { onClick: () => setShowAddPaymentMethod(true), children: "Add Your First Card" })
       ] })
@@ -896,28 +905,28 @@ import { jsx as jsx11 } from "react/jsx-runtime";
 var statusConfig = {
   ["draft" /* DRAFT */]: {
     label: "Draft",
-    color: "bg-gray-100 text-gray-800"
+    variant: "softGray"
   },
   ["open" /* OPEN */]: {
     label: "Open",
-    color: "bg-blue-100 text-blue-800"
+    variant: "softBlue"
   },
   ["paid" /* PAID */]: {
     label: "Paid",
-    color: "bg-green-100 text-green-800"
+    variant: "softGreen"
   },
   ["void" /* VOID */]: {
     label: "Void",
-    color: "bg-gray-100 text-gray-800"
+    variant: "softGray"
   },
   ["uncollectible" /* UNCOLLECTIBLE */]: {
     label: "Uncollectible",
-    color: "bg-red-100 text-red-800"
+    variant: "softRed"
   }
 };
 function InvoiceStatusBadge({ status }) {
   const config = statusConfig[status] || statusConfig["draft" /* DRAFT */];
-  return /* @__PURE__ */ jsx11("span", { className: `${config.color} text-xs px-2 py-1 rounded-full font-medium`, children: config.label });
+  return /* @__PURE__ */ jsx11(Badge, { variant: config.variant, children: config.label });
 }
 __name(InvoiceStatusBadge, "InvoiceStatusBadge");
 
@@ -963,24 +972,24 @@ function InvoiceDetails({
       ] }),
       /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-4", children: [
         /* @__PURE__ */ jsxs10("div", { children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Billing Period:" }),
-          /* @__PURE__ */ jsxs10("p", { className: "font-medium", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground text-xs", children: "Billing Period:" }),
+          /* @__PURE__ */ jsxs10("p", { className: "text-sm", children: [
             formatDate3(invoice.periodStart),
             " - ",
             formatDate3(invoice.periodEnd)
           ] })
         ] }),
         invoice.dueDate && /* @__PURE__ */ jsxs10("div", { children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Due Date:" }),
-          /* @__PURE__ */ jsx12("p", { className: "font-medium", children: formatDate3(invoice.dueDate) })
+          /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground text-xs", children: "Due Date:" }),
+          /* @__PURE__ */ jsx12("p", { className: "text-sm", children: formatDate3(invoice.dueDate) })
         ] }),
         invoice.paidAt && /* @__PURE__ */ jsxs10("div", { children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Paid Date:" }),
-          /* @__PURE__ */ jsx12("p", { className: "font-medium", children: formatDate3(invoice.paidAt) })
+          /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground text-xs", children: "Paid Date:" }),
+          /* @__PURE__ */ jsx12("p", { className: "text-sm", children: formatDate3(invoice.paidAt) })
         ] }),
         /* @__PURE__ */ jsxs10("div", { children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Attempt Count:" }),
-          /* @__PURE__ */ jsx12("p", { className: "font-medium", children: invoice.attemptCount })
+          /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground text-xs", children: "Attempt Count:" }),
+          /* @__PURE__ */ jsx12("p", { className: "text-sm", children: invoice.attemptCount })
         ] })
       ] }),
       /* @__PURE__ */ jsxs10("div", { children: [
@@ -998,24 +1007,24 @@ function InvoiceDetails({
       ] }),
       /* @__PURE__ */ jsxs10("div", { className: "space-y-2 border-t pt-4", children: [
         /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Subtotal:" }),
-          /* @__PURE__ */ jsx12("span", { className: "font-medium", children: formatCurrency(invoice.subtotal, invoice.currency) })
+          /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground text-xs", children: "Subtotal:" }),
+          /* @__PURE__ */ jsx12("span", { className: "text-sm", children: formatCurrency(invoice.subtotal, invoice.currency) })
         ] }),
         invoice.tax !== void 0 && invoice.tax > 0 && /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Tax:" }),
-          /* @__PURE__ */ jsx12("span", { className: "font-medium", children: formatCurrency(invoice.tax, invoice.currency) })
+          /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground text-xs", children: "Tax:" }),
+          /* @__PURE__ */ jsx12("span", { className: "text-sm", children: formatCurrency(invoice.tax, invoice.currency) })
         ] }),
         /* @__PURE__ */ jsxs10("div", { className: "flex justify-between text-lg font-semibold border-t pt-2", children: [
           /* @__PURE__ */ jsx12("span", { children: "Total:" }),
           /* @__PURE__ */ jsx12("span", { children: formatCurrency(invoice.total, invoice.currency) })
         ] }),
         invoice.amountPaid > 0 && /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Amount Paid:" }),
-          /* @__PURE__ */ jsx12("span", { className: "font-medium text-green-600", children: formatCurrency(invoice.amountPaid, invoice.currency) })
+          /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground text-xs", children: "Amount Paid:" }),
+          /* @__PURE__ */ jsx12("span", { className: "text-sm text-success", children: formatCurrency(invoice.amountPaid, invoice.currency) })
         ] }),
         invoice.amountRemaining > 0 && /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Amount Due:" }),
-          /* @__PURE__ */ jsx12("span", { className: "font-medium text-red-600", children: formatCurrency(invoice.amountRemaining, invoice.currency) })
+          /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground text-xs", children: "Amount Due:" }),
+          /* @__PURE__ */ jsx12("span", { className: "text-sm text-destructive", children: formatCurrency(invoice.amountRemaining, invoice.currency) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-2 pt-4 border-t", children: [
@@ -1071,10 +1080,10 @@ function InvoicesList({ invoices, onInvoicesChange }) {
             className: "cursor-pointer hover:bg-muted/50",
             children: [
               /* @__PURE__ */ jsx13(TableCell, { className: "font-medium", children: invoiceNumber }),
-              /* @__PURE__ */ jsx13(TableCell, { className: "text-muted-foreground text-sm", children: date }),
+              /* @__PURE__ */ jsx13(TableCell, { className: "text-muted-foreground text-xs", children: date }),
               /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsx13(InvoiceStatusBadge, { status: invoice.status }) }),
               /* @__PURE__ */ jsx13(TableCell, { className: "text-right font-medium", children: amount }),
-              /* @__PURE__ */ jsx13(TableCell, { className: "text-muted-foreground text-sm", children: period })
+              /* @__PURE__ */ jsx13(TableCell, { className: "text-muted-foreground text-xs", children: period })
             ]
           },
           invoice.id
@@ -1223,44 +1232,44 @@ import { jsx as jsx16 } from "react/jsx-runtime";
 var statusConfig2 = {
   ["active" /* ACTIVE */]: {
     label: "Active",
-    color: "bg-green-100 text-green-800"
+    variant: "softGreen"
   },
   ["trialing" /* TRIALING */]: {
     label: "Trial",
-    color: "bg-blue-100 text-blue-800"
+    variant: "softBlue"
   },
   ["past_due" /* PAST_DUE */]: {
     label: "Past Due",
-    color: "bg-red-100 text-red-800"
+    variant: "softRed"
   },
   ["canceled" /* CANCELED */]: {
     label: "Canceled",
-    color: "bg-gray-100 text-gray-800"
+    variant: "softGray"
   },
   ["paused" /* PAUSED */]: {
     label: "Paused",
-    color: "bg-yellow-100 text-yellow-800"
+    variant: "softYellow"
   },
   ["unpaid" /* UNPAID */]: {
     label: "Unpaid",
-    color: "bg-orange-100 text-orange-800"
+    variant: "softOrange"
   },
   ["incomplete" /* INCOMPLETE */]: {
     label: "Incomplete",
-    color: "bg-gray-100 text-gray-800"
+    variant: "softGray"
   },
   ["incomplete_expired" /* INCOMPLETE_EXPIRED */]: {
     label: "Expired",
-    color: "bg-gray-100 text-gray-800"
+    variant: "softGray"
   }
 };
 var cancelingConfig = {
   label: "Canceling",
-  color: "bg-amber-100 text-amber-800"
+  variant: "softAmber"
 };
 function SubscriptionStatusBadge({ status, cancelAtPeriodEnd }) {
   const config = cancelAtPeriodEnd ? cancelingConfig : statusConfig2[status] || statusConfig2["canceled" /* CANCELED */];
-  return /* @__PURE__ */ jsx16("span", { className: `${config.color} text-xs px-2 py-1 rounded-full font-medium`, children: config.label });
+  return /* @__PURE__ */ jsx16(Badge, { variant: config.variant, children: config.label });
 }
 __name(SubscriptionStatusBadge, "SubscriptionStatusBadge");
 
@@ -1340,7 +1349,7 @@ function SubscriptionDetails({
       ] }),
       /* @__PURE__ */ jsxs14("div", { className: "space-y-6", children: [
         /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-x-3", children: [
-          /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Status:" }),
+          /* @__PURE__ */ jsx17("span", { className: "text-muted-foreground text-xs", children: "Status:" }),
           /* @__PURE__ */ jsx17(
             SubscriptionStatusBadge,
             {
@@ -1351,27 +1360,27 @@ function SubscriptionDetails({
         ] }),
         /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Plan:" }),
-            /* @__PURE__ */ jsx17("span", { className: "font-medium", children: formatPlanName2(subscription.price) })
+            /* @__PURE__ */ jsx17("span", { className: "text-muted-foreground text-xs", children: "Plan:" }),
+            /* @__PURE__ */ jsx17("span", { className: "text-sm", children: formatPlanName2(subscription.price) })
           ] }),
           /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Billing Amount:" }),
-            /* @__PURE__ */ jsx17("span", { className: "font-medium", children: formatBillingAmount(subscription.price) })
+            /* @__PURE__ */ jsx17("span", { className: "text-muted-foreground text-xs", children: "Billing Amount:" }),
+            /* @__PURE__ */ jsx17("span", { className: "text-sm", children: formatBillingAmount(subscription.price) })
           ] })
         ] }),
         /* @__PURE__ */ jsx17("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Current Period:" }),
-          /* @__PURE__ */ jsxs14("span", { className: "font-medium", children: [
+          /* @__PURE__ */ jsx17("span", { className: "text-muted-foreground text-xs", children: "Current Period:" }),
+          /* @__PURE__ */ jsxs14("span", { className: "text-sm", children: [
             formatDate3(subscription.currentPeriodStart),
             " - ",
             formatDate3(subscription.currentPeriodEnd)
           ] })
         ] }) }),
         subscription.trialEnd && /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Trial Ends:" }),
-          /* @__PURE__ */ jsx17("span", { className: "font-medium", children: formatDate3(subscription.trialEnd) })
+          /* @__PURE__ */ jsx17("span", { className: "text-muted-foreground text-xs", children: "Trial Ends:" }),
+          /* @__PURE__ */ jsx17("span", { className: "text-sm", children: formatDate3(subscription.trialEnd) })
         ] }),
-        subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsx17("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-3", children: /* @__PURE__ */ jsxs14("p", { className: "text-sm text-yellow-800", children: [
+        subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsx17("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-3", children: /* @__PURE__ */ jsxs14("p", { className: "text-warning text-xs/relaxed", children: [
           "This subscription will be canceled at the end of the current period on",
           " ",
           formatDate3(subscription.currentPeriodEnd),
@@ -1524,7 +1533,7 @@ function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscription }
     /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-x-3", children: [
         /* @__PURE__ */ jsx19(CreditCard3, { className: "h-8 w-8" }),
-        /* @__PURE__ */ jsx19("h1", { className: "text-3xl font-bold", children: "Subscriptions" })
+        /* @__PURE__ */ jsx19("h1", { className: "text-primary text-3xl font-semibold", children: "Subscriptions" })
       ] }),
       subscriptions.length > 0 && /* @__PURE__ */ jsx19(Button, { onClick: () => onOpenWizard?.(), children: hasActiveRecurringSubscription ? "Purchase Add-ons" : "Subscribe to a Plan" })
     ] }),
@@ -1532,7 +1541,7 @@ function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscription }
     subscriptions.length === 0 && /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center py-12 space-y-4", children: [
       /* @__PURE__ */ jsx19(CreditCard3, { className: "h-16 w-16 text-muted-foreground" }),
       /* @__PURE__ */ jsxs16("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx19("h3", { className: "text-xl font-semibold mb-2", children: "No Active Subscriptions" }),
+        /* @__PURE__ */ jsx19("h3", { className: "text-sm font-medium mb-2", children: "No Active Subscriptions" }),
         /* @__PURE__ */ jsx19("p", { className: "text-muted-foreground mb-6", children: "Choose a subscription plan to get started with our services." }),
         /* @__PURE__ */ jsx19(Button, { onClick: () => onOpenWizard?.(), children: "Subscribe to a Plan" })
       ] })
@@ -1608,14 +1617,14 @@ function PricingCard({
       ),
       children: [
         isCurrentPlan && /* @__PURE__ */ jsx21(Badge, { variant: "secondary", className: "absolute top-2 right-2", children: "Current" }),
-        /* @__PURE__ */ jsx21(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx21("h3", { className: "font-semibold text-lg", children: description }) }),
+        /* @__PURE__ */ jsx21(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx21("h3", { className: "text-sm font-medium", children: description }) }),
         /* @__PURE__ */ jsxs18(CardContent, { className: "pb-4 grow", children: [
           /* @__PURE__ */ jsxs18("div", { className: "mb-4", children: [
             /* @__PURE__ */ jsx21("span", { className: "text-3xl font-bold", children: formattedPrice }),
             /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground ml-1", children: interval })
           ] }),
           features.length > 0 && /* @__PURE__ */ jsx21("ul", { className: "space-y-2", children: features.map((feature, index) => /* @__PURE__ */ jsxs18("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsx21(Check, { className: "h-4 w-4 text-green-500 mt-0.5 shrink-0" }),
+            /* @__PURE__ */ jsx21(Check, { className: "text-success mt-0.5 h-4 w-4 shrink-0" }),
             /* @__PURE__ */ jsx21("span", { className: "text-sm text-muted-foreground", children: feature })
           ] }, index)) })
         ] }),
@@ -1648,7 +1657,7 @@ function ProductPricingRow({
     return null;
   }
   return /* @__PURE__ */ jsxs19("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx22("h3", { className: "font-semibold text-lg", children: product.name }),
+    /* @__PURE__ */ jsx22(SectionHeader, { children: product.name }),
     /* @__PURE__ */ jsx22(
       "div",
       {
@@ -1770,7 +1779,7 @@ function ProrationPreview({ preview }) {
     /* @__PURE__ */ jsxs21("div", { className: "space-y-2", children: [
       preview.lineItems.map((item, index) => /* @__PURE__ */ jsxs21("div", { className: "flex justify-between text-sm", children: [
         /* @__PURE__ */ jsx24("span", { className: "text-blue-800", children: item.description }),
-        /* @__PURE__ */ jsx24("span", { className: `font-medium ${item.amount < 0 ? "text-green-600" : "text-blue-900"}`, children: formatCurrency(item.amount, preview.currency) })
+        /* @__PURE__ */ jsx24("span", { className: `font-medium ${item.amount < 0 ? "text-success" : "text-blue-900"}`, children: formatCurrency(item.amount, preview.currency) })
       ] }, index)),
       /* @__PURE__ */ jsx24("div", { className: "border-t border-blue-200 pt-2 mt-2", children: /* @__PURE__ */ jsxs21("div", { className: "flex justify-between font-semibold", children: [
         /* @__PURE__ */ jsx24("span", { className: "text-blue-900", children: "Net Due Today" }),
@@ -2198,9 +2207,9 @@ function PromoCodeInput({
     return /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg", children: [
         /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx28(Check4, { className: "h-4 w-4 text-green-600" }),
-          /* @__PURE__ */ jsx28("span", { className: "font-medium text-green-800", children: appliedCode.code }),
-          /* @__PURE__ */ jsx28("span", { className: "text-sm text-green-600", children: formatDiscount(appliedCode) })
+          /* @__PURE__ */ jsx28(Check4, { className: "text-success h-4 w-4" }),
+          /* @__PURE__ */ jsx28("span", { className: "text-success font-medium", children: appliedCode.code }),
+          /* @__PURE__ */ jsx28("span", { className: "text-success text-sm", children: formatDiscount(appliedCode) })
         ] }),
         /* @__PURE__ */ jsx28(
           Button,
@@ -2209,12 +2218,12 @@ function PromoCodeInput({
             size: "sm",
             onClick: onRemove,
             disabled,
-            className: "text-green-700 hover:text-green-900 hover:bg-green-100",
+            className: "text-success hover:bg-green-100 hover:text-success",
             children: /* @__PURE__ */ jsx28(X, { className: "h-4 w-4" })
           }
         )
       ] }),
-      /* @__PURE__ */ jsx28("p", { className: "text-sm text-green-600", children: formatDuration(appliedCode) })
+      /* @__PURE__ */ jsx28("p", { className: "text-success text-sm", children: formatDuration(appliedCode) })
     ] });
   }
   return /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
@@ -2232,7 +2241,7 @@ function PromoCodeInput({
       ),
       /* @__PURE__ */ jsx28(Button, { variant: "outline", onClick: handleApply, disabled: disabled || isValidating || !code.trim(), children: isValidating ? /* @__PURE__ */ jsx28(Loader22, { className: "h-4 w-4 animate-spin" }) : "Apply" })
     ] }),
-    error && /* @__PURE__ */ jsx28("p", { className: "text-sm text-red-500", children: error })
+    error && /* @__PURE__ */ jsx28("p", { className: "text-destructive text-xs/relaxed", children: error })
   ] });
 }
 __name(PromoCodeInput, "PromoCodeInput");
@@ -2302,7 +2311,7 @@ function WizardStepReview({
   const discountDescription = getDiscountDescription();
   return /* @__PURE__ */ jsxs26("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsxs26("div", { className: "bg-muted/50 rounded-lg p-4 space-y-3", children: [
-      /* @__PURE__ */ jsx29("h3", { className: "font-semibold text-lg", children: "Selected Plan" }),
+      /* @__PURE__ */ jsx29(SectionHeader, { children: "Selected Plan" }),
       /* @__PURE__ */ jsxs26("div", { className: "flex justify-between items-center", children: [
         /* @__PURE__ */ jsxs26("div", { children: [
           /* @__PURE__ */ jsx29("p", { className: "font-medium", children: selectedPrice.product?.name }),
@@ -2311,8 +2320,8 @@ function WizardStepReview({
         /* @__PURE__ */ jsxs26("div", { className: "text-right", children: [
           discountedPrice !== null ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
             /* @__PURE__ */ jsx29("p", { className: "text-sm text-muted-foreground line-through", children: formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency) }),
-            /* @__PURE__ */ jsx29("p", { className: "font-semibold text-lg text-green-600", children: formatCurrency(discountedPrice, selectedPrice.currency) }),
-            discountDescription && /* @__PURE__ */ jsx29("span", { className: "inline-block text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full", children: discountDescription })
+            /* @__PURE__ */ jsx29("p", { className: "text-success text-lg font-semibold", children: formatCurrency(discountedPrice, selectedPrice.currency) }),
+            discountDescription && /* @__PURE__ */ jsx29(Badge, { variant: "softGreen", children: discountDescription })
           ] }) : /* @__PURE__ */ jsx29("p", { className: "font-semibold text-lg", children: formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency) }),
           /* @__PURE__ */ jsx29("p", { className: "text-sm text-muted-foreground", children: formatInterval2(selectedPrice) })
         ] })
@@ -2323,13 +2332,13 @@ function WizardStepReview({
       {
         className: `${isTrialUpgrade ? "bg-amber-50 border-amber-200" : "bg-blue-50 border-blue-200"} border rounded-lg p-4 space-y-2`,
         children: [
-          /* @__PURE__ */ jsx29("h4", { className: `font-medium ${isTrialUpgrade ? "text-amber-800" : "text-blue-800"}`, children: isTrialUpgrade ? "Trial Upgrade" : "Proration Summary" }),
-          /* @__PURE__ */ jsx29("p", { className: `text-sm ${isTrialUpgrade ? "text-amber-700" : "text-blue-700"}`, children: isTrialUpgrade ? "Your trial will end immediately and you will be charged the full price." : "Your next charge will be adjusted to account for the plan change." }),
+          /* @__PURE__ */ jsx29("h4", { className: `font-medium ${isTrialUpgrade ? "text-warning" : "text-blue-800"}`, children: isTrialUpgrade ? "Trial Upgrade" : "Proration Summary" }),
+          /* @__PURE__ */ jsx29("p", { className: `text-sm ${isTrialUpgrade ? "text-warning" : "text-blue-700"}`, children: isTrialUpgrade ? "Your trial will end immediately and you will be charged the full price." : "Your next charge will be adjusted to account for the plan change." }),
           /* @__PURE__ */ jsxs26("div", { className: "flex justify-between text-sm", children: [
-            /* @__PURE__ */ jsx29("span", { className: `${isTrialUpgrade ? "text-amber-600" : "text-blue-600"}`, children: isTrialUpgrade ? "Amount to charge now:" : "Amount due now:" }),
-            /* @__PURE__ */ jsx29("span", { className: `font-medium ${isTrialUpgrade ? "text-amber-800" : "text-blue-800"}`, children: discountedImmediateCharge !== null ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
+            /* @__PURE__ */ jsx29("span", { className: `${isTrialUpgrade ? "text-warning" : "text-blue-600"}`, children: isTrialUpgrade ? "Amount to charge now:" : "Amount due now:" }),
+            /* @__PURE__ */ jsx29("span", { className: `font-medium ${isTrialUpgrade ? "text-warning" : "text-blue-800"}`, children: discountedImmediateCharge !== null ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
               /* @__PURE__ */ jsx29("span", { className: "line-through text-muted-foreground mr-2", children: formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency) }),
-              /* @__PURE__ */ jsx29("span", { className: "text-green-600", children: formatCurrency(discountedImmediateCharge, prorationPreview.currency) })
+              /* @__PURE__ */ jsx29("span", { className: "text-success", children: formatCurrency(discountedImmediateCharge, prorationPreview.currency) })
             ] }) : formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency) })
           ] })
         ]
@@ -2373,7 +2382,7 @@ import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 function WizardStepPaymentMethod({ onBack, onSuccess, isProcessing }) {
   return /* @__PURE__ */ jsxs27("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsxs27("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx30("h3", { className: "font-semibold text-lg", children: "Add Payment Method" }),
+      /* @__PURE__ */ jsx30(SectionHeader, { children: "Add Payment Method" }),
       /* @__PURE__ */ jsx30("p", { className: "text-sm text-muted-foreground", children: "Enter your card details to complete your subscription" })
     ] }),
     /* @__PURE__ */ jsx30(PaymentMethodForm, { onSuccess, onCancel: onBack, isLoading: isProcessing })
@@ -2505,14 +2514,14 @@ function UsageSummaryCard({ meter, summary }) {
     /* @__PURE__ */ jsxs29(CardHeader, { className: "flex flex-row items-center gap-x-3 pb-3", children: [
       /* @__PURE__ */ jsx32("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600", children: /* @__PURE__ */ jsx32(Activity2, { className: "h-5 w-5" }) }),
       /* @__PURE__ */ jsxs29("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx32("h3", { className: "font-semibold", children: displayName }),
-        /* @__PURE__ */ jsx32("p", { className: "text-xs text-gray-500", children: meter.id })
+        /* @__PURE__ */ jsx32("h3", { className: "text-sm font-medium", children: displayName }),
+        /* @__PURE__ */ jsx32("p", { className: "text-muted-foreground text-xs", children: meter.id })
       ] })
     ] }),
     /* @__PURE__ */ jsxs29(CardContent, { className: "flex flex-col gap-y-4", children: [
       /* @__PURE__ */ jsxs29("div", { children: [
         /* @__PURE__ */ jsx32("p", { className: "text-3xl font-bold", children: currentUsage.toLocaleString() }),
-        hasLimit && /* @__PURE__ */ jsxs29("p", { className: "text-sm text-gray-500", children: [
+        hasLimit && /* @__PURE__ */ jsxs29("p", { className: "text-muted-foreground text-sm", children: [
           "of ",
           limit.toLocaleString(),
           " used"
@@ -2520,12 +2529,12 @@ function UsageSummaryCard({ meter, summary }) {
       ] }),
       hasLimit ? /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-y-2", children: [
         /* @__PURE__ */ jsx32("div", { className: "h-2 w-full overflow-hidden rounded-full bg-gray-200", children: /* @__PURE__ */ jsx32("div", { className: `h-full transition-all ${progressColor}`, style: { width: `${progressWidth}%` } }) }),
-        /* @__PURE__ */ jsxs29("p", { className: "text-sm text-gray-500", children: [
+        /* @__PURE__ */ jsxs29("p", { className: "text-muted-foreground text-sm", children: [
           percentage?.toFixed(1),
           "% used"
         ] })
-      ] }) : /* @__PURE__ */ jsx32("p", { className: "text-sm text-gray-500", children: "No limit set" }),
-      summary && summary.start && summary.end && /* @__PURE__ */ jsx32("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsxs29("p", { className: "text-xs text-gray-500", children: [
+      ] }) : /* @__PURE__ */ jsx32("p", { className: "text-muted-foreground text-sm", children: "No limit set" }),
+      summary && summary.start && summary.end && /* @__PURE__ */ jsx32("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsxs29("p", { className: "text-muted-foreground text-xs", children: [
         "Period: ",
         formatDate4(summary.start),
         " - ",
@@ -2599,12 +2608,12 @@ function UsageContainer() {
   return /* @__PURE__ */ jsxs30("div", { className: "flex w-full flex-col gap-y-6", children: [
     /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-x-3", children: [
       /* @__PURE__ */ jsx34(Activity3, { className: "h-8 w-8" }),
-      /* @__PURE__ */ jsx34("h1", { className: "text-3xl font-bold", children: "Usage Tracking" })
+      /* @__PURE__ */ jsx34("h1", { className: "text-primary text-3xl font-semibold", children: "Usage Tracking" })
     ] }),
     meters.length === 0 && /* @__PURE__ */ jsxs30("div", { className: "bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 p-12", children: [
       /* @__PURE__ */ jsx34(Activity3, { className: "text-muted-foreground h-16 w-16" }),
       /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx34("h3", { className: "mb-2 text-xl font-semibold", children: "No usage meters configured" }),
+        /* @__PURE__ */ jsx34("h3", { className: "mb-2 text-sm font-medium", children: "No usage meters configured" }),
         /* @__PURE__ */ jsx34("p", { className: "text-muted-foreground", children: "Usage tracking will appear here when you have metered subscriptions with configured meters." })
       ] })
     ] }),
@@ -2636,7 +2645,7 @@ function UsageHistoryTable({ usageRecords }) {
     return /* @__PURE__ */ jsx35("div", { className: "rounded-lg border p-8 text-center", children: /* @__PURE__ */ jsx35("p", { className: "text-muted-foreground", children: "No usage history available." }) });
   }
   return /* @__PURE__ */ jsxs31("div", { className: "flex w-full flex-col gap-y-4", children: [
-    /* @__PURE__ */ jsx35("h2", { className: "text-xl font-semibold", children: "Usage History" }),
+    /* @__PURE__ */ jsx35(SectionHeader, { level: 2, children: "Usage History" }),
     /* @__PURE__ */ jsx35("div", { className: "overflow-clip rounded-lg border", children: /* @__PURE__ */ jsxs31(Table, { children: [
       /* @__PURE__ */ jsx35(TableHeader, { className: "bg-muted", children: /* @__PURE__ */ jsxs31(TableRow, { children: [
         /* @__PURE__ */ jsx35(TableHead, { children: "Date & Time" }),
@@ -2651,7 +2660,7 @@ function UsageHistoryTable({ usageRecords }) {
           /* @__PURE__ */ jsx35(TableCell, { className: "font-medium", children: dateTime }),
           /* @__PURE__ */ jsx35(TableCell, { className: "text-muted-foreground", children: record.meterEventName }),
           /* @__PURE__ */ jsx35(TableCell, { className: "text-right font-medium", children: quantity }),
-          /* @__PURE__ */ jsx35(TableCell, { className: "text-muted-foreground text-sm font-mono", children: record.stripeEventId })
+          /* @__PURE__ */ jsx35(TableCell, { className: "text-muted-foreground text-sm tabular-nums", children: record.stripeEventId })
         ] }, record.id);
       }) })
     ] }) })
@@ -2675,12 +2684,12 @@ import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 function BillingAlertBanner({ subscription, onUpdatePayment, onAddPayment }) {
   if (subscription.status === "past_due" /* PAST_DUE */) {
     return /* @__PURE__ */ jsxs33("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 flex items-start gap-x-3", children: [
-      /* @__PURE__ */ jsx37(AlertCircle2, { className: "h-5 w-5 text-red-600 mt-0.5" }),
+      /* @__PURE__ */ jsx37(AlertCircle2, { className: "text-destructive mt-0.5 h-5 w-5" }),
       /* @__PURE__ */ jsxs33("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsx37("h3", { className: "font-semibold text-red-900", children: "Payment Failed" }),
-        /* @__PURE__ */ jsx37("p", { className: "text-sm text-red-700 mt-1", children: "Your last payment failed. Please update your payment method to avoid service interruption." })
+        /* @__PURE__ */ jsx37("h3", { className: "text-destructive text-sm font-medium", children: "Payment Failed" }),
+        /* @__PURE__ */ jsx37("p", { className: "text-destructive mt-1 text-sm", children: "Your last payment failed. Please update your payment method to avoid service interruption." })
       ] }),
-      onUpdatePayment && /* @__PURE__ */ jsx37(Button, { variant: "outline", size: "sm", onClick: onUpdatePayment, className: "border-red-300 text-red-700", children: "Update Payment Method" })
+      onUpdatePayment && /* @__PURE__ */ jsx37(Button, { variant: "outline", size: "sm", onClick: onUpdatePayment, className: "text-destructive border-red-300", children: "Update Payment Method" })
     ] });
   }
   if (subscription.status === "trialing" /* TRIALING */ && subscription.trialEnd) {
@@ -2689,10 +2698,10 @@ function BillingAlertBanner({ subscription, onUpdatePayment, onAddPayment }) {
     const daysRemaining = Math.ceil((trialEnd.getTime() - now.getTime()) / (1e3 * 60 * 60 * 24));
     if (daysRemaining <= 7) {
       return /* @__PURE__ */ jsxs33("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-start gap-x-3", children: [
-        /* @__PURE__ */ jsx37(AlertCircle2, { className: "h-5 w-5 text-yellow-600 mt-0.5" }),
+        /* @__PURE__ */ jsx37(AlertCircle2, { className: "text-warning mt-0.5 h-5 w-5" }),
         /* @__PURE__ */ jsxs33("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx37("h3", { className: "font-semibold text-yellow-900", children: "Trial Ending Soon" }),
-          /* @__PURE__ */ jsxs33("p", { className: "text-sm text-yellow-700 mt-1", children: [
+          /* @__PURE__ */ jsx37("h3", { className: "text-warning text-sm font-medium", children: "Trial Ending Soon" }),
+          /* @__PURE__ */ jsxs33("p", { className: "text-warning mt-1 text-sm", children: [
             "Your trial ends in ",
             daysRemaining,
             " ",
@@ -2700,7 +2709,7 @@ function BillingAlertBanner({ subscription, onUpdatePayment, onAddPayment }) {
             ". Add a payment method to continue your subscription."
           ] })
         ] }),
-        onAddPayment && /* @__PURE__ */ jsx37(Button, { variant: "outline", size: "sm", onClick: onAddPayment, className: "border-yellow-300 text-yellow-700", children: "Add Payment Method" })
+        onAddPayment && /* @__PURE__ */ jsx37(Button, { variant: "outline", size: "sm", onClick: onAddPayment, className: "text-warning border-yellow-300", children: "Add Payment Method" })
       ] });
     }
   }
@@ -2922,7 +2931,7 @@ function BillingDashboardContainer() {
   return /* @__PURE__ */ jsxs34("div", { className: "flex w-full flex-col gap-y-6", children: [
     /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-x-3", children: [
       /* @__PURE__ */ jsx38(Wallet2, { className: "h-8 w-8" }),
-      /* @__PURE__ */ jsx38("h1", { className: "text-3xl font-bold", children: "Billing" })
+      /* @__PURE__ */ jsx38("h1", { className: "text-primary text-3xl font-semibold", children: "Billing" })
     ] }),
     isInitialLoading && /* @__PURE__ */ jsx38(Card, { children: /* @__PURE__ */ jsx38(CardContent, { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx38(Loader23, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }) }),
     noCustomerExists && !isInitialLoading && /* @__PURE__ */ jsxs34(Card, { children: [
@@ -2935,7 +2944,7 @@ function BillingDashboardContainer() {
         /* @__PURE__ */ jsx38(Loader23, { className: "mr-2 h-4 w-4 animate-spin" }),
         "Setting up..."
       ] }) : "Set Up Billing Account" }) }),
-      errors.customer && /* @__PURE__ */ jsx38(CardContent, { className: "pt-0", children: /* @__PURE__ */ jsx38("p", { className: "text-center text-sm text-destructive", children: errors.customer }) })
+      errors.customer && /* @__PURE__ */ jsx38(CardContent, { className: "pt-0", children: /* @__PURE__ */ jsx38("p", { className: "text-center text-destructive text-xs/relaxed", children: errors.customer }) })
     ] }),
     !noCustomerExists && !isInitialLoading && /* @__PURE__ */ jsxs34(Fragment7, { children: [
       criticalSubscriptions.map((subscription) => /* @__PURE__ */ jsx38(
@@ -3563,9 +3572,9 @@ function PricesList({ productId, onPricesChange }) {
         ] }) }),
         price.metadata?.nickname && /* @__PURE__ */ jsx41("p", { className: "text-sm font-medium mb-2", children: price.metadata.nickname }),
         /* @__PURE__ */ jsxs36("div", { className: "flex flex-wrap gap-2", children: [
-          price.active ? /* @__PURE__ */ jsx41("span", { className: "bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium", children: "Active" }) : /* @__PURE__ */ jsx41("span", { className: "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium", children: "Inactive" }),
-          price.recurring?.usageType === "metered" && /* @__PURE__ */ jsx41("span", { className: "bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium", children: "Metered" }),
-          /* @__PURE__ */ jsx41("span", { className: "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium uppercase", children: price.currency })
+          price.active ? /* @__PURE__ */ jsx41(Badge, { variant: "softGreen", children: "Active" }) : /* @__PURE__ */ jsx41(Badge, { variant: "softGray", children: "Inactive" }),
+          price.recurring?.usageType === "metered" && /* @__PURE__ */ jsx41(Badge, { variant: "softBlue", children: "Metered" }),
+          /* @__PURE__ */ jsx41(Badge, { variant: "softGray", className: "uppercase", children: price.currency })
         ] })
       ] }, price.id);
     }) }),
@@ -3775,8 +3784,8 @@ function ProductsList({ products, onProductsChange }) {
             /* @__PURE__ */ jsx43(Package, { className: "h-6 w-6 text-primary" }),
             /* @__PURE__ */ jsxs38("div", { className: "flex-1", children: [
               /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-x-3", children: [
-                /* @__PURE__ */ jsx43("h3", { className: "text-lg font-semibold", children: product.name }),
-                product.active ? /* @__PURE__ */ jsx43("span", { className: "bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium", children: "Active" }) : /* @__PURE__ */ jsx43("span", { className: "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium", children: "Inactive" })
+                /* @__PURE__ */ jsx43("h3", { className: "text-sm font-medium", children: product.name }),
+                product.active ? /* @__PURE__ */ jsx43(Badge, { variant: "softGreen", children: "Active" }) : /* @__PURE__ */ jsx43(Badge, { variant: "softGray", children: "Inactive" })
               ] }),
               product.description && /* @__PURE__ */ jsx43("p", { className: "text-muted-foreground text-sm mt-1", children: product.description })
             ] })
@@ -3885,7 +3894,7 @@ function ProductsAdminContainer() {
   const [loading, setLoading] = useState19(true);
   const [showCreateProduct, setShowCreateProduct] = useState19(false);
   if (!hasRole(getRoleId().Administrator)) {
-    return /* @__PURE__ */ jsx44("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx44("p", { className: "text-red-600 font-semibold", children: "Permission denied. Administrator access required." }) });
+    return /* @__PURE__ */ jsx44("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx44("p", { className: "text-destructive text-xs/relaxed", children: "Permission denied. Administrator access required." }) });
   }
   const loadProducts = /* @__PURE__ */ __name(async () => {
     setLoading(true);
@@ -3908,14 +3917,14 @@ function ProductsAdminContainer() {
     /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-x-3", children: [
         /* @__PURE__ */ jsx44(Package2, { className: "h-8 w-8" }),
-        /* @__PURE__ */ jsx44("h1", { className: "text-3xl font-bold", children: "Product & Price Management" })
+        /* @__PURE__ */ jsx44("h1", { className: "text-primary text-3xl font-semibold", children: "Product & Price Management" })
       ] }),
       /* @__PURE__ */ jsx44(Button, { onClick: () => setShowCreateProduct(true), children: "Create Product" })
     ] }),
     products.length === 0 && /* @__PURE__ */ jsxs39("div", { className: "bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed p-12", children: [
       /* @__PURE__ */ jsx44(Package2, { className: "text-muted-foreground h-16 w-16" }),
       /* @__PURE__ */ jsxs39("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx44("h3", { className: "mb-2 text-xl font-semibold", children: "No products yet" }),
+        /* @__PURE__ */ jsx44("h3", { className: "mb-2 text-sm font-medium", children: "No products yet" }),
         /* @__PURE__ */ jsx44("p", { className: "text-muted-foreground mb-4", children: "Create your first product to start offering subscriptions to your customers." }),
         /* @__PURE__ */ jsx44(Button, { onClick: () => setShowCreateProduct(true), children: "Create Your First Product" })
       ] })