@burdenoff/microfe-adaptercloud 2026.614.1 → 2026.625.1

package/dist/adaptercloud/pages/common/SettingsPage.js

@@ -120,7 +120,7 @@ function I({ checked: e, onChange: n, label: r }) {
 		"aria-checked": e,
 		"aria-label": r,
 		onClick: () => n(!e),
-		className: t("relative inline-flex h-6 w-11 items-center rounded-full transition-colors shrink-0", e ? "bg-primary" : "bg-muted"),
+		className: t("relative inline-flex h-6 w-11 items-center rounded-full transition-colors shrink-0", e ? "bg-action-primary-bg" : "bg-bg-sunken"),
 		children: /* @__PURE__ */ M("span", { className: t("inline-block h-4 w-4 transform rounded-full bg-white transition-transform", e ? "translate-x-6" : "translate-x-1") })
 	});
 }
@@ -192,18 +192,18 @@ function L() {
 			children: [B && /* @__PURE__ */ N("button", {
 				type: "button",
 				onClick: X,
-				className: "flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+				className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 				children: [/* @__PURE__ */ M(C, { className: "h-4 w-4" }), K("adaptercloud.settings.reset", "Reset")]
 			}), /* @__PURE__ */ M("button", {
 				type: "button",
 				disabled: !B || H,
 				onClick: Z,
-				className: t("flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium transition-colors", B && !H ? "bg-primary text-primary-foreground hover:bg-primary/90" : "bg-muted text-muted-foreground cursor-not-allowed"),
+				className: t("flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium transition-colors", B && !H ? "bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90" : "bg-bg-sunken text-text-secondary cursor-not-allowed"),
 				children: H ? /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M(g, { className: "h-4 w-4 animate-spin" }), K("adaptercloud.settings.saving", "Saving...")] }) : /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M(w, { className: "h-4 w-4" }), K("adaptercloud.settings.save", "Save Settings")] })
 			})]
 		}),
 		children: [W && /* @__PURE__ */ N("div", {
-			className: t("mb-6 flex items-center gap-2 rounded-lg border p-3 text-sm", W.includes("successfully") ? "border-green-500/30 bg-green-500/5 text-green-600 dark:text-green-400" : "border-red-500/30 bg-red-500/5 text-red-600 dark:text-red-400"),
+			className: t("mb-6 flex items-center gap-2 rounded-lg border p-3 text-sm", W.includes("successfully") ? "border-status-success-border/30 bg-status-success-bg-subtle/5 text-status-success-text" : "border-status-error-border/30 bg-status-error-bg-subtle/5 text-status-error-text"),
 			children: [W.includes("successfully") ? /* @__PURE__ */ M(d, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ M(s, { className: "h-4 w-4 shrink-0" }), W]
 		}), /* @__PURE__ */ N("div", {
 			className: "flex flex-col gap-6 lg:flex-row",
@@ -216,7 +216,7 @@ function L() {
 						return /* @__PURE__ */ N("button", {
 							type: "button",
 							onClick: () => L(e.id),
-							className: t("flex flex-col items-center gap-1 rounded-lg py-2.5 text-center transition-colors", A === e.id ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent"),
+							className: t("flex flex-col items-center gap-1 rounded-lg py-2.5 text-center transition-colors", A === e.id ? "bg-action-primary-bg/10 text-text-primary" : "text-text-secondary hover:text-text-primary hover:bg-accent"),
 							children: [/* @__PURE__ */ M(n, { className: "h-4 w-4" }), /* @__PURE__ */ M("span", {
 								className: "text-xs font-medium",
 								children: e.label
@@ -224,11 +224,11 @@ function L() {
 						}, e.id);
 					})
 				}), /* @__PURE__ */ N("div", {
-					className: "hidden lg:block rounded-lg border border-border bg-card",
+					className: "hidden lg:block rounded-lg border border-border-subtle bg-bg-surface",
 					children: [/* @__PURE__ */ M("div", {
-						className: "p-3 border-b border-border",
+						className: "p-3 border-b border-border-subtle",
 						children: /* @__PURE__ */ M("p", {
-							className: "text-sm font-semibold text-foreground",
+							className: "text-sm font-semibold text-text-primary",
 							children: K("adaptercloud.settings.title", "Settings")
 						})
 					}), /* @__PURE__ */ M("nav", {
@@ -238,20 +238,20 @@ function L() {
 							return /* @__PURE__ */ N("button", {
 								type: "button",
 								onClick: () => L(e.id),
-								className: t("flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors mb-0.5", A === e.id ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent"),
+								className: t("flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors mb-0.5", A === e.id ? "bg-action-primary-bg/10 text-text-primary" : "text-text-secondary hover:text-text-primary hover:bg-accent"),
 								children: [/* @__PURE__ */ M(n, { className: "h-4 w-4" }), e.label]
 							}, e.id);
 						})
 					})]
 				})]
 			}), /* @__PURE__ */ M("div", {
-				className: "flex-1 rounded-lg border border-border bg-card p-6",
+				className: "flex-1 rounded-lg border border-border-seam bg-bg-surface p-6 bg-gloss-card shadow-pop",
 				children: {
 					profile: () => /* @__PURE__ */ N("div", {
 						className: "space-y-6",
 						children: [
 							/* @__PURE__ */ M("h3", {
-								className: "text-base font-semibold text-foreground",
+								className: "text-base font-semibold text-text-primary",
 								children: "Personal Information"
 							}),
 							/* @__PURE__ */ N("div", {
@@ -261,88 +261,88 @@ function L() {
 									children: [/* @__PURE__ */ M("img", {
 										src: R.profile.profilePicture,
 										alt: "Profile",
-										className: "h-20 w-20 rounded-full object-cover border border-border"
+										className: "h-20 w-20 rounded-full object-cover border border-border-subtle"
 									}), /* @__PURE__ */ M("button", {
 										type: "button",
 										onClick: () => alert("Photo upload coming soon"),
-										className: "absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+										className: "absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-action-primary-bg text-action-primary-text shadow-sm hover:bg-action-primary-bg/90",
 										children: /* @__PURE__ */ M(u, { className: "h-3.5 w-3.5" })
 									})]
 								}), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-									className: "text-sm font-medium text-foreground",
+									className: "text-sm font-medium text-text-primary",
 									children: "Profile Picture"
 								}), /* @__PURE__ */ M("p", {
-									className: "text-xs text-muted-foreground",
+									className: "text-xs text-text-secondary",
 									children: "Upload a new photo (JPG, PNG, max 2MB)"
 								})] })]
 							}),
 							/* @__PURE__ */ N("div", {
 								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
 								children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-									className: "block text-sm font-medium text-foreground mb-1.5",
+									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: "First Name *"
 								}), /* @__PURE__ */ M("input", {
 									type: "text",
 									value: R.profile.firstName,
 									onChange: (e) => J("profile", "firstName", e.target.value),
-									className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+									className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-									className: "block text-sm font-medium text-foreground mb-1.5",
+									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: "Last Name *"
 								}), /* @__PURE__ */ M("input", {
 									type: "text",
 									value: R.profile.lastName,
 									onChange: (e) => J("profile", "lastName", e.target.value),
-									className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+									className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] })]
 							}),
 							/* @__PURE__ */ N("div", {
 								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
 								children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-									className: "block text-sm font-medium text-foreground mb-1.5",
+									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: "Email Address *"
 								}), /* @__PURE__ */ M("input", {
 									type: "email",
 									value: R.profile.email,
 									onChange: (e) => J("profile", "email", e.target.value),
-									className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+									className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-									className: "block text-sm font-medium text-foreground mb-1.5",
+									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: "Phone Number"
 								}), /* @__PURE__ */ M("input", {
 									type: "tel",
 									value: R.profile.phone,
 									onChange: (e) => J("profile", "phone", e.target.value),
-									className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+									className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] })]
 							}),
 							/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-								className: "block text-sm font-medium text-foreground mb-1.5",
+								className: "block text-sm font-medium text-text-primary mb-1.5",
 								children: "Bio"
 							}), /* @__PURE__ */ M("textarea", {
 								rows: 3,
 								value: R.profile.bio,
 								onChange: (e) => J("profile", "bio", e.target.value),
 								placeholder: "Tell us about yourself...",
-								className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+								className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 							})] }),
 							/* @__PURE__ */ N("div", {
 								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
 								children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-									className: "block text-sm font-medium text-foreground mb-1.5",
+									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: "Date of Birth"
 								}), /* @__PURE__ */ M("input", {
 									type: "date",
 									value: R.profile.dateOfBirth,
 									onChange: (e) => J("profile", "dateOfBirth", e.target.value),
-									className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+									className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-									className: "block text-sm font-medium text-foreground mb-1.5",
+									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: "Gender"
 								}), /* @__PURE__ */ N("select", {
 									value: R.profile.gender,
 									onChange: (e) => J("profile", "gender", e.target.value),
-									className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+									className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 									children: [
 										/* @__PURE__ */ M("option", {
 											value: "",
@@ -373,22 +373,22 @@ function L() {
 						className: "space-y-6",
 						children: [
 							/* @__PURE__ */ M("h3", {
-								className: "text-base font-semibold text-foreground",
+								className: "text-base font-semibold text-text-primary",
 								children: "App Preferences"
 							}),
 							/* @__PURE__ */ N("div", {
 								className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 								children: [
 									/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: /* @__PURE__ */ N("span", {
 											className: "flex items-center gap-1.5",
-											children: [/* @__PURE__ */ M(m, { className: "h-4 w-4 text-muted-foreground" }), " Language"]
+											children: [/* @__PURE__ */ M(m, { className: "h-4 w-4 text-text-secondary" }), " Language"]
 										})
 									}), /* @__PURE__ */ N("select", {
 										value: R.preferences.language,
 										onChange: (e) => J("preferences", "language", e.target.value),
-										className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+										className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 										children: [
 											/* @__PURE__ */ M("option", {
 												value: "en",
@@ -417,12 +417,12 @@ function L() {
 										]
 									})] }),
 									/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: "Timezone"
 									}), /* @__PURE__ */ N("select", {
 										value: R.preferences.timezone,
 										onChange: (e) => J("preferences", "timezone", e.target.value),
-										className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+										className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 										children: [
 											/* @__PURE__ */ M("option", {
 												value: "Asia/Kolkata",
@@ -443,12 +443,12 @@ function L() {
 										]
 									})] }),
 									/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: "Currency"
 									}), /* @__PURE__ */ N("select", {
 										value: R.preferences.currency,
 										onChange: (e) => J("preferences", "currency", e.target.value),
-										className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+										className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 										children: [
 											/* @__PURE__ */ M("option", {
 												value: "INR",
@@ -471,7 +471,7 @@ function L() {
 								]
 							}),
 							/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-								className: "block text-sm font-medium text-foreground mb-3",
+								className: "block text-sm font-medium text-text-primary mb-3",
 								children: "Theme"
 							}), /* @__PURE__ */ M("div", {
 								className: "flex gap-3 flex-wrap",
@@ -492,7 +492,7 @@ function L() {
 										Icon: b
 									}
 								].map(({ value: e, label: n, Icon: r }) => /* @__PURE__ */ N("label", {
-									className: t("flex items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium cursor-pointer transition-colors", R.preferences.theme === e ? "border-primary bg-primary/10 text-foreground" : "border-border text-muted-foreground hover:border-accent-foreground/20 hover:text-foreground"),
+									className: t("flex items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium cursor-pointer transition-colors", R.preferences.theme === e ? "border-primary bg-action-primary-bg/10 text-text-primary" : "border-border-subtle text-text-secondary hover:border-accent-foreground/20 hover:text-text-primary"),
 									children: [
 										/* @__PURE__ */ M("input", {
 											type: "radio",
@@ -509,8 +509,8 @@ function L() {
 							})] }),
 							/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
 								className: "flex items-center gap-2 mb-4",
-								children: [/* @__PURE__ */ M(c, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ M("h4", {
-									className: "text-sm font-semibold text-foreground",
+								children: [/* @__PURE__ */ M(c, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ M("h4", {
+									className: "text-sm font-semibold text-text-primary",
 									children: "Notification Preferences"
 								})]
 							}), /* @__PURE__ */ M("div", {
@@ -545,9 +545,9 @@ function L() {
 										label: "Security alerts"
 									}
 								].map((e) => /* @__PURE__ */ N("div", {
-									className: "flex items-center justify-between rounded-lg border border-border p-3",
+									className: "flex items-center justify-between rounded-lg border border-border-subtle p-3",
 									children: [/* @__PURE__ */ M("span", {
-										className: "text-sm text-foreground",
+										className: "text-sm text-text-primary",
 										children: e.label
 									}), /* @__PURE__ */ M(I, {
 										checked: R.preferences.notifications[e.key],
@@ -562,31 +562,31 @@ function L() {
 						className: "space-y-6",
 						children: [
 							/* @__PURE__ */ M("h3", {
-								className: "text-base font-semibold text-foreground",
+								className: "text-base font-semibold text-text-primary",
 								children: "Security Settings"
 							}),
 							/* @__PURE__ */ N("div", {
-								className: "flex items-start gap-3 rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-4",
-								children: [/* @__PURE__ */ M(s, { className: "h-5 w-5 text-yellow-600 dark:text-yellow-400 shrink-0 mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-									className: "text-sm font-medium text-foreground",
+								className: "flex items-start gap-3 rounded-lg border border-status-warning-border/30 bg-status-warning-bg-subtle/5 p-4",
+								children: [/* @__PURE__ */ M(s, { className: "h-5 w-5 text-status-warning-text shrink-0 mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-sm font-medium text-text-primary",
 									children: "Account Security"
 								}), /* @__PURE__ */ M("p", {
-									className: "text-xs text-muted-foreground",
+									className: "text-xs text-text-secondary",
 									children: "Keep your account secure by enabling two-factor authentication and monitoring login activity."
 								})] })]
 							}),
 							/* @__PURE__ */ N("div", {
-								className: "flex items-center justify-between rounded-lg border border-border p-4",
+								className: "flex items-center justify-between rounded-lg border border-border-subtle p-4",
 								children: [/* @__PURE__ */ N("div", {
 									className: "flex-1",
 									children: [/* @__PURE__ */ N("div", {
 										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ M(_, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ M("p", {
-											className: "text-sm font-medium text-foreground",
+										children: [/* @__PURE__ */ M(_, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ M("p", {
+											className: "text-sm font-medium text-text-primary",
 											children: "Two-Factor Authentication"
 										})]
 									}), /* @__PURE__ */ M("p", {
-										className: "text-xs text-muted-foreground mt-0.5 ml-6",
+										className: "text-xs text-text-secondary mt-0.5 ml-6",
 										children: "Add an extra layer of security to your account"
 									})]
 								}), /* @__PURE__ */ M(I, {
@@ -596,14 +596,14 @@ function L() {
 								})]
 							}),
 							/* @__PURE__ */ N("div", {
-								className: "flex items-center justify-between rounded-lg border border-border p-4",
+								className: "flex items-center justify-between rounded-lg border border-border-subtle p-4",
 								children: [/* @__PURE__ */ N("div", {
 									className: "flex-1",
 									children: [/* @__PURE__ */ M("p", {
-										className: "text-sm font-medium text-foreground",
+										className: "text-sm font-medium text-text-primary",
 										children: "Login Alerts"
 									}), /* @__PURE__ */ M("p", {
-										className: "text-xs text-muted-foreground mt-0.5",
+										className: "text-xs text-text-secondary mt-0.5",
 										children: "Get notified when someone logs into your account"
 									})]
 								}), /* @__PURE__ */ M(I, {
@@ -613,20 +613,20 @@ function L() {
 								})]
 							}),
 							/* @__PURE__ */ N("div", {
-								className: "flex items-center justify-between rounded-lg border border-border p-4",
+								className: "flex items-center justify-between rounded-lg border border-border-subtle p-4",
 								children: [/* @__PURE__ */ N("div", {
 									className: "flex-1",
 									children: [/* @__PURE__ */ M("p", {
-										className: "text-sm font-medium text-foreground",
+										className: "text-sm font-medium text-text-primary",
 										children: "Session Timeout"
 									}), /* @__PURE__ */ M("p", {
-										className: "text-xs text-muted-foreground mt-0.5",
+										className: "text-xs text-text-secondary mt-0.5",
 										children: "Auto-logout after inactivity"
 									})]
 								}), /* @__PURE__ */ N("select", {
 									value: R.security.sessionTimeout,
 									onChange: (e) => J("security", "sessionTimeout", e.target.value),
-									className: "rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring w-36",
+									className: "rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] w-36",
 									children: [
 										/* @__PURE__ */ M("option", {
 											value: "15",
@@ -652,25 +652,25 @@ function L() {
 								})]
 							}),
 							/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("h4", {
-								className: "text-sm font-semibold text-foreground mb-3",
+								className: "text-sm font-semibold text-text-primary mb-3",
 								children: "Trusted Devices"
 							}), /* @__PURE__ */ M("div", {
 								className: "space-y-3",
 								children: R.security.trustedDevices.map((e) => /* @__PURE__ */ N("div", {
-									className: "flex items-center justify-between rounded-lg border border-border p-4",
+									className: "flex items-center justify-between rounded-lg border border-border-subtle p-4",
 									children: [/* @__PURE__ */ N("div", {
 										className: "flex items-center gap-3",
-										children: [e.os.toLowerCase().includes("mac") || e.os.toLowerCase().includes("windows") ? /* @__PURE__ */ M(h, { className: "h-5 w-5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ M(D, { className: "h-5 w-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
+										children: [e.os.toLowerCase().includes("mac") || e.os.toLowerCase().includes("windows") ? /* @__PURE__ */ M(h, { className: "h-5 w-5 text-text-secondary shrink-0" }) : /* @__PURE__ */ M(D, { className: "h-5 w-5 text-text-secondary shrink-0" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
 											className: "flex items-center gap-2",
 											children: [/* @__PURE__ */ M("p", {
-												className: "text-sm font-medium text-foreground",
+												className: "text-sm font-medium text-text-primary",
 												children: e.name
 											}), e.isCurrent && /* @__PURE__ */ M("span", {
-												className: "inline-flex items-center rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-600 dark:text-green-400",
+												className: "inline-flex items-center rounded-full bg-status-success-bg-subtle/20 px-2 py-0.5 text-xs font-medium text-status-success-text",
 												children: "Current"
 											})]
 										}), /* @__PURE__ */ N("p", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: [
 												e.browser,
 												" · ",
@@ -680,7 +680,7 @@ function L() {
 									}), !e.isCurrent && /* @__PURE__ */ M("button", {
 										type: "button",
 										onClick: () => Q(e.id),
-										className: "rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-destructive hover:bg-destructive/10 transition-colors",
+										className: "rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 transition-colors",
 										children: "Remove"
 									})]
 								}, e.id))
@@ -690,12 +690,12 @@ function L() {
 								children: [/* @__PURE__ */ N("button", {
 									type: "button",
 									onClick: () => alert("Password change functionality coming soon"),
-									className: "flex items-center gap-1.5 rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+									className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 									children: [/* @__PURE__ */ M(_, { className: "h-4 w-4" }), "Change Password"]
 								}), /* @__PURE__ */ N("button", {
 									type: "button",
 									onClick: $,
-									className: "flex items-center gap-1.5 rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+									className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 									children: [/* @__PURE__ */ M(v, { className: "h-4 w-4" }), "Logout All Devices"]
 								})]
 							})
@@ -705,19 +705,19 @@ function L() {
 						className: "space-y-6",
 						children: [
 							/* @__PURE__ */ M("h3", {
-								className: "text-base font-semibold text-foreground",
+								className: "text-base font-semibold text-text-primary",
 								children: "Privacy Controls"
 							}),
 							/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-								className: "block text-sm font-medium text-foreground mb-1.5",
+								className: "block text-sm font-medium text-text-primary mb-1.5",
 								children: /* @__PURE__ */ N("span", {
 									className: "flex items-center gap-1.5",
-									children: [/* @__PURE__ */ M(p, { className: "h-4 w-4 text-muted-foreground" }), " Profile Visibility"]
+									children: [/* @__PURE__ */ M(p, { className: "h-4 w-4 text-text-secondary" }), " Profile Visibility"]
 								})
 							}), /* @__PURE__ */ N("select", {
 								value: R.privacy.profileVisibility,
 								onChange: (e) => J("privacy", "profileVisibility", e.target.value),
-								className: "w-full max-w-sm rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+								className: "w-full max-w-sm rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 								children: [
 									/* @__PURE__ */ M("option", {
 										value: "public",
@@ -734,7 +734,7 @@ function L() {
 								]
 							})] }),
 							/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("h4", {
-								className: "text-sm font-semibold text-foreground mb-3",
+								className: "text-sm font-semibold text-text-primary mb-3",
 								children: "Data Sharing"
 							}), /* @__PURE__ */ M("div", {
 								className: "space-y-3",
@@ -752,9 +752,9 @@ function L() {
 										label: "Share data with third-party partners"
 									}
 								].map((e) => /* @__PURE__ */ N("div", {
-									className: "flex items-center justify-between rounded-lg border border-border p-3",
+									className: "flex items-center justify-between rounded-lg border border-border-subtle p-3",
 									children: [/* @__PURE__ */ M("span", {
-										className: "text-sm text-foreground",
+										className: "text-sm text-text-primary",
 										children: e.label
 									}), /* @__PURE__ */ M(I, {
 										checked: R.privacy.dataSharing[e.key],
@@ -766,12 +766,12 @@ function L() {
 							/* @__PURE__ */ N("div", {
 								className: "space-y-3",
 								children: [/* @__PURE__ */ N("div", {
-									className: "flex items-center justify-between rounded-lg border border-border p-4",
+									className: "flex items-center justify-between rounded-lg border border-border-subtle p-4",
 									children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-										className: "text-sm font-medium text-foreground",
+										className: "text-sm font-medium text-text-primary",
 										children: "Location Tracking"
 									}), /* @__PURE__ */ M("p", {
-										className: "text-xs text-muted-foreground",
+										className: "text-xs text-text-secondary",
 										children: "Allow app to track your location for better service"
 									})] }), /* @__PURE__ */ M(I, {
 										checked: R.privacy.locationTracking,
@@ -779,12 +779,12 @@ function L() {
 										label: "Location tracking"
 									})]
 								}), /* @__PURE__ */ N("div", {
-									className: "flex items-center justify-between rounded-lg border border-border p-4",
+									className: "flex items-center justify-between rounded-lg border border-border-subtle p-4",
 									children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-										className: "text-sm font-medium text-foreground",
+										className: "text-sm font-medium text-text-primary",
 										children: "Activity History"
 									}), /* @__PURE__ */ M("p", {
-										className: "text-xs text-muted-foreground",
+										className: "text-xs text-text-secondary",
 										children: "Keep track of your orders and activities"
 									})] }), /* @__PURE__ */ M(I, {
 										checked: R.privacy.activityHistory,
@@ -794,22 +794,22 @@ function L() {
 								})]
 							}),
 							/* @__PURE__ */ M("div", {
-								className: "rounded-lg border border-red-500/30 bg-red-500/5 p-4",
+								className: "rounded-lg border border-status-error-border/30 bg-status-error-bg-subtle/5 p-4",
 								children: /* @__PURE__ */ N("div", {
 									className: "flex items-start gap-3",
-									children: [/* @__PURE__ */ M(k, { className: "h-5 w-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5" }), /* @__PURE__ */ N("div", { children: [
+									children: [/* @__PURE__ */ M(k, { className: "h-5 w-5 text-status-error-text shrink-0 mt-0.5" }), /* @__PURE__ */ N("div", { children: [
 										/* @__PURE__ */ M("p", {
-											className: "text-sm font-medium text-foreground",
+											className: "text-sm font-medium text-text-primary",
 											children: "Delete Account"
 										}),
 										/* @__PURE__ */ M("p", {
-											className: "text-xs text-muted-foreground mt-0.5",
+											className: "text-xs text-text-secondary mt-0.5",
 											children: "Permanently delete your account and all associated data. This action cannot be undone."
 										}),
 										/* @__PURE__ */ M("button", {
 											type: "button",
 											onClick: ee,
-											className: "mt-3 rounded-lg border border-red-500/30 px-4 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors",
+											className: "mt-3 rounded-lg border border-status-error-border/30 px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg/10 transition-colors",
 											children: "Delete Account"
 										})
 									] })]
@@ -821,21 +821,21 @@ function L() {
 						className: "space-y-6",
 						children: [
 							/* @__PURE__ */ M("h3", {
-								className: "text-base font-semibold text-foreground",
+								className: "text-base font-semibold text-text-primary",
 								children: "Billing & Payments"
 							}),
 							/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("h4", {
-								className: "text-sm font-semibold text-foreground mb-3",
+								className: "text-sm font-semibold text-text-primary mb-3",
 								children: /* @__PURE__ */ N("span", {
 									className: "flex items-center gap-1.5",
-									children: [/* @__PURE__ */ M(f, { className: "h-4 w-4 text-muted-foreground" }), " Default Payment Method"]
+									children: [/* @__PURE__ */ M(f, { className: "h-4 w-4 text-text-secondary" }), " Default Payment Method"]
 								})
 							}), R.billing.paymentMethod ? /* @__PURE__ */ N("div", {
-								className: "flex items-center justify-between rounded-lg border border-border p-4",
+								className: "flex items-center justify-between rounded-lg border border-border-subtle p-4",
 								children: [/* @__PURE__ */ N("div", {
 									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ M(f, { className: "h-6 w-6 text-muted-foreground" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("p", {
-										className: "text-sm font-medium text-foreground",
+									children: [/* @__PURE__ */ M(f, { className: "h-6 w-6 text-text-secondary" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("p", {
+										className: "text-sm font-medium text-text-primary",
 										children: [
 											R.billing.paymentMethod.provider,
 											" ending in",
@@ -843,39 +843,39 @@ function L() {
 											R.billing.paymentMethod.last4
 										]
 									}), /* @__PURE__ */ M("p", {
-										className: "text-xs text-muted-foreground capitalize",
+										className: "text-xs text-text-secondary capitalize",
 										children: R.billing.paymentMethod.type
 									})] })]
 								}), /* @__PURE__ */ M("button", {
 									type: "button",
 									onClick: () => alert("Change payment method coming soon"),
-									className: "rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+									className: "rounded-lg border border-border-subtle px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 									children: "Change"
 								})]
 							}) : /* @__PURE__ */ N("div", {
-								className: "rounded-lg border border-border p-4 text-center",
+								className: "rounded-lg border border-border-subtle p-4 text-center",
 								children: [/* @__PURE__ */ M("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "No default payment method set"
 								}), /* @__PURE__ */ M("button", {
 									type: "button",
 									onClick: () => alert("Add payment method coming soon"),
-									className: "mt-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+									className: "mt-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 									children: "Add Payment Method"
 								})]
 							})] }),
 							/* @__PURE__ */ N("div", { children: [
 								/* @__PURE__ */ M("h4", {
-									className: "text-sm font-semibold text-foreground mb-3",
+									className: "text-sm font-semibold text-text-primary mb-3",
 									children: "Auto Recharge"
 								}),
 								/* @__PURE__ */ N("div", {
-									className: "flex items-center justify-between rounded-lg border border-border p-4 mb-3",
+									className: "flex items-center justify-between rounded-lg border border-border-subtle p-4 mb-3",
 									children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-										className: "text-sm font-medium text-foreground",
+										className: "text-sm font-medium text-text-primary",
 										children: "Enable Auto Recharge"
 									}), /* @__PURE__ */ M("p", {
-										className: "text-xs text-muted-foreground",
+										className: "text-xs text-text-secondary",
 										children: "Automatically add money when wallet balance is low"
 									})] }), /* @__PURE__ */ M(I, {
 										checked: R.billing.autoRecharge,
@@ -884,70 +884,70 @@ function L() {
 									})]
 								}),
 								R.billing.autoRecharge && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-									className: "block text-sm font-medium text-foreground mb-1.5",
+									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: "Auto Recharge Amount (₹)"
 								}), /* @__PURE__ */ M("input", {
 									type: "number",
 									value: R.billing.autoRechargeAmount,
 									onChange: (e) => J("billing", "autoRechargeAmount", e.target.value),
 									placeholder: "1000",
-									className: "w-full max-w-xs rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+									className: "w-full max-w-xs rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] })
 							] }),
 							/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-								className: "block text-sm font-medium text-foreground mb-1.5",
+								className: "block text-sm font-medium text-text-primary mb-1.5",
 								children: /* @__PURE__ */ N("span", {
 									className: "flex items-center gap-1.5",
-									children: [/* @__PURE__ */ M(S, { className: "h-4 w-4 text-muted-foreground" }), " Invoice Email"]
+									children: [/* @__PURE__ */ M(S, { className: "h-4 w-4 text-text-secondary" }), " Invoice Email"]
 								})
 							}), /* @__PURE__ */ M("input", {
 								type: "email",
 								value: R.billing.invoiceEmail,
 								onChange: (e) => J("billing", "invoiceEmail", e.target.value),
 								placeholder: "billing@example.com",
-								className: "w-full max-w-sm rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+								className: "w-full max-w-sm rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 							})] }),
 							/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("h4", {
-								className: "text-sm font-semibold text-foreground mb-3",
+								className: "text-sm font-semibold text-text-primary mb-3",
 								children: /* @__PURE__ */ N("span", {
 									className: "flex items-center gap-1.5",
-									children: [/* @__PURE__ */ M(l, { className: "h-4 w-4 text-muted-foreground" }), " Tax Information"]
+									children: [/* @__PURE__ */ M(l, { className: "h-4 w-4 text-text-secondary" }), " Tax Information"]
 								})
 							}), /* @__PURE__ */ N("div", {
 								className: "space-y-4",
 								children: [
 									/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: "GST Number"
 									}), /* @__PURE__ */ M("input", {
 										type: "text",
 										value: R.billing.gstNumber,
 										onChange: (e) => J("billing", "gstNumber", e.target.value),
 										placeholder: "29ABCDE1234F1Z5",
-										className: "w-full max-w-sm rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+										className: "w-full max-w-sm rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 									})] }),
 									/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: "Company Name"
 									}), /* @__PURE__ */ M("input", {
 										type: "text",
 										value: R.billing.companyName,
 										onChange: (e) => J("billing", "companyName", e.target.value),
 										placeholder: "Your Company Name",
-										className: "w-full max-w-sm rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+										className: "w-full max-w-sm rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 									})] }),
 									/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: /* @__PURE__ */ N("span", {
 											className: "flex items-center gap-1.5",
-											children: [/* @__PURE__ */ M(y, { className: "h-4 w-4 text-muted-foreground" }), " Billing Address"]
+											children: [/* @__PURE__ */ M(y, { className: "h-4 w-4 text-text-secondary" }), " Billing Address"]
 										})
 									}), /* @__PURE__ */ M("textarea", {
 										rows: 3,
 										value: R.billing.billingAddress,
 										onChange: (e) => J("billing", "billingAddress", e.target.value),
 										placeholder: "Enter your complete billing address",
-										className: "w-full rounded-lg border border-border bg-card py-2 px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+										className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 px-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 									})] })
 								]
 							})] })