@fluid-app/portal-sdk 0.1.526 → 0.1.527

package/dist/{MessagingScreen-DwU7sqzj.mjs → MessagingScreen-CNCV4tG2.mjs}

@@ -4352,7 +4352,7 @@ function ProfilePhoto({ conversation, user, size, className, onClick, showStatus
 	const recipientStatus = conversation.recipients?.find((r) => r.id === user.id)?.status;
 	const resolvedStatus = directStatus || recipientStatus;
 	const showDot = showStatusDot && size !== "xxl" && (resolvedStatus === "online" || resolvedStatus === "away");
-	const imageClassName = clsx$1("origin-top-left rounded-full border border-gray-50 object-cover", size === "xxl" && "h-[120px] w-[120px]", size === "xl" && "size-12", size === "lg" && "size-8", size === "md" && "size-6", size === "sm" && "size-5", size === "xs" && "size-4");
+	const imageClassName = clsx$1("origin-top-left rounded-full border border-[color:var(--messaging-border,var(--color-gray-50))] object-cover", size === "xxl" && "h-[120px] w-[120px]", size === "xl" && "size-12", size === "lg" && "size-8", size === "md" && "size-6", size === "sm" && "size-5", size === "xs" && "size-4");
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative shrink-0 select-none", onClick && "cursor-pointer", className),
 		onClick,
@@ -4371,10 +4371,10 @@ function ProfilePhoto({ conversation, user, size, className, onClick, showStatus
 			height: 120,
 			className: imageClassName
 		}) : /* @__PURE__ */ jsx("div", {
-			className: clsx$1("grid origin-top-left place-items-center rounded-full border border-white bg-blue-800 font-medium tracking-tighter text-white uppercase", size === "xxl" && "text-messaging-1 h-[120px] w-[120px] text-4xl", size === "xl" && "text-messaging-1 size-12", size === "lg" && "text-messaging-4 size-8", size === "md" && "text-messaging-6 size-6", size === "sm" && "text-messaging-7 size-5", size === "xs" && "text-messaging-7 size-4"),
+			className: clsx$1("grid origin-top-left place-items-center rounded-full border border-[color:var(--messaging-border,var(--color-white))] bg-[color:var(--messaging-primary,var(--color-blue-800))] font-medium tracking-tighter text-[color:var(--messaging-primary-foreground,var(--color-white))] uppercase", size === "xxl" && "text-messaging-1 h-[120px] w-[120px] text-4xl", size === "xl" && "text-messaging-1 size-12", size === "lg" && "text-messaging-4 size-8", size === "md" && "text-messaging-6 size-6", size === "sm" && "text-messaging-7 size-5", size === "xs" && "text-messaging-7 size-4"),
 			style: { background: `linear-gradient(135deg, hsl(from ${baseColor} h 100 80) 0%, hsl(from ${baseColor} calc(h + 45) 90 50) 100%)` },
 			children: initials
-		}), showDot && /* @__PURE__ */ jsx("div", { className: cn("absolute right-0 bottom-0 size-2 rounded-full border border-white", resolvedStatus === "online" && "bg-green-400", resolvedStatus === "away" && "bg-yellow-400", size === "xl" && "size-4", size === "lg" && "size-3", size === "xs" && "size-3") })]
+		}), showDot && /* @__PURE__ */ jsx("div", { className: cn("absolute right-0 bottom-0 size-2 rounded-full border border-[color:var(--messaging-border,var(--color-white))]", resolvedStatus === "online" && "bg-green-400", resolvedStatus === "away" && "bg-yellow-400", size === "xl" && "size-4", size === "lg" && "size-3", size === "xs" && "size-3") })]
 	});
 }
 //#endregion
@@ -4391,7 +4391,7 @@ function GroupAvatars({ conversation, currentUserId, groupSize = GROUP_MAX, rend
 			size: "md",
 			renderImage
 		}, recipient.id)), users.length > displaySize && /* @__PURE__ */ jsxs("div", {
-			className: "text-messaging-7 messaging-gradient z-10 flex size-6 items-center justify-center rounded-full border border-gray-200 bg-gray-200 text-white",
+			className: "text-messaging-7 messaging-gradient z-10 flex size-6 items-center justify-center rounded-full border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-200))] text-white",
 			children: ["+", users.length - displaySize]
 		})]
 	});
@@ -4435,13 +4435,13 @@ function MessagesHeaderActions({ conversation, currentUser, navigation, renderIm
 			renderImage
 		}),
 		/* @__PURE__ */ jsxs("div", {
-			className: clsx$1("flex size-6 items-center justify-center rounded-sm border empty:hidden", messageType === "public-channel" && "border-blue-200 bg-blue-50", messageType === "sms" && "border-green-200 bg-green-50", messageType === "email" && "border-pink-200 bg-pink-50", messageType === "private-channel" && "border-purple-200 bg-purple-50", messageType === "broadcast" && "border-gray-200 bg-gray-50"),
+			className: clsx$1("flex size-6 items-center justify-center rounded-sm border empty:hidden", messageType === "public-channel" && "border-[color:var(--messaging-primary-border,var(--color-blue-200))] bg-[color:var(--messaging-primary-tint,var(--color-blue-50))]", messageType === "sms" && "border-green-200 bg-green-50", messageType === "email" && "border-pink-200 bg-pink-50", messageType === "private-channel" && "border-purple-200 bg-purple-50", messageType === "broadcast" && "border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))]"),
 			children: [
-				messageType === "public-channel" && /* @__PURE__ */ jsx(Eye, { className: "size-3 text-blue-700" }),
+				messageType === "public-channel" && /* @__PURE__ */ jsx(Eye, { className: "size-3 text-[color:var(--messaging-primary,var(--color-blue-700))]" }),
 				messageType === "sms" && /* @__PURE__ */ jsx(Phone, { className: "size-3 text-green-700" }),
 				messageType === "email" && /* @__PURE__ */ jsx(Mail, { className: "size-3 text-pink-600" }),
 				messageType === "private-channel" && /* @__PURE__ */ jsx(Lock, { className: "size-2.5 text-purple-700" }),
-				messageType === "broadcast" && /* @__PURE__ */ jsx(Megaphone, { className: "size-3 text-gray-700" })
+				messageType === "broadcast" && /* @__PURE__ */ jsx(Megaphone, { className: "size-3 text-[color:var(--messaging-foreground,var(--color-gray-700))]" })
 			]
 		}),
 		isMobile ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
@@ -4499,37 +4499,37 @@ function MessagesHeaderActions({ conversation, currentUser, navigation, renderIm
 			align: "end",
 			className: "w-60 p-0",
 			children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
-				className: "border-b border-gray-200 px-4 py-3 text-sm font-semibold text-slate-700",
+				className: "border-b border-[color:var(--messaging-border,var(--color-gray-200))] px-4 py-3 text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 				children: t("header_channel_options")
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "px-0 py-1",
 				children: [
 					/* @__PURE__ */ jsxs(DropdownMenuItem, {
 						disabled: true,
-						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ jsx(User, { className: "size-4 text-gray-500" }), t("header_channel_details")]
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ jsx(User, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("header_channel_details")]
 					}),
 					/* @__PURE__ */ jsxs(DropdownMenuItem, {
 						disabled: true,
-						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ jsx(Settings, { className: "size-4 text-gray-500" }), t("header_channel_settings")]
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ jsx(Settings, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("header_channel_settings")]
 					}),
 					/* @__PURE__ */ jsxs(DropdownMenuItem, {
 						disabled: true,
-						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ jsx(BellOff, { className: "size-4 text-gray-500" }), t("header_mute_channel")]
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ jsx(BellOff, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("header_mute_channel")]
 					}),
 					/* @__PURE__ */ jsxs(DropdownMenuItem, {
 						onSelect: () => navigation.navigate({
 							view: "pins",
 							conversationId
 						}),
-						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 						children: [
-							/* @__PURE__ */ jsx(Pin, { className: "size-4 text-gray-500" }),
+							/* @__PURE__ */ jsx(Pin, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }),
 							t("header_pinned_messages"),
 							(conversation.pinned_messages_count ?? 0) > 0 && /* @__PURE__ */ jsx("span", {
-								className: "ml-auto text-xs text-gray-500",
+								className: "ml-auto text-xs text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 								children: conversation.pinned_messages_count ?? 0
 							})
 						]
@@ -4645,7 +4645,7 @@ function MessagingLayoutSidebarFooter({ showAdminFeatures, renderNewChannelSideb
 		className: clsx$1("sticky bottom-0 mt-auto md:-mx-4", !showAdminFeatures && "max-md:hidden"),
 		ref: menuRef,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx$1("absolute bottom-full left-0 -z-10 grid w-full gap-2 border-t border-gray-200 bg-white p-4 text-sm font-medium text-gray-700 transition-transform", createChatOpen ? "" : "hidden"),
+			className: clsx$1("absolute bottom-full left-0 -z-10 grid w-full gap-2 border-t border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-4 text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] transition-transform", createChatOpen ? "" : "hidden"),
 			inert: !createChatOpen,
 			"aria-hidden": !createChatOpen,
 			children: [/* @__PURE__ */ jsxs("button", {
@@ -4653,21 +4653,21 @@ function MessagingLayoutSidebarFooter({ showAdminFeatures, renderNewChannelSideb
 					setCreateChatOpen(false);
 					navigation.navigate({ view: "new" });
 				},
-				className: "flex items-center justify-between rounded-md p-2 hover:bg-gray-50 active:bg-gray-100",
+				className: "flex items-center justify-between rounded-md p-2 hover:bg-[color:var(--messaging-muted,var(--color-gray-50))] active:bg-[color:var(--messaging-muted,var(--color-gray-100))]",
 				children: [t("sidebar_new_message"), /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })]
 			}), showAdminFeatures && renderNewChannelSidebar?.({
 				trigger: /* @__PURE__ */ jsxs("button", {
 					onClick: () => setCreateChatOpen(false),
-					className: "flex items-center justify-between rounded-md p-2 hover:bg-gray-50 active:bg-gray-100",
+					className: "flex items-center justify-between rounded-md p-2 hover:bg-[color:var(--messaging-muted,var(--color-gray-50))] active:bg-[color:var(--messaging-muted,var(--color-gray-100))]",
 					children: [t("sidebar_new_channel"), /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })]
 				}),
 				open: channelSidebarOpen,
 				onOpenChange: setChannelSidebarOpen
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex gap-2 border-t border-t-gray-200 bg-gray-50 p-4",
+			className: "flex gap-2 border-t border-t-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] p-4",
 			children: [showAdminFeatures && (isMobile ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-				className: "size-9 items-center justify-center text-gray-700",
+				className: "size-9 items-center justify-center text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 				onClick: () => setIsNavigationOpen(true),
 				"aria-label": t("header_more_options"),
 				children: /* @__PURE__ */ jsx(Menu, { className: "size-4" })
@@ -4687,7 +4687,7 @@ function MessagingLayoutSidebarFooter({ showAdminFeatures, renderNewChannelSideb
 			})] }) : /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Button, {
-					className: "size-9 items-center justify-center text-gray-700",
+					className: "size-9 items-center justify-center text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 					children: /* @__PURE__ */ jsx(Menu, { className: "size-4" })
 				})
 			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
@@ -4700,18 +4700,18 @@ function MessagingLayoutSidebarFooter({ showAdminFeatures, renderNewChannelSideb
 						onClick: () => {
 							navigation.navigate({ view: "index" });
 						},
-						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ jsx(BookUser, { className: "size-4 text-gray-500" }), t("sidebar_contacts")]
+						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ jsx(BookUser, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("sidebar_contacts")]
 					}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
 						onClick: () => {
 							navigation.navigate({ view: "scheduled" });
 						},
-						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-						children: [/* @__PURE__ */ jsx(CalendarClock, { className: "size-4 text-gray-500" }), t("sidebar_scheduled_messages")]
+						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
+						children: [/* @__PURE__ */ jsx(CalendarClock, { className: "size-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("sidebar_scheduled_messages")]
 					})]
 				})
 			})] })), /* @__PURE__ */ jsxs(Button, {
-				className: "h-9 grow items-center justify-center gap-2 text-gray-900",
+				className: "h-9 grow items-center justify-center gap-2 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 				onClick: () => setCreateChatOpen((p) => !p),
 				children: [createChatOpen ? t("sidebar_new_button_close") : t("sidebar_new_button_open"), createChatOpen ? /* @__PURE__ */ jsx(X, { className: "size-4" }) : /* @__PURE__ */ jsx(SquarePen, { className: "size-4" })]
 			})]
@@ -4787,12 +4787,12 @@ const TooltipWithArrow = ({ title, content, children, className, side, align, si
 			side,
 			align,
 			sideOffset,
-			className: twMerge(`group relative max-w-80 overflow-visible rounded-lg bg-gray-900 px-3 py-2 text-white`, className),
+			className: twMerge(`group relative max-w-80 overflow-visible rounded-lg bg-[color:var(--messaging-muted,var(--color-gray-900))] px-3 py-2 text-white`, className),
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "text-xs font-semibold text-white",
 				children: title
 			}), content && /* @__PURE__ */ jsx("div", {
-				className: "mt-1 text-xs font-medium text-gray-300",
+				className: "mt-1 text-xs font-medium text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]",
 				children: content
 			})]
 		})]
@@ -4837,7 +4837,7 @@ function SidebarGroup({ children, label, icon, loadState, description }) {
 			children: /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: () => loadState.load(),
-				className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-2.5 py-0.5 text-[10px] font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+				className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-2.5 py-0.5 text-[10px] font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 				children: t("sidebar_load_more")
 			})
 		}, "load-more")
@@ -4861,8 +4861,8 @@ function SidebarGroup({ children, label, icon, loadState, description }) {
 					className: "group/summary text-muted-foreground hover:bg-accent mx-3 mb-1 flex min-h-10 touch-manipulation items-center gap-2 rounded-lg px-1 text-xs font-semibold tracking-wide uppercase group-last/details:mb-0 group-open/details:mb-1 md:mx-0 md:min-h-0 md:tracking-normal md:normal-case",
 					children: [
 						/* @__PURE__ */ jsxs("div", {
-							className: "group/icon grid size-5 place-items-center rounded-sm hover:bg-gray-300",
-							children: [/* @__PURE__ */ jsx(Icon, { className: "col-start-1 row-start-1 size-3.5 text-gray-500 transition-opacity group-hover/summary:opacity-0" }), /* @__PURE__ */ jsx(ChevronDown, { className: "col-start-1 row-start-1 size-3.5 -rotate-90 text-gray-400 opacity-0 transition-all group-open/details:rotate-0 group-hover/icon:text-gray-500 group-hover/summary:opacity-100 group-active/icon:text-gray-600" })]
+							className: "group/icon grid size-5 place-items-center rounded-sm hover:bg-[color:var(--messaging-muted,var(--color-gray-300))]",
+							children: [/* @__PURE__ */ jsx(Icon, { className: "col-start-1 row-start-1 size-3.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] transition-opacity group-hover/summary:opacity-0" }), /* @__PURE__ */ jsx(ChevronDown, { className: "col-start-1 row-start-1 size-3.5 -rotate-90 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] opacity-0 transition-all group-open/details:rotate-0 group-hover/icon:text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] group-hover/summary:opacity-100 group-active/icon:text-[color:var(--messaging-muted-foreground,var(--color-gray-600))]" })]
 						}),
 						label,
 						/* @__PURE__ */ jsx(TooltipWithArrow, {
@@ -4870,7 +4870,7 @@ function SidebarGroup({ children, label, icon, loadState, description }) {
 							content: description,
 							side: "right",
 							sideOffset: 10,
-							children: /* @__PURE__ */ jsx(CircleHelp, { className: "invisible ml-auto size-4 rounded-sm p-1 group-hover/summary:visible hover:bg-gray-300 hover:text-gray-500" })
+							children: /* @__PURE__ */ jsx(CircleHelp, { className: "invisible ml-auto size-4 rounded-sm p-1 group-hover/summary:visible hover:bg-[color:var(--messaging-muted,var(--color-gray-300))] hover:text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" })
 						})
 					]
 				}),
@@ -4880,7 +4880,7 @@ function SidebarGroup({ children, label, icon, loadState, description }) {
 					role: "region",
 					"aria-label": `View all ${label} conversations`,
 					children: [/* @__PURE__ */ jsxs("summary", {
-						className: "list-none p-1 text-xs font-medium text-gray-500 hover:text-gray-700",
+						className: "list-none p-1 text-xs font-medium text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] hover:text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "group-open/nested:hidden",
 							children: t("sidebar_show_all")
@@ -5343,7 +5343,7 @@ function MessagingLayout({ children, topBar, renderLockedDownlineItem, renderNew
 						children: initialLoadInProgress ? /* @__PURE__ */ jsx(MessagingLoadingSkeleton, { label: t("loading_messaging") }) : userWithoutChannels ? /* @__PURE__ */ jsx("div", {
 							className: "flex h-full min-h-[30vh] w-full items-center justify-center",
 							children: /* @__PURE__ */ jsx("p", {
-								className: "text-gray-500",
+								className: "text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 								children: t("no_conversations")
 							})
 						}) : /* @__PURE__ */ jsx(ScrollerContext.Provider, {
@@ -5366,7 +5366,7 @@ function ChannelHeader({ conversation, renderImage, onToast }) {
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col items-center gap-2",
 			children: [currentEmoji ? /* @__PURE__ */ jsx("div", {
-				className: "grid size-12 place-items-center rounded-sm bg-gray-100 text-2xl",
+				className: "grid size-12 place-items-center rounded-sm bg-[color:var(--messaging-muted,var(--color-gray-100))] text-2xl",
 				children: currentEmoji
 			}) : conversation.image_url ? renderImage({
 				src: conversation.image_url,
@@ -5380,7 +5380,7 @@ function ChannelHeader({ conversation, renderImage, onToast }) {
 					className: "text-xl font-medium",
 					children: ["#", formatMessageChannelName(nameWithoutEmojiText)]
 				}), conversation.description && /* @__PURE__ */ jsx("p", {
-					className: "text-xs text-gray-900",
+					className: "text-xs text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: conversation.description
 				})]
 			})]
@@ -5433,13 +5433,13 @@ function DirectMessageHeader({ conversation, renderImage, renderUserProfile }) {
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "text-center",
 				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-medium text-gray-900",
+					className: "text-xl font-medium text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: conversation.type === "GroupConversation" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: groupName.displayName }), /* @__PURE__ */ jsxs("span", {
-						className: "text-gray-500",
+						className: "text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 						children: [" ", groupName.remainder]
 					})] }) : conversation.name
 				}), /* @__PURE__ */ jsx("p", {
-					className: "text-xs text-gray-500",
+					className: "text-xs text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: conversation.type === "SmsConversation" ? t("header_sms_message") : conversation.type === "EmailConversation" ? t("header_email_message") : conversation.type === "GroupConversation" ? t("header_group_message") : conversation.type === "DownlineConversation" ? t("header_downline_message") : t("header_direct_message")
 				})]
 			})]
@@ -5498,18 +5498,18 @@ function DatePickerDialog({ open, onOpenChange, onApply }) {
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							"aria-label": t("date_picker_previous_month"),
-							className: "size-8 rounded-md hover:bg-gray-100 active:bg-gray-200",
+							className: "size-8 rounded-md hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 							onClick: () => setCurrentMonth((m) => subMonths(m, 1)),
 							children: /* @__PURE__ */ jsx(ChevronLeft, {})
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: "text-base font-semibold text-gray-700",
+							className: "text-base font-semibold text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 							children: format$1(currentMonth, "MMMM yyyy")
 						}),
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							"aria-label": t("date_picker_next_month"),
-							className: "size-8 rounded-md hover:bg-gray-100 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-30",
+							className: "size-8 rounded-md hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))] disabled:cursor-not-allowed disabled:opacity-30",
 							onClick: () => setCurrentMonth((m) => addMonths(m, 1)),
 							disabled: !canGoNext,
 							children: /* @__PURE__ */ jsx(ChevronRight, {})
@@ -5528,7 +5528,7 @@ function DatePickerDialog({ open, onOpenChange, onApply }) {
 							setCurrentMonth(new Date(value));
 						},
 						max: format$1(now, "yyyy-MM-dd"),
-						className: clsx$1("hide-date-picker border border-gray-300")
+						className: clsx$1("hide-date-picker border border-[color:var(--messaging-border,var(--color-gray-300))]")
 					}), /* @__PURE__ */ jsx(Button, {
 						type: "button",
 						onClick: () => {
@@ -5556,16 +5556,16 @@ function DatePickerDialog({ open, onOpenChange, onApply }) {
 						caption: clsx$1("hidden"),
 						head_cell: clsx$1("flex size-10 items-center justify-center text-sm font-medium"),
 						cell: clsx$1("flex size-10 items-center justify-center"),
-						day: clsx$1("size-10 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200"),
-						day_selected: clsx$1("bg-blue-600! text-white!"),
-						day_outside: clsx$1("text-gray-500!"),
-						day_disabled: clsx$1("pointer-events-none text-gray-500 opacity-50")
+						day: clsx$1("size-10 rounded-full text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]"),
+						day_selected: clsx$1("bg-[color:var(--messaging-primary,var(--color-blue-600))]! text-[color:var(--messaging-primary-foreground,var(--color-white))]!"),
+						day_outside: clsx$1("text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]!"),
+						day_disabled: clsx$1("pointer-events-none text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] opacity-50")
 					},
 					initialFocus: true
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full items-center gap-3 border-t border-gray-200 pt-4",
+			className: "flex w-full items-center gap-3 border-t border-[color:var(--messaging-border,var(--color-gray-200))] pt-4",
 			children: [/* @__PURE__ */ jsx(Button, {
 				variant: "default",
 				onClick: () => onOpenChange(false),
@@ -5589,11 +5589,11 @@ function UnreadDivider() {
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "absolute inset-0 flex items-center",
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx("div", { className: "h-5 w-full -translate-y-1/2 border-b border-slate-300 bg-white" })
+			children: /* @__PURE__ */ jsx("div", { className: "h-5 w-full -translate-y-1/2 border-b border-[color:var(--messaging-border,var(--color-slate-300))] bg-[color:var(--messaging-background,var(--color-white))]" })
 		}), /* @__PURE__ */ jsx("div", {
 			className: "relative z-10 flex justify-center",
 			children: /* @__PURE__ */ jsx("span", {
-				className: "rounded-2xl border border-indigo-800 bg-white px-2 py-0.5 text-xs font-medium text-indigo-900",
+				className: "rounded-2xl border border-indigo-800 bg-[color:var(--messaging-background,var(--color-white))] px-2 py-0.5 text-xs font-medium text-indigo-900",
 				children: t("message_new")
 			})
 		})]
@@ -5621,13 +5621,13 @@ function DayDivider({ date, conversationId, onJumpToDate }) {
 			/* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0 flex items-center",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-gray-200" })
+				children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-[color:var(--messaging-border,var(--color-gray-200))]" })
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "relative flex justify-center",
 				children: isMobile ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
-					className: cn("flex items-center gap-1.5 rounded-2xl border border-gray-200 bg-gray-50 py-0.5 pr-2.5 pl-3 text-xs font-medium text-gray-700", conversationId ? "cursor-pointer hover:bg-gray-100" : "cursor-default"),
+					className: cn("flex items-center gap-1.5 rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] py-0.5 pr-2.5 pl-3 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]", conversationId ? "cursor-pointer hover:bg-[color:var(--messaging-muted,var(--color-gray-100))]" : "cursor-default"),
 					"aria-label": conversationId ? t("divider_jump_to") : void 0,
 					disabled: !conversationId,
 					onClick: () => setDateMenuOpen(true),
@@ -5675,7 +5675,7 @@ function DayDivider({ date, conversationId, onJumpToDate }) {
 						asChild: true,
 						children: /* @__PURE__ */ jsxs("button", {
 							type: "button",
-							className: cn("flex items-center gap-1.5 rounded-2xl border border-gray-200 bg-gray-50 py-0.5 pr-2.5 pl-3 text-xs font-medium text-gray-700", conversationId ? "cursor-pointer hover:bg-gray-100" : "cursor-default"),
+							className: cn("flex items-center gap-1.5 rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] py-0.5 pr-2.5 pl-3 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]", conversationId ? "cursor-pointer hover:bg-[color:var(--messaging-muted,var(--color-gray-100))]" : "cursor-default"),
 							"aria-label": conversationId ? t("divider_jump_to") : void 0,
 							disabled: !conversationId,
 							children: [label, /* @__PURE__ */ jsx(ChevronDown, { className: clsx$1("transition-transform duration-200", dateMenuOpen ? "rotate-180" : "") })]
@@ -5684,39 +5684,39 @@ function DayDivider({ date, conversationId, onJumpToDate }) {
 						align: "center",
 						className: "w-60 p-0",
 						children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
-							className: "border-b border-gray-200 px-4 py-3 text-sm font-semibold text-slate-700",
+							className: "border-b border-[color:var(--messaging-border,var(--color-gray-200))] px-4 py-3 text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 							children: t("divider_jump_to")
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "px-0 py-1",
 							children: [
 								/* @__PURE__ */ jsx(DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate(startOfDay(/* @__PURE__ */ new Date())),
 									children: t("divider_today")
 								}),
 								/* @__PURE__ */ jsx(DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate(startOfDay(subDays(/* @__PURE__ */ new Date(), 1))),
 									children: t("divider_yesterday")
 								}),
 								/* @__PURE__ */ jsx(DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate(startOfDay(subDays(/* @__PURE__ */ new Date(), 7))),
 									children: t("divider_last_week")
 								}),
 								/* @__PURE__ */ jsx(DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate(startOfDay(subDays(/* @__PURE__ */ new Date(), 30))),
 									children: t("divider_last_month")
 								}),
 								/* @__PURE__ */ jsx(DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => jumpToDate("start"),
 									children: t("divider_very_beginning")
 								}),
 								/* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "mx-0 my-1" }),
 								/* @__PURE__ */ jsx(DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: onSelectSpecificDate,
 									children: t("divider_specific_date")
 								})
@@ -5754,16 +5754,16 @@ function ErrorState({ title, message, onRetry }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col items-center gap-2 text-center",
 					children: [/* @__PURE__ */ jsx("h3", {
-						className: "text-base leading-tight font-semibold text-slate-900",
+						className: "text-base leading-tight font-semibold text-[color:var(--messaging-foreground,var(--color-slate-900))]",
 						children: effectiveTitle
 					}), /* @__PURE__ */ jsx("p", {
-						className: "text-sm leading-tight text-slate-600",
+						className: "text-sm leading-tight text-[color:var(--messaging-muted-foreground,var(--color-slate-600))]",
 						children: effectiveMessage
 					})]
 				}),
 				onRetry && /* @__PURE__ */ jsx("button", {
 					onClick: onRetry,
-					className: "rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none",
+					className: "rounded-md bg-[color:var(--messaging-primary,var(--color-blue-600))] px-4 py-2 text-sm font-medium text-[color:var(--messaging-primary-foreground,var(--color-white))] hover:bg-[color:var(--messaging-primary,var(--color-blue-700))] focus:ring-2 focus:ring-[color:var(--messaging-primary,var(--color-blue-500))] focus:ring-offset-2 focus:outline-none",
 					children: t("error_retry")
 				})
 			]
@@ -5864,7 +5864,7 @@ function EmojiPickerFooter({ className, ...props }) {
 			children: "Select an emoji…"
 		}) }), /* @__PURE__ */ jsx(at.SkinToneSelector, {
 			emoji: "👋",
-			className: "ml-auto aspect-square h-full rounded-sm hover:bg-gray-100 active:bg-gray-200"
+			className: "ml-auto aspect-square h-full rounded-sm hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]"
 		})]
 	});
 }
@@ -5978,18 +5978,18 @@ function AttachmentDisplay({ attachment: { url, image_url, thumbnail_url, filena
 	const showAsImage = metadata && thumbnail_url && !showAsVideo;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		!showAsVideo && !showAsImage && /* @__PURE__ */ jsxs("div", {
-			className: "group/file max-w-96 overflow-clip rounded-xl border border-gray-200 bg-gray-50",
+			className: "group/file max-w-96 overflow-clip rounded-xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))]",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 p-2",
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => window.open(url, "_blank"),
-					className: "-m-1 flex items-center gap-2 rounded-lg p-1 text-left hover:bg-gray-100 active:bg-gray-200",
+					className: "-m-1 flex items-center gap-2 rounded-lg p-1 text-left hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: clsx$1("isolate flex size-8 shrink-0 flex-col rounded-sm border border-white bg-gradient-to-b from-white to-zinc-100 ring-1 ring-gray-300"),
+						className: clsx$1("isolate flex size-8 shrink-0 flex-col rounded-sm border border-[color:var(--messaging-border,var(--color-white))] bg-gradient-to-b from-[color:var(--messaging-background,var(--color-white))] to-zinc-100 ring-1 ring-[color:var(--messaging-border,var(--color-gray-300))]"),
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "mx-0.5 mt-0.5 grid grow place-items-center rounded-tl-[0.1875rem] rounded-tr-[0.1875rem] bg-gradient-to-b from-gray-100 to-gray-50",
-							children: /* @__PURE__ */ jsx(FileIcon, { className: "-mb-1.5 size-2.5 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-gray-300" })
+							className: "mx-0.5 mt-0.5 grid grow place-items-center rounded-tl-[0.1875rem] rounded-tr-[0.1875rem] bg-gradient-to-b from-[color:var(--messaging-muted,var(--color-gray-100))] to-[color:var(--messaging-background,var(--color-gray-50))]",
+							children: /* @__PURE__ */ jsx(FileIcon, { className: "-mb-1.5 size-2.5 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]" })
 						}), /* @__PURE__ */ jsx("div", {
 							className: clsx$1("text-messaging-6 z-10 m-px mt-0 flex h-4 items-center justify-center rounded-[0.25rem] border text-center text-white uppercase text-shadow-2xs", config.borderColor),
 							style: { background: config.bgColor },
@@ -5998,15 +5998,15 @@ function AttachmentDisplay({ attachment: { url, image_url, thumbnail_url, filena
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "mr-3 grid gap-1.5",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-messaging-2 capsize -my-1 truncate py-1 text-gray-900",
+							className: "text-messaging-2 capsize -my-1 truncate py-1 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 							children: filename
 						}), /* @__PURE__ */ jsx("div", {
-							className: "text-messaging-6 capsize text-gray-500",
+							className: "text-messaging-6 capsize text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 							children: content_size ? formatFileSize(content_size) : t("attachment_unknown_size")
 						})]
 					})]
 				}), /* @__PURE__ */ jsx("div", {
-					className: "ml-auto flex gap-1 rounded-lg border border-gray-200 bg-white p-1 opacity-0 transition-opacity group-hover/file:opacity-100",
+					className: "ml-auto flex gap-1 rounded-lg border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-1 opacity-0 transition-opacity group-hover/file:opacity-100",
 					children: /* @__PURE__ */ jsx(IconButton, {
 						size: "icon-xs",
 						icon: Download,
@@ -6023,7 +6023,7 @@ function AttachmentDisplay({ attachment: { url, image_url, thumbnail_url, filena
 				children: /* @__PURE__ */ jsx("img", {
 					src: image_url,
 					alt: filename,
-					className: "h-40 w-80 min-w-full border-t border-gray-200 object-cover object-top"
+					className: "h-40 w-80 min-w-full border-t border-[color:var(--messaging-border,var(--color-gray-200))] object-cover object-top"
 				})
 			})]
 		}),
@@ -6038,7 +6038,7 @@ function AttachmentDisplay({ attachment: { url, image_url, thumbnail_url, filena
 				alt: filename,
 				width: metadata?.width,
 				height: metadata?.height,
-				className: "h-svh max-h-full w-svw max-w-full rounded-lg bg-gray-100 object-cover"
+				className: "h-svh max-h-full w-svw max-w-full rounded-lg bg-[color:var(--messaging-muted,var(--color-gray-100))] object-cover"
 			})
 		}),
 		showAsVideo && /* @__PURE__ */ jsx("video", {
@@ -27423,7 +27423,7 @@ const UserMentionChip = ({ userId }) => {
 	const { t } = useMessagingTranslation();
 	const thisUser = (users ?? []).find((user) => user.id.toString() === userId);
 	return /* @__PURE__ */ jsxs("span", {
-		className: "font-medium text-blue-600 not-italic",
+		className: "font-medium text-[color:var(--messaging-primary,var(--color-blue-600))] not-italic",
 		children: ["@", [thisUser?.first_name, thisUser?.last_name].filter(Boolean).join(" ") || t("unknown")]
 	});
 };
@@ -27494,7 +27494,7 @@ const markdownComponents = {
 	},
 	blockquote: ({ children }) => {
 		return /* @__PURE__ */ jsx("blockquote", {
-			className: "border-l-2 border-gray-400 bg-black/5 p-2",
+			className: "border-l-2 border-[color:var(--messaging-border,var(--color-gray-400))] bg-[color:var(--messaging-foreground,var(--color-black))]/5 p-2",
 			children: processChildren(children)
 		});
 	},
@@ -27506,13 +27506,13 @@ const markdownComponents = {
 	},
 	code: ({ children }) => {
 		return /* @__PURE__ */ jsx("code", {
-			className: "my-0.5 inline-block rounded-xs bg-gray-800/5 px-1",
+			className: "my-0.5 inline-block rounded-xs bg-[color:var(--messaging-muted,var(--color-gray-800))]/5 px-1",
 			children: processChildren(children)
 		});
 	},
 	a: ({ href, children }) => {
 		return /* @__PURE__ */ jsx("a", {
-			className: "text-blue-600 visited:text-purple-600 hover:underline",
+			className: "text-[color:var(--messaging-primary,var(--color-blue-600))] visited:text-purple-600 hover:underline",
 			href,
 			target: "_blank",
 			rel: "noopener noreferrer",
@@ -27527,13 +27527,13 @@ const markdownComponents = {
 	},
 	td: ({ children }) => {
 		return /* @__PURE__ */ jsx("td", {
-			className: "border border-gray-300 px-3 py-1.5",
+			className: "border border-[color:var(--messaging-border,var(--color-gray-300))] px-3 py-1.5",
 			children: processChildren(children)
 		});
 	},
 	th: ({ children }) => {
 		return /* @__PURE__ */ jsx("th", {
-			className: "border border-gray-300 px-3 py-1.5",
+			className: "border border-[color:var(--messaging-border,var(--color-gray-300))] px-3 py-1.5",
 			children: processChildren(children)
 		});
 	},
@@ -27554,7 +27554,7 @@ const markdownComponents = {
 	},
 	img: (props) => /* @__PURE__ */ jsx(ProcessedImage, { ...props }),
 	hr: () => {
-		return /* @__PURE__ */ jsx("hr", { className: "my-2 border-gray-300" });
+		return /* @__PURE__ */ jsx("hr", { className: "my-2 border-[color:var(--messaging-border,var(--color-gray-300))]" });
 	},
 	br: () => {
 		return /* @__PURE__ */ jsx("br", { className: "[&+&+&+&+&]:hidden" });
@@ -37734,7 +37734,7 @@ function MessageReactions({ reactions: rawReactions, my_reaction, onUnreact, onR
 						initial: prefersReducedMotion ? false : { opacity: 0 },
 						animate: prefersReducedMotion ? void 0 : { opacity: 1 },
 						exit: prefersReducedMotion ? void 0 : { opacity: 0 },
-						className: twMerge("relative z-10 flex h-6 items-center gap-1.5 overflow-clip rounded-md border", splitEmojis(my_reaction).includes(clickedEmoji) ? "border-gray-200 bg-gray-100 px-1.5 text-gray-400 hover:bg-gray-200 active:border-gray-300 active:bg-gray-300" : "border-gray-200 bg-white px-1.5 text-gray-400 hover:bg-gray-200 active:border-gray-300 active:bg-gray-300"),
+						className: twMerge("relative z-10 flex h-6 items-center gap-1.5 overflow-clip rounded-md border", splitEmojis(my_reaction).includes(clickedEmoji) ? "border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-100))] px-1.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] hover:bg-[color:var(--messaging-muted,var(--color-gray-200))] active:border-[color:var(--messaging-border,var(--color-gray-300))] active:bg-[color:var(--messaging-muted,var(--color-gray-300))]" : "border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] px-1.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] hover:bg-[color:var(--messaging-muted,var(--color-gray-200))] active:border-[color:var(--messaging-border,var(--color-gray-300))] active:bg-[color:var(--messaging-muted,var(--color-gray-300))]"),
 						style: { "--emoji": `"${clickedEmoji}"` },
 						onClick: () => {
 							const currentReactionEmojis = splitEmojis(my_reaction);
@@ -37759,7 +37759,7 @@ function MessageReactions({ reactions: rawReactions, my_reaction, onUnreact, onR
 						open: emojiPickerOpen,
 						onOpenChange: setEmojiPickerOpen,
 						children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-							className: "grid size-6 place-items-center rounded-md bg-white text-gray-400 hover:bg-gray-200 active:border-gray-300 active:bg-gray-300",
+							className: "grid size-6 place-items-center rounded-md bg-[color:var(--messaging-background,var(--color-white))] text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] hover:bg-[color:var(--messaging-muted,var(--color-gray-200))] active:border-[color:var(--messaging-border,var(--color-gray-300))] active:bg-[color:var(--messaging-muted,var(--color-gray-300))]",
 							children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
 						}), /* @__PURE__ */ jsx(PopoverContent, {
 							align: "center",
@@ -37897,12 +37897,12 @@ function Timestamp({ children: timestamp, className = "", displayMode = "auto" }
 			className: "capsize grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1 pr-2 pb-1",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "rounded-sm bg-gray-700 px-1 py-0.5",
+					className: "rounded-sm bg-[color:var(--messaging-muted,var(--color-gray-700))] px-1 py-0.5",
 					children: userTimezoneFormatted.timezone
 				}),
 				/* @__PURE__ */ jsx("div", { children: userTimezoneFormatted.dateTime }),
 				/* @__PURE__ */ jsx("div", {
-					className: "rounded-sm bg-gray-700 px-1 py-0.5",
+					className: "rounded-sm bg-[color:var(--messaging-muted,var(--color-gray-700))] px-1 py-0.5",
 					children: utcFormatted.timezone
 				}),
 				/* @__PURE__ */ jsx("div", { children: utcFormatted.dateTime })
@@ -37985,7 +37985,7 @@ function Message({ conversation, message, isGrouped, highlightType = "auto", ren
 		className: cn("group/message children-pointer-events-auto content-auto pointer-events-none relative px-3 py-1.5 pt-6 select-text hover:z-10 md:px-4 md:pt-[1.375rem]", isGrouped ? "mt-1" : "-mt-3", message.status === "queued" ? "opacity-50" : "transition-opacity duration-1000", emojiPickerOpen && "z-20", optionsOpen && "z-20"),
 		children: [
 			pinned && highlightType !== "never" && /* @__PURE__ */ jsxs("div", {
-				className: clsx$1("text-messaging-6 mb-2 ml-10.5 flex items-center gap-1.5", pinned && highlightType === "auto" && "text-orange-600", highlightType === "search" && "text-blue-600"),
+				className: clsx$1("text-messaging-6 mb-2 ml-10.5 flex items-center gap-1.5", pinned && highlightType === "auto" && "text-orange-600", highlightType === "search" && "text-[color:var(--messaging-primary,var(--color-blue-600))]"),
 				children: [/* @__PURE__ */ jsx(Pin, {
 					className: "h-2!",
 					fill: "currentColor"
@@ -37997,7 +37997,7 @@ function Message({ conversation, message, isGrouped, highlightType = "auto", ren
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex gap-2.5",
 				children: [
-					/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 top-4 -z-10 group-hover/message:bg-gray-50", pinned && highlightType === "auto" && "bg-amber-50 group-hover/message:bg-amber-100/75", highlightType === "search" && "bg-blue-50 group-hover/message:bg-blue-100/75") }),
+					/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 top-4 -z-10 group-hover/message:bg-[color:var(--messaging-muted,var(--color-gray-50))]", pinned && highlightType === "auto" && "bg-amber-50 group-hover/message:bg-amber-100/75", highlightType === "search" && "bg-[color:var(--messaging-primary-tint,var(--color-blue-50))] group-hover/message:bg-[color:var(--messaging-primary-tint,var(--color-blue-100))]/75") }),
 					/* @__PURE__ */ jsxs("div", {
 						className: cn("text-muted-foreground md:border-border md:bg-background visible absolute top-2 right-2 flex items-center gap-1 rounded-full bg-transparent p-0 md:invisible md:top-0 md:right-4 md:rounded-md md:border md:p-1 md:shadow-lg md:group-hover/message:visible", emojiPickerOpen && "visible", optionsOpen && "visible"),
 						children: [conversation.type !== "SmsConversation" && conversation.type !== "EmailConversation" && /* @__PURE__ */ jsxs(Popover, {
@@ -38061,12 +38061,12 @@ function Message({ conversation, message, isGrouped, highlightType = "auto", ren
 										setPin(!pinned);
 										setOptionsOpen(false);
 									},
-									className: "cursor-pointer text-sm font-medium text-gray-700",
-									children: [/* @__PURE__ */ jsx(Pin, { className: "text-gray-500" }), pinned ? t("message_unpin") : t("message_pin")]
+									className: "cursor-pointer text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]",
+									children: [/* @__PURE__ */ jsx(Pin, { className: "text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), pinned ? t("message_unpin") : t("message_pin")]
 								}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
 									onSelect: copyMessageLink,
-									className: "cursor-pointer text-sm font-medium text-gray-700",
-									children: [/* @__PURE__ */ jsx(Link, { className: "text-gray-500" }), t("message_copy_link")]
+									className: "cursor-pointer text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]",
+									children: [/* @__PURE__ */ jsx(Link, { className: "text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("message_copy_link")]
 								})]
 							})]
 						})]
@@ -38258,7 +38258,7 @@ function SystemMessage({ message, conversation, fallbackText, renderProfileTrigg
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2.5",
 			children: [
-				/* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-4 -z-10 group-hover/message:bg-gray-50" }),
+				/* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-4 -z-10 group-hover/message:bg-[color:var(--messaging-muted,var(--color-gray-50))]" }),
 				profileTrigger(message.sender_recipient.id, /* @__PURE__ */ jsx(ProfilePhoto, {
 					size: "lg",
 					conversation,
@@ -38271,7 +38271,7 @@ function SystemMessage({ message, conversation, fallbackText, renderProfileTrigg
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "mb-1 flex h-4 items-center gap-1.5",
 						children: [profileTrigger(message.sender_recipient.id, /* @__PURE__ */ jsxs("div", {
-							className: "text-messaging-2 capsize cursor-pointer text-gray-900 hover:underline",
+							className: "text-messaging-2 capsize cursor-pointer text-[color:var(--messaging-foreground,var(--color-gray-900))] hover:underline",
 							children: [
 								message.sender_recipient.first_name,
 								" ",
@@ -38279,11 +38279,11 @@ function SystemMessage({ message, conversation, fallbackText, renderProfileTrigg
 								!message.sender_recipient.first_name && !message.sender_recipient.last_name && /* @__PURE__ */ jsx(Fragment$1, { children: message.sender_recipient.phone || message.sender_recipient.email || t("message_unknown_sender") })
 							]
 						})), /* @__PURE__ */ jsx(Timestamp, {
-							className: "text-messaging-6 capsize text-gray-400",
+							className: "text-messaging-6 capsize text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]",
 							children: message.sent_at || message.created_at
 						})]
 					}), /* @__PURE__ */ jsx("div", {
-						className: "text-messaging-3 capsize text-gray-400",
+						className: "text-messaging-3 capsize text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]",
 						children: getSystemMessageText()
 					})]
 				})
@@ -49865,16 +49865,16 @@ function AttachmentDropzone({ props, isDragOver }) {
 		onDragEnter: void 0,
 		onDragOver: void 0
 	}), /* @__PURE__ */ jsx("div", {
-		className: "absolute inset-0 z-10 rounded-lg border border-gray-200 bg-white shadow-sm",
+		className: "absolute inset-0 z-10 rounded-lg border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] shadow-sm",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex h-full flex-col",
 			children: /* @__PURE__ */ jsx("div", {
-				className: cn("flex h-full flex-1 cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors", isDragOver ? "border-blue-500 bg-blue-100" : "border-gray-300 bg-gray-50"),
+				className: cn("flex h-full flex-1 cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors", isDragOver ? "border-[color:var(--messaging-primary,var(--color-blue-500))] bg-[color:var(--messaging-primary-tint,var(--color-blue-100))]" : "border-[color:var(--messaging-border,var(--color-gray-300))] bg-[color:var(--messaging-muted,var(--color-gray-50))]"),
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2 text-center",
-					children: [/* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-blue-500" }), /* @__PURE__ */ jsx("p", {
-						className: "font-medium text-blue-600",
+					children: [/* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-[color:var(--messaging-primary,var(--color-blue-500))]" }), /* @__PURE__ */ jsx("p", {
+						className: "font-medium text-[color:var(--messaging-primary,var(--color-blue-600))]",
 						children: t("dropzone_upload")
 					})]
 				})
@@ -50921,10 +50921,10 @@ const MentionList = forwardRef((props, ref) => {
 		return false;
 	} }));
 	return /* @__PURE__ */ jsx("div", {
-		className: "group/mentions grid min-w-64 rounded-lg border border-gray-200 bg-white p-1 shadow-lg",
+		className: "group/mentions grid min-w-64 rounded-lg border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-1 shadow-lg",
 		children: props.items.length > 0 ? props.items.map((item, index) => /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: cn("text-messaging-3 flex items-center gap-2 rounded-md p-1 pr-2 hover:bg-gray-200 active:bg-gray-300", index === selectedIndex ? "bg-gray-200 group-has-[button:hover]/mentions:not-hover:bg-white" : ""),
+			className: cn("text-messaging-3 flex items-center gap-2 rounded-md p-1 pr-2 hover:bg-[color:var(--messaging-muted,var(--color-gray-200))] active:bg-[color:var(--messaging-muted,var(--color-gray-300))]", index === selectedIndex ? "bg-[color:var(--messaging-muted,var(--color-gray-200))] group-has-[button:hover]/mentions:not-hover:bg-[color:var(--messaging-background,var(--color-white))]" : ""),
 			onClick: () => selectItem(index),
 			children: [/* @__PURE__ */ jsx(ProfilePhoto, {
 				user: item.userDetails,
@@ -50933,7 +50933,7 @@ const MentionList = forwardRef((props, ref) => {
 				renderImage: props.renderImage
 			}), item.label]
 		}, item.id)) : /* @__PURE__ */ jsx("div", {
-			className: "text-messaging-4 px-2.5 py-1.5 text-gray-500",
+			className: "text-messaging-4 px-2.5 py-1.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 			children: "No results"
 		})
 	});
@@ -51026,7 +51026,7 @@ function AttachmentPreview({ file, onRemove }) {
 	const [previewLoaded, setPreviewLoaded] = useState(false);
 	if (!canShowPreview && previewLoaded) setPreviewLoaded(false);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx$1("group/file relative flex max-w-80 items-center gap-2 rounded-xl border border-gray-200 bg-gray-50", previewLoaded ? "" : "min-w-48 p-2 pr-6", file.status === "failed" && "border-red-200 bg-red-50"),
+		className: clsx$1("group/file relative flex max-w-80 items-center gap-2 rounded-xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))]", previewLoaded ? "" : "min-w-48 p-2 pr-6", file.status === "failed" && "border-red-200 bg-red-50"),
 		children: [
 			canShowPreview && /* @__PURE__ */ jsxs("div", {
 				className: clsx$1("overlapping-children size-16 shrink-0 place-items-center overflow-clip rounded-[0.8125rem]", previewLoaded ? "" : "hidden"),
@@ -51048,10 +51048,10 @@ function AttachmentPreview({ file, onRemove }) {
 				})] })]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: clsx$1("flex size-12 shrink-0 flex-col rounded-md border border-white bg-gradient-to-b from-white to-zinc-100 ring-1 ring-gray-300", previewLoaded && "hidden"),
+				className: clsx$1("flex size-12 shrink-0 flex-col rounded-md border border-[color:var(--messaging-border,var(--color-white))] bg-gradient-to-b from-[color:var(--messaging-background,var(--color-white))] to-zinc-100 ring-1 ring-[color:var(--messaging-border,var(--color-gray-300))]", previewLoaded && "hidden"),
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "mx-1 mt-1 grid grow place-items-center rounded-tl-sm rounded-tr-sm bg-gradient-to-b from-gray-100 to-gray-50",
-					children: /* @__PURE__ */ jsx(FileIcon, { className: "size-4 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-gray-300" })
+					className: "mx-1 mt-1 grid grow place-items-center rounded-tl-sm rounded-tr-sm bg-gradient-to-b from-[color:var(--messaging-muted,var(--color-gray-100))] to-[color:var(--messaging-background,var(--color-gray-50))]",
+					children: /* @__PURE__ */ jsx(FileIcon, { className: "size-4 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]" })
 				}), /* @__PURE__ */ jsx("div", {
 					className: clsx$1("text-messaging-6 m-1 mt-0 flex h-4 items-center justify-center rounded-sm border text-center text-white uppercase text-shadow-2xs", config.borderColor),
 					style: { background: config.bgColor },
@@ -51061,23 +51061,23 @@ function AttachmentPreview({ file, onRemove }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: clsx$1("grid gap-1.5", previewLoaded && "hidden"),
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-messaging-2 capsize -my-1 truncate py-1 text-gray-900",
+					className: "text-messaging-2 capsize -my-1 truncate py-1 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: file.filename
 				}), /* @__PURE__ */ jsx("div", {
-					className: "text-messaging-6 capsize text-gray-500",
+					className: "text-messaging-6 capsize text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: file.status === "completed" ? file.content_size ? formatFileSize(file.content_size) : t("attachment_unknown_size") : file.status === "uploading" ? file.progress === 0 ? t("attachment_starting_upload") : `${file.progress}%` : file.error
 				})]
 			}),
 			onRemove && /* @__PURE__ */ jsx(IconButton, {
 				onClick: onRemove,
-				className: "absolute -top-2 -right-2 border border-gray-200 opacity-0 shadow-xs group-hover/file:opacity-100",
+				className: "absolute -top-2 -right-2 border border-[color:var(--messaging-border,var(--color-gray-200))] opacity-0 shadow-xs group-hover/file:opacity-100",
 				title: t("attachment_remove"),
 				size: "icon-xs",
 				icon: X
 			}),
 			file.status === "uploading" && /* @__PURE__ */ jsxs("div", {
-				className: clsx$1("overlapping-children absolute -top-2 -right-2 grid size-5 place-items-center rounded-sm border border-gray-200 bg-white", "group-hover/file:hidden"),
-				children: [/* @__PURE__ */ jsx(Circle, { className: "size-2.5 text-gray-300" }), /* @__PURE__ */ jsx(Loader2, { className: "size-2.5 animate-spin text-blue-600" })]
+				className: clsx$1("overlapping-children absolute -top-2 -right-2 grid size-5 place-items-center rounded-sm border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))]", "group-hover/file:hidden"),
+				children: [/* @__PURE__ */ jsx(Circle, { className: "size-2.5 text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]" }), /* @__PURE__ */ jsx(Loader2, { className: "size-2.5 animate-spin text-[color:var(--messaging-primary,var(--color-blue-600))]" })]
 			})
 		]
 	});
@@ -51144,18 +51144,18 @@ function ScheduleMessageDialog({ open, onOpenChange, onApply, initialDate = null
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							"aria-label": t("schedule_dialog_previous_month"),
-							className: "size-8 rounded-md hover:bg-gray-100 active:bg-gray-200",
+							className: "size-8 rounded-md hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 							onClick: () => setCurrentMonth((m) => subMonths(m, 1)),
 							children: /* @__PURE__ */ jsx(ChevronLeft, {})
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: "text-base font-semibold text-gray-700",
+							className: "text-base font-semibold text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 							children: format$1(currentMonth, "MMMM yyyy")
 						}),
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							"aria-label": t("schedule_dialog_next_month"),
-							className: "size-8 rounded-md hover:bg-gray-100 active:bg-gray-200",
+							className: "size-8 rounded-md hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 							onClick: () => setCurrentMonth((m) => addMonths(m, 1)),
 							children: /* @__PURE__ */ jsx(ChevronRight, {})
 						})
@@ -51174,7 +51174,7 @@ function ScheduleMessageDialog({ open, onOpenChange, onApply, initialDate = null
 							setCurrentMonth(d);
 						},
 						min: format$1(minDay, "yyyy-MM-dd"),
-						className: clsx$1("hide-date-picker border border-gray-300")
+						className: clsx$1("hide-date-picker border border-[color:var(--messaging-border,var(--color-gray-300))]")
 					}), /* @__PURE__ */ jsx(Input, {
 						name: "time",
 						type: "time",
@@ -51182,7 +51182,7 @@ function ScheduleMessageDialog({ open, onOpenChange, onApply, initialDate = null
 						value: timeHM,
 						min: minTimeForSelectedDay,
 						onChange: (e) => setTimeHM(e.target.value),
-						className: clsx$1("border border-gray-300")
+						className: clsx$1("border border-[color:var(--messaging-border,var(--color-gray-300))]")
 					})]
 				}),
 				/* @__PURE__ */ jsx(Calendar$1, {
@@ -51201,16 +51201,16 @@ function ScheduleMessageDialog({ open, onOpenChange, onApply, initialDate = null
 						caption: clsx$1("hidden"),
 						head_cell: clsx$1("flex size-10 items-center justify-center text-sm font-medium"),
 						cell: clsx$1("flex size-10 items-center justify-center"),
-						day: clsx$1("size-10 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200"),
-						day_selected: clsx$1("bg-blue-600! text-white!"),
-						day_outside: clsx$1("text-gray-500!"),
-						day_disabled: clsx$1("pointer-events-none text-gray-500 opacity-50")
+						day: clsx$1("size-10 rounded-full text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]"),
+						day_selected: clsx$1("bg-[color:var(--messaging-primary,var(--color-blue-600))]! text-[color:var(--messaging-primary-foreground,var(--color-white))]!"),
+						day_outside: clsx$1("text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]!"),
+						day_disabled: clsx$1("pointer-events-none text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] opacity-50")
 					},
 					initialFocus: true
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full items-center gap-3 border-t border-gray-200 pt-4",
+			className: "flex w-full items-center gap-3 border-t border-[color:var(--messaging-border,var(--color-gray-200))] pt-4",
 			children: [/* @__PURE__ */ jsx(Button, {
 				variant: "default",
 				onClick: () => onOpenChange(false),
@@ -51317,12 +51317,12 @@ function ComposerActions({ editor, onAttachment, onSend, onSchedule, canSendMess
 			}) : /* @__PURE__ */ jsx("div", { className: "mr-auto" }),
 			messageHasContent && mode === "normal" && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "overlapping-children items-center justify-end rounded-sm px-2 hover:bg-gray-100 active:bg-gray-200",
+				className: "overlapping-children items-center justify-end rounded-sm px-2 hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 				onClick: () => {
 					setSendWithEnter(!sendWithEnter);
 				},
 				children: /* @__PURE__ */ jsx("div", {
-					className: "text-messaging-6 text-gray-400",
+					className: "text-messaging-6 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]",
 					children: sendWithEnter ? /* @__PURE__ */ jsx(Fragment$1, { children: t("composer_enter_to_send") }) : /* @__PURE__ */ jsx(Fragment$1, { children: t("composer_shift_enter_to_send") })
 				})
 			}),
@@ -51364,19 +51364,19 @@ function ComposerActions({ editor, onAttachment, onSend, onSchedule, canSendMess
 						align: "end",
 						className: "w-60 p-0",
 						children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
-							className: "border-b border-gray-200 px-4 py-3 text-sm font-semibold text-slate-700",
+							className: "border-b border-[color:var(--messaging-border,var(--color-gray-200))] px-4 py-3 text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 							children: t("composer_schedule_send")
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "px-0 py-1",
 							children: [
 								quickScheduleOptions.map((dt, idx) => /* @__PURE__ */ jsx(DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => onSchedule(dt),
 									children: formatOptionLabel(dt)
 								}, idx)),
 								/* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "mx-0 my-1" }),
 								/* @__PURE__ */ jsx(DropdownMenuItem, {
-									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+									className: "mx-1.5 my-0 cursor-pointer rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 									onSelect: () => setCustomDialogOpen(true),
 									children: t("composer_custom_date_time")
 								})
@@ -51453,7 +51453,7 @@ function ComposerToolbar({ editor, isSaving, renderLinkModal }) {
 		initialText: linkInitialState.text,
 		initialUrl: linkInitialState.url
 	}), /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center gap-1.5 border-b border-gray-200 px-2 py-1.5", "-mt-[calc(2.25rem+1px)] transition-all group-has-[.ProseMirror-focused,[data-toolbar]:focus-within]/composer:mt-0"),
+		className: cn("flex items-center gap-1.5 border-b border-[color:var(--messaging-border,var(--color-gray-200))] px-2 py-1.5", "-mt-[calc(2.25rem+1px)] transition-all group-has-[.ProseMirror-focused,[data-toolbar]:focus-within]/composer:mt-0"),
 		children: [
 			/* @__PURE__ */ jsx(IconToggle, {
 				size: "icon-xs",
@@ -51476,7 +51476,7 @@ function ComposerToolbar({ editor, isSaving, renderLinkModal }) {
 				icon: Strikethrough,
 				pressed: editor.isActive("strike")
 			}),
-			/* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px rounded-full bg-gray-300" }),
+			/* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px rounded-full bg-[color:var(--messaging-muted,var(--color-gray-300))]" }),
 			/* @__PURE__ */ jsx(IconToggle, {
 				size: "icon-xs",
 				onPressedChange: () => openLinkModal(),
@@ -51499,7 +51499,7 @@ function ComposerToolbar({ editor, isSaving, renderLinkModal }) {
 				pressed: editor.isActive("orderedList")
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: clsx$1("text-messaging-6 mr-1 ml-auto text-gray-300 transition-[opacity,transform]", isSaving ? "opacity-100" : "opacity-0", "translate-y-7 group-has-[.ProseMirror-focused,[data-toolbar]:focus-within]/composer:translate-y-0"),
+				className: clsx$1("text-messaging-6 mr-1 ml-auto text-[color:var(--messaging-muted-foreground,var(--color-gray-300))] transition-[opacity,transform]", isSaving ? "opacity-100" : "opacity-0", "translate-y-7 group-has-[.ProseMirror-focused,[data-toolbar]:focus-within]/composer:translate-y-0"),
 				children: t("composer_saving")
 			})
 		]
@@ -51709,14 +51709,14 @@ function MessageComposer({ onSend, onScheduleSuccess, onSaveScheduledEdit, place
 			}),
 			Placeholder.configure({
 				placeholder,
-				emptyEditorClass: cn("before:text-messaging-3 before:absolute before:text-gray-400 before:content-[attr(data-placeholder)]")
+				emptyEditorClass: cn("before:text-messaging-3 before:absolute before:text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] before:content-[attr(data-placeholder)]")
 			}),
 			Link$1.configure({
 				openOnClick: false,
 				autolink: true,
 				linkOnPaste: true,
 				HTMLAttributes: {
-					class: "text-blue-600 underline",
+					class: "text-[color:var(--messaging-primary,var(--color-blue-600))] underline",
 					target: "_blank",
 					rel: "noopener noreferrer nofollow"
 				}
@@ -51726,7 +51726,7 @@ function MessageComposer({ onSend, onScheduleSuccess, onSaveScheduledEdit, place
 				bulletListMarker: "-"
 			}),
 			CustomMention.configure({
-				HTMLAttributes: { class: "text-blue-600 font-medium not-italic rounded-sm bg-blue-100 px-1 py-0.5" },
+				HTMLAttributes: { class: "text-[color:var(--messaging-primary,var(--color-blue-600))] font-medium not-italic rounded-sm bg-[color:var(--messaging-primary-tint,var(--color-blue-100))] px-1 py-0.5" },
 				suggestion: createMentionSuggestion(mentionableUsers ?? [], { renderImage })
 			})
 		],
@@ -51817,7 +51817,7 @@ function MessageComposer({ onSend, onScheduleSuccess, onSaveScheduledEdit, place
 			}),
 			conversationType !== "SmsConversation" && conversationType !== "EmailConversation" && /* @__PURE__ */ jsx("div", {
 				"data-toolbar": true,
-				className: "sticky top-0 z-10 bg-white",
+				className: "sticky top-0 z-10 bg-[color:var(--messaging-background,var(--color-white))]",
 				children: /* @__PURE__ */ jsx(ComposerToolbar, {
 					editor,
 					isSaving,
@@ -51886,7 +51886,7 @@ function MessagesViewComposer({ conversationId, conversationMetadata, uploader,
 	if (conversationMetadata?.["messaging_enabled?"] === false || !isLoading && !user) return /* @__PURE__ */ jsxs("div", {
 		className: "p-4",
 		children: [/* @__PURE__ */ jsx("p", {
-			className: "text-messaging-4 flex h-9 items-center rounded-md border border-gray-200 bg-white p-2 shadow-sm ring-4 ring-gray-500/10",
+			className: "text-messaging-4 flex h-9 items-center rounded-md border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-2 shadow-sm ring-4 ring-[color:var(--messaging-border,var(--color-gray-500))]/10",
 			children: conversationMetadata?.["messaging_enabled?"] === false ? t("send_permission_denied") : t("send_account_loading")
 		}), /* @__PURE__ */ jsx("div", {
 			className: "hidden",
@@ -52290,7 +52290,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 		if (noDateResults || elements.length === 0 && isDateView) elements.push(/* @__PURE__ */ jsx("div", {
 			className: "flex justify-center py-2",
 			children: /* @__PURE__ */ jsx("span", {
-				className: "rounded-2xl border border-gray-200 bg-yellow-50 px-3 py-0.5 text-xs font-medium text-yellow-800",
+				className: "rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-yellow-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-yellow-800))]",
 				children: t("error_no_messages_on_date")
 			})
 		}, "no-messages"));
@@ -52298,7 +52298,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 			if ((conversationMetadata.creator?.id ?? null) !== (user?.recipient_id ?? null)) elements.push(/* @__PURE__ */ jsx("div", {
 				className: "flex justify-center py-2",
 				children: /* @__PURE__ */ jsx("span", {
-					className: "rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700",
+					className: "rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))]",
 					children: t("error_joined_channel")
 				})
 			}, "joined-fallback"));
@@ -52452,7 +52452,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 							fetchInProgressRef.current = true;
 							fetchNextPage();
 						},
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: t("message_load_more")
 					})
 				}, "watcher-top"),
@@ -52487,7 +52487,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 							fetchInProgressRef.current = true;
 							fetchPreviousPage();
 						},
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: t("message_load_more")
 					})
 				}, "watcher-bottom")
@@ -52509,7 +52509,7 @@ function MessagesView({ conversationId, messageId, saveDrafts, noDateResults, re
 							scrollToBottomNow();
 							setHasNewMessages(false);
 						},
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: [/* @__PURE__ */ jsx(ArrowDown, { className: "mr-1 h-3 w-3" }), t("message_new_messages")]
 					})
 				}),
@@ -52590,7 +52590,7 @@ function PinnedMessagesView({ conversationId, onToast, renderProfileContent, get
 	const messageElements = useMemo(() => {
 		if (!conversationMetadata) return [];
 		return messages.map((message) => /* @__PURE__ */ jsx("div", {
-			className: "relative isolate w-full rounded-xl border border-gray-200 bg-gray-50 py-2.5",
+			className: "relative isolate w-full rounded-xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] py-2.5",
 			onClick: (event) => {
 				if (event.target.closest("a,button,[role=button],[tabindex]") === null) navigate({
 					view: "message",
@@ -52621,18 +52621,18 @@ function PinnedMessagesView({ conversationId, onToast, renderProfileContent, get
 		return /* @__PURE__ */ jsx("div", {
 			className: "flex h-full items-center justify-center",
 			children: /* @__PURE__ */ jsx("div", {
-				className: "rounded-md border border-gray-200 bg-white p-4 text-center text-gray-600 shadow-sm",
+				className: "rounded-md border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] p-4 text-center text-[color:var(--messaging-muted-foreground,var(--color-gray-600))] shadow-sm",
 				children: errorWithStatus.success && errorWithStatus.data.status === 404 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm font-medium text-gray-900",
+					className: "text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: t("pinned_conversation_not_found")
 				}), /* @__PURE__ */ jsx("p", {
-					className: "mt-1 text-xs text-gray-500",
+					className: "mt-1 text-xs text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: t("pinned_conversation_deleted")
 				})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm font-medium text-gray-900",
+					className: "text-sm font-medium text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 					children: t("pinned_error")
 				}), /* @__PURE__ */ jsx("p", {
-					className: "mt-1 text-xs text-gray-500",
+					className: "mt-1 text-xs text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: t("pinned_error_try_again")
 				})] })
 			})
@@ -52641,8 +52641,8 @@ function PinnedMessagesView({ conversationId, onToast, renderProfileContent, get
 	if (messages.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "flex min-h-[60vh] items-center justify-center",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "text-center text-gray-500",
-			children: [/* @__PURE__ */ jsx(Pin, { className: "mb-2 size-8 text-gray-400" }), /* @__PURE__ */ jsx("p", {
+			className: "text-center text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
+			children: [/* @__PURE__ */ jsx(Pin, { className: "mb-2 size-8 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]" }), /* @__PURE__ */ jsx("p", {
 				className: "text-sm",
 				children: t("pinned_no_messages")
 			})]
@@ -52667,7 +52667,7 @@ function PinnedMessagesView({ conversationId, onToast, renderProfileContent, get
 					children: /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => fetchNextPage(),
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: "Load more"
 					})
 				}),
@@ -52734,7 +52734,7 @@ function TagOptionAvatar({ option: opt, context = "dropdown", renderImage }) {
 		const { emoji } = extractEmoji$1(opt.conversationName || opt.label);
 		const fallback = opt.userData?.image_url ? renderImageElement(renderImage, opt.userData.image_url, opt.label, 20, 20, "h-full w-full object-cover") : "#";
 		return /* @__PURE__ */ jsx("div", {
-			className: clsx$1("grid shrink-0 place-items-center overflow-clip rounded bg-neutral-100", context === "dropdown" ? "size-6 text-sm" : "size-4 text-xs"),
+			className: clsx$1("grid shrink-0 place-items-center overflow-clip rounded bg-[color:var(--messaging-muted,var(--color-neutral-100))]", context === "dropdown" ? "size-6 text-sm" : "size-4 text-xs"),
 			children: emoji || fallback
 		});
 	}
@@ -52749,7 +52749,7 @@ function TagOptionAvatar({ option: opt, context = "dropdown", renderImage }) {
 function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading, isError, query, dropdownRef, onHighlight, onToggle, renderImage }) {
 	const { t } = useMessagingTranslation();
 	return /* @__PURE__ */ jsx("div", {
-		className: "absolute top-full right-0 left-0 z-[9999] max-h-80 translate-y-1 overflow-auto rounded-lg border border-gray-200 bg-white shadow-[0px_12px_16px_-4px_rgba(16,24,40,0.08)]",
+		className: "absolute top-full right-0 left-0 z-[9999] max-h-80 translate-y-1 overflow-auto rounded-lg border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-background,var(--color-white))] shadow-[0px_12px_16px_-4px_rgba(16,24,40,0.08)]",
 		children: /* @__PURE__ */ jsxs("div", {
 			ref: dropdownRef,
 			className: "flex flex-1 flex-col items-start justify-start py-1",
@@ -52765,7 +52765,7 @@ function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading
 						className: "flex flex-1 items-center justify-start gap-2 rounded-md py-2.5 pr-2.5 pl-2",
 						children: /* @__PURE__ */ jsxs("div", {
 							className: "flex flex-1 items-center justify-start gap-2",
-							children: [/* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-pulse rounded-full bg-gray-200" }), /* @__PURE__ */ jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-gray-200" })]
+							children: [/* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-pulse rounded-full bg-[color:var(--messaging-muted,var(--color-gray-200))]" }), /* @__PURE__ */ jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-[color:var(--messaging-muted,var(--color-gray-200))]" })]
 						})
 					})
 				}, i)) }),
@@ -52774,7 +52774,7 @@ function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading
 					children: t("wizard_error_loading_results")
 				}),
 				!isLoading && !isError && options.length === 0 && query.trim() !== "" && /* @__PURE__ */ jsx("div", {
-					className: "p-2 text-sm text-gray-500",
+					className: "p-2 text-sm text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 					children: t("wizard_no_results")
 				}),
 				options.map((opt, idx) => {
@@ -52785,7 +52785,7 @@ function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading
 						onMouseEnter: () => onHighlight(idx),
 						onClick: () => onToggle(opt),
 						children: /* @__PURE__ */ jsxs("div", {
-							className: `flex flex-1 items-center justify-start gap-2 rounded-md py-2.5 pr-2.5 pl-2 transition-colors duration-150 ${highlight === idx ? "border border-blue-200 bg-blue-50" : isSelected ? "bg-gray-50" : "hover:bg-gray-50 active:bg-gray-100"}`,
+							className: `flex flex-1 items-center justify-start gap-2 rounded-md py-2.5 pr-2.5 pl-2 transition-colors duration-150 ${highlight === idx ? "border border-[color:var(--messaging-primary-border,var(--color-blue-200))] bg-[color:var(--messaging-primary-tint,var(--color-blue-50))]" : isSelected ? "bg-[color:var(--messaging-muted,var(--color-gray-50))]" : "hover:bg-[color:var(--messaging-muted,var(--color-gray-50))] active:bg-[color:var(--messaging-muted,var(--color-gray-100))]"}`,
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex flex-1 items-center justify-start gap-2",
 								children: [/* @__PURE__ */ jsx(TagOptionAvatar, {
@@ -52793,25 +52793,25 @@ function TagMultiSelectDropdown({ options, selectedOptions, highlight, isLoading
 									context: "dropdown",
 									renderImage
 								}), /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-wrap items-center justify-start gap-1 text-left text-sm leading-tight font-medium text-gray-900",
+									className: "flex flex-wrap items-center justify-start gap-1 text-left text-sm leading-tight font-medium text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 									children: [
 										/* @__PURE__ */ jsx("span", {
 											className: "mr-1",
 											children: opt.label
 										}),
 										opt.userData?.phone && opt.label !== opt.userData.phone && /* @__PURE__ */ jsx("span", {
-											className: "font-normal text-gray-500",
+											className: "font-normal text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 											children: opt.userData.phone
 										}),
 										opt.userData?.email && !opt.userData?.phone && opt.label !== opt.userData.email && /* @__PURE__ */ jsx("span", {
-											className: "font-normal text-gray-500",
+											className: "font-normal text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 											children: opt.userData.email
 										})
 									]
 								})]
 							}), isSelected && /* @__PURE__ */ jsx("div", {
 								className: "relative h-4 w-5 overflow-hidden",
-								children: /* @__PURE__ */ jsx(Check, { className: "absolute top-0 left-[3px] h-4 w-4 text-black" })
+								children: /* @__PURE__ */ jsx(Check, { className: "absolute top-0 left-[3px] h-4 w-4 text-[color:var(--messaging-foreground,var(--color-black))]" })
 							})]
 						})
 					}, opt.id);
@@ -52930,7 +52930,7 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-1 flex-wrap gap-1",
 				children: [selectedOptions.map((opt) => /* @__PURE__ */ jsxs("div", {
-					className: "inline-flex min-h-6 items-center justify-center gap-[3px] rounded-md border border-gray-300 bg-white py-0.5 pr-1 pl-[5px]",
+					className: "inline-flex min-h-6 items-center justify-center gap-[3px] rounded-md border border-[color:var(--messaging-border,var(--color-gray-300))] bg-[color:var(--messaging-background,var(--color-white))] py-0.5 pr-1 pl-[5px]",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center justify-start gap-[5px]",
 						children: [/* @__PURE__ */ jsx(TagOptionAvatar, {
@@ -52938,18 +52938,18 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 							context: "chip",
 							renderImage
 						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-wrap items-center justify-start gap-1 text-left text-sm/tight leading-tight font-medium text-slate-700",
+							className: "flex flex-wrap items-center justify-start gap-1 text-left text-sm/tight leading-tight font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 							children: [
 								/* @__PURE__ */ jsx("span", {
 									className: "mr-1",
 									children: opt.label
 								}),
 								opt.userData?.phone && opt.label !== opt.userData.phone && /* @__PURE__ */ jsx("span", {
-									className: "font-normal text-gray-500",
+									className: "font-normal text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 									children: opt.userData.phone
 								}),
 								opt.userData?.email && !opt.userData?.phone && opt.label !== opt.userData.email && /* @__PURE__ */ jsx("span", {
-									className: "font-normal text-gray-500",
+									className: "font-normal text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 									children: opt.userData.email
 								})
 							]
@@ -52960,8 +52960,8 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 							e.stopPropagation();
 							onSelectionChange(selectedOptions.filter((selected) => selected.id !== opt.id));
 						},
-						className: "inline-flex flex-col items-start justify-start overflow-hidden rounded-sm p-0.5 hover:bg-gray-100 active:bg-gray-200",
-						children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-gray-900" })
+						className: "inline-flex flex-col items-start justify-start overflow-hidden rounded-sm p-0.5 hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
+						children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-[color:var(--messaging-foreground,var(--color-gray-900))]" })
 					})]
 				}, opt.id)), /* @__PURE__ */ jsx("input", {
 					ref: inputRef,
@@ -52974,7 +52974,7 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 					onKeyDown: handleKeyDown,
 					onFocus: openDropdown,
 					placeholder,
-					className: "m-0 h-6 w-full min-w-48 flex-1 border-none bg-transparent px-0 py-0 text-sm leading-6 text-gray-900 outline-none placeholder:text-gray-500 focus:ring-0 focus:outline-none",
+					className: "m-0 h-6 w-full min-w-48 flex-1 border-none bg-transparent px-0 py-0 text-sm leading-6 text-[color:var(--messaging-foreground,var(--color-gray-900))] outline-none placeholder:text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] focus:ring-0 focus:outline-none",
 					style: {
 						height: "24px",
 						lineHeight: "24px"
@@ -52982,7 +52982,7 @@ function TagMultiSelect({ getOptions, selectedOptions, onSelectionChange, placeh
 				})]
 			}), showChevron && /* @__PURE__ */ jsx("div", {
 				className: "flex flex-shrink-0 items-center justify-center",
-				children: /* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 text-gray-400 transition-transform duration-200 ${open ? "rotate-180" : ""}` })
+				children: /* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 text-[color:var(--messaging-muted-foreground,var(--color-gray-400))] transition-transform duration-200 ${open ? "rotate-180" : ""}` })
 			})]
 		}), open && (query.trim() !== "" || options.length > 0) && /* @__PURE__ */ jsx(TagMultiSelectDropdown, {
 			options,
@@ -53170,9 +53170,9 @@ function RecipientConfigBar({ selectedRecipients, onRecipientsChange, searchUser
 		};
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-14 items-center justify-start gap-2 self-stretch border-b border-gray-200 bg-gray-50 px-6 py-3",
+		className: "flex min-h-14 items-center justify-start gap-2 self-stretch border-b border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-6 py-3",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "justify-start text-xs leading-tight font-normal text-slate-600",
+			className: "justify-start text-xs leading-tight font-normal text-[color:var(--messaging-muted-foreground,var(--color-slate-600))]",
 			children: t("recipient_to")
 		}), /* @__PURE__ */ jsx("div", {
 			className: "relative flex-1",
@@ -53233,7 +53233,7 @@ function ScheduledMessageConfirmDialog({ open, onOpenChange, title, description,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "grid gap-3",
 			children: [content, description && /* @__PURE__ */ jsx("div", {
-				className: "text-sm text-gray-600",
+				className: "text-sm text-[color:var(--messaging-muted-foreground,var(--color-gray-600))]",
 				children: description
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
@@ -53266,16 +53266,16 @@ function MessageTypeBadge({ messageKind, messageType }) {
 		children: /* @__PURE__ */ jsx(Mail, { className: "h-3 w-3 text-pink-600" })
 	});
 	if (messageKind === "public-channel" || messageType === "ChannelMessage") return /* @__PURE__ */ jsx("div", {
-		className: cn("inline-flex items-center justify-center rounded-md border px-1.5 py-1", "border-blue-200 bg-blue-50"),
-		children: /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3 text-blue-700" })
+		className: cn("inline-flex items-center justify-center rounded-md border px-1.5 py-1", "border-[color:var(--messaging-primary-border,var(--color-blue-200))] bg-[color:var(--messaging-primary-tint,var(--color-blue-50))]"),
+		children: /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3 text-[color:var(--messaging-primary,var(--color-blue-700))]" })
 	});
 	if (messageKind === "private-channel") return /* @__PURE__ */ jsx("div", {
 		className: "inline-flex items-center justify-center rounded-md border border-purple-200 bg-purple-50 px-1.5 py-1",
 		children: /* @__PURE__ */ jsx(Lock, { className: "h-3 w-3 text-purple-700" })
 	});
 	if (messageKind === "broadcast") return /* @__PURE__ */ jsx("div", {
-		className: "inline-flex items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-1.5 py-1",
-		children: /* @__PURE__ */ jsx(Megaphone, { className: "h-3 w-3 text-gray-700" })
+		className: "inline-flex items-center justify-center rounded-md border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-1.5 py-1",
+		children: /* @__PURE__ */ jsx(Megaphone, { className: "h-3 w-3 text-[color:var(--messaging-foreground,var(--color-gray-700))]" })
 	});
 	return null;
 }
@@ -53300,7 +53300,7 @@ function OverdueBadge({ scheduledAt }) {
 //#region ../../messaging/ui/src/components/ScheduledMessageConversationAvatar.tsx
 function ScheduledMessageConversationAvatar({ size, fullConversation, effectiveConversation: _effectiveConversation, otherUsers, channelEmoji, renderImage }) {
 	if (!fullConversation) return /* @__PURE__ */ jsx("div", {
-		className: cn("grid shrink-0 place-items-center overflow-clip rounded-sm bg-[#F5F6F9] text-base leading-5 ring-1 ring-gray-200 ring-inset", size === "lg" ? "h-8 w-8" : "h-6 w-6"),
+		className: cn("grid shrink-0 place-items-center overflow-clip rounded-sm bg-[#F5F6F9] text-base leading-5 ring-1 ring-[color:var(--messaging-border,var(--color-gray-200))] ring-inset", size === "lg" ? "h-8 w-8" : "h-6 w-6"),
 		children: channelEmoji
 	});
 	const { isChannel } = getMessageType(fullConversation);
@@ -53318,7 +53318,7 @@ function ScheduledMessageConversationAvatar({ size, fullConversation, effectiveC
 			className: "h-full w-full object-cover"
 		}) : "#";
 		return /* @__PURE__ */ jsx("div", {
-			className: cn("grid shrink-0 place-items-center overflow-clip rounded-sm bg-gray-50 text-base leading-5 ring-1 ring-gray-200 ring-inset", size === "lg" ? "h-8 w-8" : "h-6 w-6"),
+			className: cn("grid shrink-0 place-items-center overflow-clip rounded-sm bg-[color:var(--messaging-muted,var(--color-gray-50))] text-base leading-5 ring-1 ring-[color:var(--messaging-border,var(--color-gray-200))] ring-inset", size === "lg" ? "h-8 w-8" : "h-6 w-6"),
 			children: emoji || fullConversation.avatar_emoji || fallback
 		});
 	}
@@ -53345,12 +53345,12 @@ function ScheduledMessageTinyAttachment({ attachment }) {
 	if (isImage || isVideo) {
 		const thumb = attachment.thumbnail_url || attachment.image_url || void 0;
 		return /* @__PURE__ */ jsxs("div", {
-			className: "relative size-8 overflow-hidden rounded-md border border-gray-200",
+			className: "relative size-8 overflow-hidden rounded-md border border-[color:var(--messaging-border,var(--color-gray-200))]",
 			children: [thumb ? /* @__PURE__ */ jsx("img", {
 				src: thumb,
 				alt: attachment.filename,
 				className: "size-full object-cover"
-			}) : /* @__PURE__ */ jsx("div", { className: "size-full bg-gray-100" }), isVideo && /* @__PURE__ */ jsx(Play, {
+			}) : /* @__PURE__ */ jsx("div", { className: "size-full bg-[color:var(--messaging-muted,var(--color-gray-100))]" }), isVideo && /* @__PURE__ */ jsx(Play, {
 				className: "absolute [inset:0] top-0 left-0 m-auto grid size-4 place-items-center text-white drop-shadow",
 				fill: "currentColor"
 			})]
@@ -53360,10 +53360,10 @@ function ScheduledMessageTinyAttachment({ attachment }) {
 	const FileIcon = fileConfig.icon;
 	const ext = getFileExtensionFromFilename(attachment.filename).slice(0, 4).toUpperCase();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "isolate flex size-8 shrink-0 flex-col rounded-md border border-white bg-gradient-to-b from-white to-zinc-100 ring-1 ring-gray-300",
+		className: "isolate flex size-8 shrink-0 flex-col rounded-md border border-[color:var(--messaging-border,var(--color-white))] bg-gradient-to-b from-[color:var(--messaging-background,var(--color-white))] to-zinc-100 ring-1 ring-[color:var(--messaging-border,var(--color-gray-300))]",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "mx-0.5 mt-0.5 grid grow place-items-center rounded-t-[0.1875rem] bg-gradient-to-b from-gray-100 to-gray-50",
-			children: /* @__PURE__ */ jsx(FileIcon, { className: "-mb-1.5 size-3 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-gray-300" })
+			className: "mx-0.5 mt-0.5 grid grow place-items-center rounded-t-[0.1875rem] bg-gradient-to-b from-[color:var(--messaging-muted,var(--color-gray-100))] to-[color:var(--messaging-background,var(--color-gray-50))]",
+			children: /* @__PURE__ */ jsx(FileIcon, { className: "-mb-1.5 size-3 mask-t-from-0% mask-t-to-black/30 mask-t-to-100% text-[color:var(--messaging-muted-foreground,var(--color-gray-300))]" })
 		}), /* @__PURE__ */ jsx("div", {
 			className: cn("z-10 m-px mt-0 flex h-3 items-center justify-center rounded-[0.25rem] border text-center text-[9px] leading-3 font-bold text-white text-shadow-2xs", fileConfig.borderColor),
 			style: { background: fileConfig.bgColor },
@@ -53380,7 +53380,7 @@ function ScheduledMessageActionsMenu({ onNavigateConversation, onNavigateEdit, o
 	if (isMobile) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 		type: "button",
 		"aria-label": t("scheduled_action_more_options"),
-		className: "grid h-6 w-6 place-items-center rounded-md text-gray-500 hover:bg-gray-100 active:bg-gray-200",
+		className: "grid h-6 w-6 place-items-center rounded-md text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 		onClick: (event) => {
 			event.stopPropagation();
 			setOpen(true);
@@ -53424,7 +53424,7 @@ function ScheduledMessageActionsMenu({ onNavigateConversation, onNavigateEdit, o
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"aria-label": t("scheduled_action_more_options"),
-			className: "grid h-6 w-6 place-items-center rounded-md text-gray-500 hover:bg-gray-100 active:bg-gray-200",
+			className: "grid h-6 w-6 place-items-center rounded-md text-[color:var(--messaging-muted-foreground,var(--color-gray-500))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 			onClick: (e) => e.stopPropagation(),
 			children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "h-4 w-4" })
 		})
@@ -53435,36 +53435,36 @@ function ScheduledMessageActionsMenu({ onNavigateConversation, onNavigateEdit, o
 			className: "px-0 py-1",
 			children: [
 				/* @__PURE__ */ jsxs(DropdownMenuItem, {
-					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 					onSelect: (event) => {
 						event.preventDefault();
 						onNavigateConversation();
 					},
-					children: [/* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 text-gray-500" }), t("scheduled_action_go_to_conversation")]
+					children: [/* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("scheduled_action_go_to_conversation")]
 				}),
 				/* @__PURE__ */ jsxs(DropdownMenuItem, {
-					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 					onSelect: (event) => {
 						event.preventDefault();
 						onNavigateEdit();
 					},
-					children: [/* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-gray-500" }), t("scheduled_action_edit_message")]
+					children: [/* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("scheduled_action_edit_message")]
 				}),
 				/* @__PURE__ */ jsxs(DropdownMenuItem, {
-					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 					onSelect: (event) => {
 						event.preventDefault();
 						onReschedule();
 					},
-					children: [/* @__PURE__ */ jsx(CalendarClock, { className: "h-4 w-4 text-gray-500" }), t("scheduled_action_reschedule")]
+					children: [/* @__PURE__ */ jsx(CalendarClock, { className: "h-4 w-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("scheduled_action_reschedule")]
 				}),
 				/* @__PURE__ */ jsxs(DropdownMenuItem, {
-					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+					className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-[color:var(--messaging-foreground,var(--color-slate-700))]",
 					onSelect: (event) => {
 						event.preventDefault();
 						onSendNow();
 					},
-					children: [/* @__PURE__ */ jsx(Send, { className: "h-4 w-4 text-gray-500" }), t("scheduled_action_send_now")]
+					children: [/* @__PURE__ */ jsx(Send, { className: "h-4 w-4 text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]" }), t("scheduled_action_send_now")]
 				}),
 				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 				/* @__PURE__ */ jsxs(DropdownMenuItem, {
@@ -53607,10 +53607,10 @@ function ScheduledMessageRow({ message, onToast }) {
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 flex-col justify-center",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "text-messaging-2 capsize mb-2 text-gray-900",
+						className: "text-messaging-2 capsize mb-2 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 						children: channelName
 					}), message.body && /* @__PURE__ */ jsx("div", {
-						className: "-my-1 line-clamp-1 py-1 text-xs leading-4 text-gray-900",
+						className: "-my-1 line-clamp-1 py-1 text-xs leading-4 text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 						children: /* @__PURE__ */ jsx(MessageBody, {
 							mentions: message.mentioned_recipients,
 							children: message.body
@@ -53622,7 +53622,7 @@ function ScheduledMessageRow({ message, onToast }) {
 				children: [
 					/* @__PURE__ */ jsx(OverdueBadge, { scheduledAt }),
 					scheduledAt && /* @__PURE__ */ jsx("div", {
-						className: "text-[9px] leading-3 font-medium text-gray-400",
+						className: "text-[9px] leading-3 font-medium text-[color:var(--messaging-muted-foreground,var(--color-gray-400))]",
 						children: formatScheduledShort(scheduledAt)
 					}),
 					/* @__PURE__ */ jsx(MessageTypeBadge, {
@@ -53663,7 +53663,7 @@ function ScheduledMessageRow({ message, onToast }) {
 			content: /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-sm font-semibold text-black",
+					className: "text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-black))]",
 					children: t("scheduled_send_message_to")
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "inline-flex items-center gap-2",
@@ -53671,7 +53671,7 @@ function ScheduledMessageRow({ message, onToast }) {
 						size: "sm",
 						...avatarProps
 					}), /* @__PURE__ */ jsx("div", {
-						className: "text-sm font-semibold text-gray-900",
+						className: "text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 						children: channelName
 					})]
 				})]
@@ -53701,7 +53701,7 @@ function ScheduledMessageRow({ message, onToast }) {
 			content: /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-sm font-semibold text-black",
+					className: "text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-black))]",
 					children: t("scheduled_delete_message_to")
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "inline-flex items-center gap-2",
@@ -53709,7 +53709,7 @@ function ScheduledMessageRow({ message, onToast }) {
 						size: "sm",
 						...avatarProps
 					}), /* @__PURE__ */ jsx("div", {
-						className: "text-sm font-semibold text-gray-900",
+						className: "text-sm font-semibold text-[color:var(--messaging-foreground,var(--color-gray-900))]",
 						children: channelName
 					})]
 				})]
@@ -53739,7 +53739,7 @@ function ScheduledMessagesView({ onToast }) {
 	if (messages.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "flex min-h-[60vh] items-center justify-center",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "text-center text-gray-500",
+			className: "text-center text-[color:var(--messaging-muted-foreground,var(--color-gray-500))]",
 			children: t("scheduled_no_messages")
 		})
 	});
@@ -53749,7 +53749,7 @@ function ScheduledMessagesView({ onToast }) {
 			className: "flex flex-col gap-2",
 			children: [
 				messages.map((message) => /* @__PURE__ */ jsx("div", {
-					className: "relative isolate w-full rounded-xl border border-gray-200 bg-gray-50 p-4",
+					className: "relative isolate w-full rounded-xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] p-4",
 					children: /* @__PURE__ */ jsx(ScheduledMessageRow, {
 						message,
 						onToast
@@ -53768,7 +53768,7 @@ function ScheduledMessagesView({ onToast }) {
 					children: /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => fetchNextPage(),
-						className: "inline-flex items-center rounded-2xl border border-gray-200 bg-gray-50 px-3 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200",
+						className: "inline-flex items-center rounded-2xl border border-[color:var(--messaging-border,var(--color-gray-200))] bg-[color:var(--messaging-muted,var(--color-gray-50))] px-3 py-0.5 text-xs font-medium text-[color:var(--messaging-foreground,var(--color-gray-700))] hover:bg-[color:var(--messaging-muted,var(--color-gray-100))] active:bg-[color:var(--messaging-muted,var(--color-gray-200))]",
 						children: "Load more"
 					})
 				}),
@@ -54091,4 +54091,4 @@ const messagingScreenPropertySchema = {
 //#endregion
 export { BottomNavVisibilityProvider as a, useMessagingAuth as i, messagingScreenPropertySchema as n, useBottomNavHidden as o, useMessagingConfig as r, MessagingScreen as t };
 
-//# sourceMappingURL=MessagingScreen-DwU7sqzj.mjs.map
+//# sourceMappingURL=MessagingScreen-CNCV4tG2.mjs.map