canvas-ui-sdk 0.3.7 → 0.3.8

package/dist/index.js

@@ -74,7 +74,7 @@ function AvatarFallback({
     {
       "data-slot": "avatar-fallback",
       className: cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
+        "bg-[var(--canvas-surface)] flex size-full items-center justify-center rounded-full",
         className
       ),
       ...props
@@ -412,7 +412,7 @@ var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ref,
     className: cn(
       "peer size-4 shrink-0 rounded-[var(--radius-xs)] border border-[var(--canvas-border-input)]",
-      "bg-white transition-colors",
+      "bg-[var(--canvas-background)] transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]",
       "data-[state=checked]:bg-[var(--canvas-primary)] data-[state=checked]:border-[var(--canvas-primary)]",
@@ -423,7 +423,7 @@ var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     children: /* @__PURE__ */ jsx(
       CheckboxPrimitive.Indicator,
       {
-        className: cn("flex items-center justify-center text-white"),
+        className: cn("flex items-center justify-center text-[var(--canvas-primary-foreground)]"),
         children: /* @__PURE__ */ jsx(Check, { className: "size-3", strokeWidth: 2.5 })
       }
     )
@@ -466,7 +466,7 @@ var DateInput = React13.forwardRef(
       "div",
       {
         className: cn(
-          "flex items-center gap-2 bg-white border border-[var(--canvas-border-input)]",
+          "flex items-center gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]",
           "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)] focus-within:ring-offset-2",
           "has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-[var(--canvas-input-disabled-bg)] has-[:disabled]:border-[var(--canvas-input-disabled-border)]",
           className
@@ -1236,7 +1236,7 @@ var ImageUploader = React13.forwardRef(
                                 disabled: disabled || isFirst,
                                 className: cn(
                                   "flex items-center justify-center rounded-full transition-colors",
-                                  isFirst || disabled ? "bg-[var(--canvas-surface)] border border-[var(--canvas-border)] text-[var(--canvas-text-muted)]" : "bg-[var(--canvas-text)] text-white"
+                                  isFirst || disabled ? "bg-[var(--canvas-surface)] border border-[var(--canvas-border)] text-[var(--canvas-text-muted)]" : "bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)]"
                                 ),
                                 style: { width: "24px", height: "24px" },
                                 children: /* @__PURE__ */ jsx(ChevronLeft, { style: { width: "16px", height: "16px" } })
@@ -1253,7 +1253,7 @@ var ImageUploader = React13.forwardRef(
                                 disabled: disabled || isLast,
                                 className: cn(
                                   "flex items-center justify-center rounded-full transition-colors",
-                                  isLast || disabled ? "bg-[var(--canvas-surface)] border border-[var(--canvas-border)] text-[var(--canvas-text-muted)]" : "bg-[var(--canvas-text)] text-white"
+                                  isLast || disabled ? "bg-[var(--canvas-surface)] border border-[var(--canvas-border)] text-[var(--canvas-text-muted)]" : "bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)]"
                                 ),
                                 style: { width: "24px", height: "24px" },
                                 children: /* @__PURE__ */ jsx(ChevronRight, { style: { width: "16px", height: "16px" } })
@@ -1268,7 +1268,7 @@ var ImageUploader = React13.forwardRef(
                                   handleDelete(image.id);
                                 },
                                 disabled,
-                                className: "flex items-center justify-center rounded-full bg-[var(--canvas-text)] text-white transition-colors",
+                                className: "flex items-center justify-center rounded-full bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)] transition-colors",
                                 style: { width: "24px", height: "24px" },
                                 children: /* @__PURE__ */ jsx(Trash2, { style: { width: "16px", height: "16px" } })
                               }
@@ -1400,7 +1400,7 @@ var MultiselectCheckboxField = React13.forwardRef(
               onClick: () => handleToggle(option.id),
               disabled,
               className: cn(
-                "flex items-center gap-2 bg-white border overflow-hidden transition-colors",
+                "flex items-center gap-2 bg-[var(--canvas-background)] border overflow-hidden transition-colors",
                 "focus:outline-none focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2",
                 isSelected ? "border-[var(--canvas-primary)]" : "border-[var(--canvas-border-input)]",
                 disabled && "cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)] opacity-60"
@@ -1422,7 +1422,7 @@ var MultiselectCheckboxField = React13.forwardRef(
                   {
                     className: cn(
                       "flex items-center justify-center shrink-0 rounded-[var(--radius-xs)] border transition-colors",
-                      isSelected ? "bg-[var(--canvas-primary)] border-[var(--canvas-primary)]" : "bg-white border-[var(--canvas-border-input)]",
+                      isSelected ? "bg-[var(--canvas-primary)] border-[var(--canvas-primary)]" : "bg-[var(--canvas-background)] border-[var(--canvas-border-input)]",
                       disabled && "opacity-60"
                     ),
                     style: {
@@ -1432,7 +1432,7 @@ var MultiselectCheckboxField = React13.forwardRef(
                     children: isSelected && /* @__PURE__ */ jsx(
                       Check,
                       {
-                        className: "text-white",
+                        className: "text-[var(--canvas-primary-foreground)]",
                         style: {
                           width: inputSize === "sm" ? "12px" : "16px",
                           height: inputSize === "sm" ? "12px" : "16px"
@@ -1489,7 +1489,7 @@ var MultiselectTags = React13.forwardRef(
       "div",
       {
         className: cn(
-          "flex flex-wrap items-center gap-1.5 bg-white border border-[var(--canvas-border-input)] p-1.5",
+          "flex flex-wrap items-center gap-1.5 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] p-1.5",
           "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)] focus-within:ring-offset-2",
           disabled && "cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)]",
           className
@@ -1603,7 +1603,7 @@ function RadioGroupItem({
     {
       "data-slot": "radio-group-item",
       className: cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-[var(--canvas-border-input)] bg-white transition-colors",
+        "aspect-square size-4 shrink-0 rounded-full border border-[var(--canvas-border-input)] bg-[var(--canvas-background)] transition-colors",
         "outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
         "aria-invalid:border-[var(--canvas-border-input-invalid)] aria-invalid:ring-[var(--canvas-border-input-invalid)]/20",
         "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]",
@@ -1632,7 +1632,7 @@ var TextInput = React13.forwardRef(
         ref,
         disabled,
         className: cn(
-          "w-full bg-white border border-[var(--canvas-border-input)]",
+          "w-full bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]",
           "text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]",
           "focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2",
           "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)]",
@@ -1781,7 +1781,7 @@ var Searchbox = React13.forwardRef(
       "div",
       {
         className: cn(
-          "flex items-center gap-2 bg-white border border-[var(--canvas-border-input)]",
+          "flex items-center gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]",
           "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)] focus-within:ring-offset-2",
           "has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-[var(--canvas-input-disabled-bg)] has-[:disabled]:border-[var(--canvas-input-disabled-border)]",
           className
@@ -1822,7 +1822,7 @@ var Searchbox = React13.forwardRef(
 Searchbox.displayName = "Searchbox";
 var selectTriggerVariants = cva(
   // Base styles using CSS variables
-  "flex w-full items-center justify-between gap-2 bg-white border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]",
+  "flex w-full items-center justify-between gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]",
   {
     variants: {
       inputSize: {
@@ -2059,7 +2059,7 @@ var SelectablePills = React13.forwardRef(
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
                 "disabled:cursor-not-allowed disabled:opacity-50",
                 styles.pill,
-                isSelected ? "bg-[var(--canvas-surface-brand)] border-[var(--canvas-primary)] text-[var(--canvas-primary)]" : "bg-white border-[var(--canvas-border)] text-[var(--canvas-text-muted)] hover:border-[var(--canvas-text-muted)]"
+                isSelected ? "bg-[var(--canvas-surface-brand)] border-[var(--canvas-primary)] text-[var(--canvas-primary)]" : "bg-[var(--canvas-background)] border-[var(--canvas-border)] text-[var(--canvas-text-muted)] hover:border-[var(--canvas-text-muted)]"
               ),
               children: option.label
             },
@@ -2939,7 +2939,7 @@ var Slider = React13.forwardRef(({
             SliderPrimitive.Thumb,
             {
               className: cn(
-                "block rounded-full border-2 border-white bg-[var(--canvas-primary)]",
+                "block rounded-full border-2 border-[var(--canvas-background)] bg-[var(--canvas-primary)]",
                 "shadow-[0px_1px_2px_0px_rgba(0,0,0,0.08)]",
                 "ring-offset-background transition-colors",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
@@ -2986,7 +2986,7 @@ function Switch({
         {
           "data-slot": "switch-thumb",
           className: cn(
-            "pointer-events-none block size-4 rounded-full bg-white ring-0 transition-transform",
+            "pointer-events-none block size-4 rounded-full bg-[var(--canvas-background)] ring-0 transition-transform",
             "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
           )
         }
@@ -3054,7 +3054,7 @@ function TabsContent({
 }
 var textareaVariants = cva(
   // Base styles using CSS variables
-  "flex w-full bg-white border border-[var(--canvas-border-input)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] transition-colors resize-none focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)]",
+  "flex w-full bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] transition-colors resize-none focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)]",
   {
     variants: {
       inputSize: {
@@ -3122,8 +3122,20 @@ var colorVariables = [
       { name: "--canvas-primary", default: "#1165ef", label: "Primary" },
       { name: "--canvas-primary-dark", default: "#093378", label: "Primary Dark" },
       { name: "--canvas-primary-foreground", default: "#ffffff", label: "Primary Text" },
-      { name: "--canvas-flair-bg", default: "#093378", label: "Flair Background" },
-      { name: "--canvas-destructive", default: "#ef4444", label: "Destructive" }
+      { name: "--canvas-flair-bg", default: "#093378", label: "Flair Background" }
+    ]
+  },
+  {
+    category: "Status",
+    variables: [
+      { name: "--canvas-success", default: "#08875d", label: "Success" },
+      { name: "--canvas-success-surface", default: "#edfdf8", label: "Success Surface" },
+      { name: "--canvas-warning", default: "#d97706", label: "Warning" },
+      { name: "--canvas-warning-surface", default: "#fffbeb", label: "Warning Surface" },
+      { name: "--canvas-info", default: "#2563eb", label: "Info" },
+      { name: "--canvas-info-surface", default: "#eff6ff", label: "Info Surface" },
+      { name: "--canvas-destructive", default: "#ef4444", label: "Destructive" },
+      { name: "--canvas-destructive-surface", default: "#fef2f2", label: "Destructive Surface" }
     ]
   },
   {
@@ -4049,7 +4061,7 @@ function Header({
   return /* @__PURE__ */ jsxs(
     "header",
     {
-      className: `h-[var(--header-height)] w-full border-b ${isDark ? "bg-[var(--canvas-sidebar-dark-bg)] border-[var(--canvas-sidebar-dark-border)]" : "bg-white border-[var(--canvas-neutral-border)]"}`,
+      className: `h-[var(--header-height)] w-full border-b ${isDark ? "bg-[var(--canvas-sidebar-dark-bg)] border-[var(--canvas-sidebar-dark-border)]" : "bg-[var(--canvas-background)] border-[var(--canvas-neutral-border)]"}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center h-full px-4 lg:px-[var(--spacing-5xl)]", children: [
           /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-[var(--spacing-md)] h-8 shrink-0 ${showDesktopLogo ? "" : "lg:hidden"}`, children: [
@@ -4203,7 +4215,7 @@ function Header({
               onClick: () => setIsMobileMenuOpen(false)
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-0 h-full w-full max-w-sm bg-white shadow-xl", children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-0 h-full w-full max-w-sm bg-[var(--canvas-background)] shadow-xl", children: [
             /* @__PURE__ */ jsx("div", { className: "flex justify-end p-4", children: /* @__PURE__ */ jsx(
               Button,
               {
@@ -4516,7 +4528,7 @@ function Sidebar2({
       className: cn(
         "flex flex-col h-full w-[var(--sidebar-width)]",
         isDark && "bg-[var(--canvas-sidebar-dark-bg)] border-r border-[var(--canvas-sidebar-dark-border)]",
-        !isDark && "bg-white border-r border-[var(--canvas-border)]",
+        !isDark && "bg-[var(--canvas-background)] border-r border-[var(--canvas-border)]",
         className
       ),
       children: [
@@ -4545,9 +4557,9 @@ function Sidebar2({
               })() })
             ] }),
             /* @__PURE__ */ jsx("span", { className: cn(
-              "text-xl font-semibold ml-[var(--spacing-md)]",
+              "font-semibold ml-[var(--spacing-md)]",
               isDark ? "text-white" : "text-[var(--canvas-text)]"
-            ), children: branding.wordmark || "canvas" })
+            ), style: { fontSize: "var(--typo-body-xl-size)" }, children: branding.wordmark || "canvas" })
           ] })
         ) }),
         /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 px-[var(--spacing-2xl)] pb-[var(--spacing-5xl)]", children: /* @__PURE__ */ jsx(
@@ -4650,7 +4662,7 @@ function DashboardShell({
     onAppMenuClick?.();
     console.log("App menu clicked - implement app-level mobile menu here");
   };
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("div", { className: "fixed top-0 left-0 right-0 lg:left-[var(--sidebar-width)] z-40", children: /* @__PURE__ */ jsx(Header, { onMenuClick: handleAppMenuClick }) }),
     /* @__PURE__ */ jsx("div", { className: "hidden lg:block fixed top-0 left-0 bottom-0 z-50 w-[var(--sidebar-width)]", children: /* @__PURE__ */ jsx(
       Sidebar2,
@@ -4669,7 +4681,7 @@ function DashboardShell({
           "top-[calc(var(--header-height)+4px)]",
           "flex items-center justify-center",
           "size-11",
-          "bg-white",
+          "bg-[var(--canvas-background)]",
           "border border-l-0 border-[var(--canvas-neutral-border)]",
           "rounded-r-[var(--radius-xs)]",
           "shadow-[0px_4px_16px_0px_rgba(0,0,0,0.04)]",
@@ -4852,7 +4864,7 @@ function IconSidebar({
       className: cn(
         "flex flex-col items-center h-full w-[var(--icon-sidebar-width)]",
         isDark && "bg-[var(--canvas-sidebar-dark-bg)] border-r border-[var(--canvas-sidebar-dark-border)]",
-        !isDark && "bg-white border-r border-[var(--canvas-border)]",
+        !isDark && "bg-[var(--canvas-background)] border-r border-[var(--canvas-border)]",
         className
       ),
       children: [
@@ -4908,7 +4920,7 @@ function IconSidebarShell({
     onAppMenuClick?.();
     console.log("App menu clicked - implement app-level mobile menu here");
   };
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("div", { className: "fixed top-0 left-0 right-0 lg:left-[var(--icon-sidebar-width)] z-40", children: /* @__PURE__ */ jsx(Header, { onMenuClick: handleAppMenuClick }) }),
     /* @__PURE__ */ jsx("div", { className: "hidden lg:block fixed top-0 left-0 bottom-0 z-50 w-[var(--icon-sidebar-width)]", children: /* @__PURE__ */ jsx(
       IconSidebar,
@@ -4927,7 +4939,7 @@ function IconSidebarShell({
           "top-[calc(var(--header-height)+4px)]",
           "flex items-center justify-center",
           "size-11",
-          "bg-white",
+          "bg-[var(--canvas-background)]",
           "border border-l-0 border-[var(--canvas-neutral-border)]",
           "rounded-r-[var(--radius-xs)]",
           "shadow-[0px_4px_16px_0px_rgba(0,0,0,0.04)]",
@@ -5210,7 +5222,7 @@ function DoubleSidebar({
         className: cn(
           "flex flex-col items-center w-[var(--icon-sidebar-width)] shrink-0",
           isIconDark && "bg-[var(--canvas-sidebar-dark-bg)] border-r border-[var(--canvas-sidebar-dark-border)]",
-          !isIconDark && "bg-white border-r border-[var(--canvas-border)]"
+          !isIconDark && "bg-[var(--canvas-background)] border-r border-[var(--canvas-border)]"
         ),
         children: [
           /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center shrink-0 py-5 ${isMounted ? "opacity-100" : "opacity-0"}`, children: logoUrl ? /* @__PURE__ */ jsx(
@@ -5249,7 +5261,7 @@ function DoubleSidebar({
         className: cn(
           "flex flex-col w-[var(--nav-sidebar-width)]",
           isNavDark && "bg-[var(--canvas-sidebar-dark-bg)] border-r border-[var(--canvas-sidebar-dark-border)]",
-          !isNavDark && "bg-white border-r border-[var(--canvas-border)] shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]"
+          !isNavDark && "bg-[var(--canvas-background)] border-r border-[var(--canvas-border)] shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]"
         ),
         children: /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 pt-[var(--header-height)] px-[var(--spacing-2xl)] pb-[var(--spacing-5xl)]", children: /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-0", children: activeSection?.tabs.map((tab) => /* @__PURE__ */ jsx(
           NavTabItem,
@@ -5285,7 +5297,7 @@ function DoubleSidebarShell({
     onAppMenuClick?.();
     console.log("App menu clicked - implement app-level mobile menu here");
   };
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("div", { className: "fixed top-0 left-0 right-0 lg:left-[var(--double-sidebar-width)] z-40", children: /* @__PURE__ */ jsx(Header, { onMenuClick: handleAppMenuClick }) }),
     /* @__PURE__ */ jsx("div", { className: "hidden lg:block fixed top-0 left-0 bottom-0 z-50 w-[var(--double-sidebar-width)]", children: /* @__PURE__ */ jsx(
       DoubleSidebar,
@@ -5305,7 +5317,7 @@ function DoubleSidebarShell({
           "top-[calc(var(--header-height)+4px)]",
           "flex items-center justify-center",
           "size-11",
-          "bg-white",
+          "bg-[var(--canvas-background)]",
           "border border-l-0 border-[var(--canvas-neutral-border)]",
           "rounded-r-[var(--radius-xs)]",
           "shadow-[0px_4px_16px_0px_rgba(0,0,0,0.04)]",
@@ -5434,14 +5446,13 @@ function PageHeaderSection({
           /* @__PURE__ */ jsx(
             "h2",
             {
-              className: "text-4xl",
               style: {
-                fontFamily: "var(--typo-page-title-font, var(--typo-global-font))",
-                fontSize: "var(--typo-page-title-size)",
-                fontWeight: "var(--typo-page-title-weight)",
-                letterSpacing: "var(--typo-page-title-spacing)",
-                lineHeight: "var(--typo-page-title-line-height)",
-                color: "var(--typo-page-title-color)"
+                fontFamily: "var(--typo-h4-font, var(--typo-global-font))",
+                fontSize: "var(--typo-h4-size)",
+                fontWeight: "var(--typo-h4-weight)",
+                letterSpacing: "var(--typo-h4-spacing)",
+                lineHeight: "var(--typo-h4-line-height)",
+                color: "var(--typo-h4-color)"
               },
               children: title
             }
@@ -5450,12 +5461,12 @@ function PageHeaderSection({
             "p",
             {
               style: {
-                fontFamily: "var(--typo-page-desc-font, var(--typo-global-font))",
-                fontSize: "var(--typo-page-desc-size)",
-                fontWeight: "var(--typo-page-desc-weight)",
-                letterSpacing: "var(--typo-page-desc-spacing)",
-                lineHeight: "var(--typo-page-desc-line-height)",
-                color: "var(--typo-page-desc-color-muted)"
+                fontFamily: "var(--typo-body-m-font, var(--typo-global-font))",
+                fontSize: "var(--typo-body-m-size)",
+                fontWeight: "var(--typo-body-m-weight)",
+                letterSpacing: "var(--typo-body-m-spacing)",
+                lineHeight: "var(--typo-body-m-line-height)",
+                color: "var(--typo-body-m-color-muted)"
               },
               children: description
             }
@@ -5498,7 +5509,7 @@ function StandardPageShell({
     onAppMenuClick?.();
     console.log("App menu clicked - implement app-level mobile menu here");
   };
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-40", children: /* @__PURE__ */ jsx(Header, { onMenuClick: handleAppMenuClick, showDesktopLogo: true }) }),
     (showBanner || showPageHeader) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
       showBanner && /* @__PURE__ */ jsx(FlairBanner, { title: bannerTitle }),
@@ -5565,12 +5576,13 @@ function MobileNavTab({ item, variant = "light", onClick }) {
           {
             className: cn(
               // Match icon-sidebar: 12px labels, medium weight
-              "text-xs font-medium",
+              "font-medium",
               isDark && isActive && "text-[var(--canvas-sidebar-dark-active-text)]",
               isDark && !isActive && "text-[var(--canvas-sidebar-dark-text)]",
               !isDark && isActive && "text-[var(--canvas-sidebar-light-active-text)]",
               !isDark && !isActive && "text-[var(--canvas-sidebar-light-text)]"
             ),
+            style: { fontSize: "var(--typo-sidebar-label-size)" },
             children: item.label
           }
         )
@@ -5642,7 +5654,7 @@ function MobileMenuShell({
       setInternalActiveTab(tab.id);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-40", children: /* @__PURE__ */ jsx(Header, { showDesktopLogo: true }) }),
     /* @__PURE__ */ jsx("main", { className: "w-full", children: /* @__PURE__ */ jsx(
       "div",
@@ -5687,7 +5699,7 @@ function SearchBar({
     {
       className: cn(
         "flex items-center gap-2",
-        "bg-white border border-[var(--canvas-border-input)]",
+        "bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]",
         "pr-2",
         "transition-colors",
         "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)] focus-within:ring-offset-2",
@@ -5776,7 +5788,7 @@ var defaultDateRange = {
 };
 function FilterDropdown({ config, value, onChange }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: config.label }),
+    /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: config.label }),
     /* @__PURE__ */ jsxs(Select, { value: value || void 0, onValueChange: onChange, children: [
       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: config.placeholder }) }),
       /* @__PURE__ */ jsx(SelectContent, { position: "popper", side: "bottom", sideOffset: 4, children: config.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
@@ -5851,7 +5863,7 @@ function FilterPopover({
     "button",
     {
       className: cn(
-        "flex items-center justify-between gap-2 bg-white border text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 data-[state=open]:border-[var(--canvas-border-input-focus)]",
+        "flex items-center justify-between gap-2 bg-[var(--canvas-background)] border text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 data-[state=open]:border-[var(--canvas-border-input-focus)]",
         className
       ),
       style: {
@@ -5881,15 +5893,15 @@ function FilterPopover({
         side: "bottom",
         sideOffset: 4,
         avoidCollisions: false,
-        className: "w-80 p-0 bg-white border border-[var(--canvas-border)] shadow-lg",
+        className: "w-80 p-0 bg-[var(--canvas-background)] border border-[var(--canvas-border)] shadow-lg",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-5 max-h-[480px] overflow-y-auto", children: [
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: "Text Input" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Text Input" }),
               /* @__PURE__ */ jsx(TextInput, { inputSize: "sm", placeholder: "Enter text..." })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: "Searchbox" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Searchbox" }),
               /* @__PURE__ */ jsx(Searchbox, { inputSize: "sm", placeholder: "Search..." })
             ] }),
             dropdowns.slice(0, 1).map((dropdown) => /* @__PURE__ */ jsx(
@@ -5902,11 +5914,11 @@ function FilterPopover({
               dropdown.id
             )),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: "Date Input" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Date Input" }),
               /* @__PURE__ */ jsx(DateInput, { inputSize: "sm" })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: "Radio Buttons" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Radio Buttons" }),
               /* @__PURE__ */ jsxs(RadioGroup2, { defaultValue: "option1", className: "flex", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx(RadioGroupItem, { value: "option1", id: "radio1" }),
@@ -5935,7 +5947,7 @@ function FilterPopover({
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: "Radio Buttons List" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Radio Buttons List" }),
               /* @__PURE__ */ jsxs(RadioGroup2, { defaultValue: "list-opt1", className: "flex flex-col gap-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx(RadioGroupItem, { value: "list-opt1", id: "radio-list-1" }),
@@ -5976,7 +5988,7 @@ function FilterPopover({
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: "Checkbox" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Checkbox" }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(Checkbox, { id: "single-checkbox" }),
                 /* @__PURE__ */ jsx(
@@ -5991,7 +6003,7 @@ function FilterPopover({
               ] })
             ] }),
             checkboxGroup && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: "Checkbox List" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Checkbox List" }),
               /* @__PURE__ */ jsx("div", { className: "space-y-2", children: checkboxGroup.options.map((option) => /* @__PURE__ */ jsx(
                 CheckboxWithLabel,
                 {
@@ -6003,7 +6015,7 @@ function FilterPopover({
               )) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: "Toggle" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Toggle" }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(Switch, { id: "toggle-switch" }),
                 /* @__PURE__ */ jsx(
@@ -6018,7 +6030,7 @@ function FilterPopover({
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text-muted)]", children: "Multiselect Tags" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Multiselect Tags" }),
               /* @__PURE__ */ jsx(MultiselectTags, { inputSize: "sm", tags: ["Tag 1", "Tag 2"], placeholder: "Add..." })
             ] })
           ] }),
@@ -6074,7 +6086,7 @@ function SearchBarShell({
     setFilterState(clearedState);
     onFilterApply?.(clearedState);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-40", children: /* @__PURE__ */ jsx(Header, { showDesktopLogo: true }) }),
     /* @__PURE__ */ jsx(FlairBanner, { title: bannerTitle }),
     /* @__PURE__ */ jsx(
@@ -6187,12 +6199,12 @@ function StepTracker({
                       onStepClick && "cursor-pointer",
                       !onStepClick && "cursor-default",
                       isCompleted && "bg-[var(--canvas-primary)] border-[var(--canvas-primary)] text-[var(--canvas-primary-foreground)]",
-                      isActive && "bg-white border-[var(--canvas-primary)] text-[var(--canvas-primary)]",
+                      isActive && "bg-[var(--canvas-background)] border-[var(--canvas-primary)] text-[var(--canvas-primary)]",
                       isUpcoming && "bg-[var(--canvas-border)] border-[var(--canvas-border)] text-[var(--canvas-text-placeholder)]"
                     ),
                     style: {
                       fontFamily: "var(--typo-body-m-font, var(--typo-global-font))",
-                      fontSize: "16px",
+                      fontSize: "var(--typo-body-m-size)",
                       fontWeight: 500
                     },
                     children: /* @__PURE__ */ jsx("span", { children: index + 1 })
@@ -6251,7 +6263,7 @@ function MultistepShell({
   const currentStepData = steps[currentStep];
   const isFirstStep = currentStep === 0;
   const isLastStep = currentStep === steps.length - 1;
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-40", children: /* @__PURE__ */ jsx(Header, { onMenuClick: handleAppMenuClick, showDesktopLogo: true }) }),
     /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
       StepTracker,
@@ -6286,7 +6298,7 @@ function MultistepShell({
   ] });
 }
 var cardClassName = cn(
-  "bg-white border border-[var(--canvas-border)]",
+  "bg-[var(--canvas-background)] border border-[var(--canvas-border)]",
   "rounded-xl p-8"
 );
 function InfoCard({
@@ -6301,7 +6313,7 @@ function InfoCard({
         className: "text-[var(--canvas-text-placeholder)] font-semibold mb-4",
         style: {
           fontFamily: "var(--typo-body-m-font, var(--typo-global-font))",
-          fontSize: "16px"
+          fontSize: "var(--typo-body-m-size)"
         },
         children: title
       }
@@ -6312,7 +6324,7 @@ function InfoCard({
         className: "text-[var(--canvas-text-muted)] whitespace-pre-line",
         style: {
           fontFamily: "var(--typo-body-m-font, var(--typo-global-font))",
-          fontSize: "16px",
+          fontSize: "var(--typo-body-m-size)",
           lineHeight: "24px"
         },
         children: description
@@ -6338,7 +6350,7 @@ function LinksCard({
         className: "text-[var(--canvas-text-placeholder)] font-semibold mb-4",
         style: {
           fontFamily: "var(--typo-body-m-font, var(--typo-global-font))",
-          fontSize: "16px"
+          fontSize: "var(--typo-body-m-size)"
         },
         children: title
       }
@@ -6353,7 +6365,7 @@ function LinksCard({
             className: "text-[var(--canvas-primary)] font-medium",
             style: {
               fontFamily: "var(--typo-body-m-font, var(--typo-global-font))",
-              fontSize: "16px"
+              fontSize: "var(--typo-body-m-size)"
             },
             children: link.label
           }
@@ -6408,7 +6420,7 @@ function MultistepSidebarShell({
   const currentStepData = steps[currentStep];
   const isFirstStep = currentStep === 0;
   const isLastStep = currentStep === steps.length - 1;
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-40", children: /* @__PURE__ */ jsx(Header, { onMenuClick: handleAppMenuClick, showDesktopLogo: true }) }),
     /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
       StepTracker,
@@ -6517,7 +6529,7 @@ function MultistepProgressBarShell({
   };
   const currentStepData = steps[currentStep] || { title: `Step ${currentStep + 1}`, description: "Description" };
   const totalSteps = steps.length;
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-40", children: /* @__PURE__ */ jsx(Header, { onMenuClick: handleAppMenuClick, showDesktopLogo: true }) }),
     /* @__PURE__ */ jsx(FlairBanner, { title: bannerTitle }),
     /* @__PURE__ */ jsx(
@@ -6604,7 +6616,7 @@ function VerticalStepTracker({
                 (isActive || isCompleted) && "bg-[var(--canvas-primary)] border-[var(--canvas-primary)]",
                 !isActive && !isCompleted && "bg-[var(--canvas-border)] border-[var(--canvas-border)]"
               ),
-              children: /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-white" })
+              children: /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-[var(--canvas-background)]" })
             }
           ),
           !isLast && /* @__PURE__ */ jsx(
@@ -6679,7 +6691,7 @@ function VerticalMultistepShell({
   const currentStepData = steps[currentStep];
   const isFirstStep = currentStep === 0;
   const isLastStep = currentStep === steps.length - 1;
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-40", children: /* @__PURE__ */ jsx(Header, { onMenuClick: handleAppMenuClick, showDesktopLogo: true }) }),
     /* @__PURE__ */ jsx(FlairBanner, { title: bannerTitle }),
     /* @__PURE__ */ jsx("div", { className: "w-full border-b border-[var(--canvas-border)]", children: /* @__PURE__ */ jsxs(
@@ -6696,12 +6708,12 @@ function VerticalMultistepShell({
             "h2",
             {
               style: {
-                fontFamily: "var(--typo-page-title-font, var(--typo-global-font))",
-                fontSize: "var(--typo-page-title-size)",
-                fontWeight: "var(--typo-page-title-weight)",
-                letterSpacing: "var(--typo-page-title-spacing)",
-                lineHeight: "var(--typo-page-title-line-height)",
-                color: "var(--typo-page-title-color)"
+                fontFamily: "var(--typo-h4-font, var(--typo-global-font))",
+                fontSize: "var(--typo-h4-size)",
+                fontWeight: "var(--typo-h4-weight)",
+                letterSpacing: "var(--typo-h4-spacing)",
+                lineHeight: "var(--typo-h4-line-height)",
+                color: "var(--typo-h4-color)"
               },
               children: pageTitle
             }
@@ -6710,12 +6722,12 @@ function VerticalMultistepShell({
             "p",
             {
               style: {
-                fontFamily: "var(--typo-page-desc-font, var(--typo-global-font))",
-                fontSize: "var(--typo-page-desc-size)",
-                fontWeight: "var(--typo-page-desc-weight)",
-                letterSpacing: "var(--typo-page-desc-spacing)",
-                lineHeight: "var(--typo-page-desc-line-height)",
-                color: "var(--typo-page-desc-color-muted)"
+                fontFamily: "var(--typo-body-m-font, var(--typo-global-font))",
+                fontSize: "var(--typo-body-m-size)",
+                fontWeight: "var(--typo-body-m-weight)",
+                letterSpacing: "var(--typo-body-m-spacing)",
+                lineHeight: "var(--typo-body-m-line-height)",
+                color: "var(--typo-body-m-color-muted)"
               },
               children: pageDescription
             }
@@ -6739,7 +6751,7 @@ function VerticalMultistepShell({
               className: cn(
                 "lg:w-[320px]",
                 // Desktop card styling
-                "lg:bg-white lg:border lg:border-[var(--canvas-border)]",
+                "lg:bg-[var(--canvas-background)] lg:border lg:border-[var(--canvas-border)]",
                 "lg:rounded-[var(--radius-xl)]",
                 "lg:p-6"
               ),
@@ -6792,24 +6804,24 @@ function AccountSettingsShell({
       setInternalActiveTab(tab);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-40", children: /* @__PURE__ */ jsx(Header, { showDesktopLogo: true }) }),
     /* @__PURE__ */ jsx("div", { className: "w-full border-b border-[var(--canvas-neutral-border)]", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-[1200px] mx-auto px-[var(--spacing-xl)] py-[var(--spacing-6xl)]", children: /* @__PURE__ */ jsx(
       "h1",
       {
         style: {
-          fontFamily: "var(--typo-page-title-font)",
-          fontSize: "var(--typo-page-title-size)",
-          fontWeight: "var(--typo-page-title-weight)",
-          lineHeight: "var(--typo-page-title-line-height)",
-          letterSpacing: "var(--typo-page-title-spacing)",
-          color: "var(--typo-page-title-color)"
+          fontFamily: "var(--typo-h4-font, var(--typo-global-font))",
+          fontSize: "var(--typo-h4-size)",
+          fontWeight: "var(--typo-h4-weight)",
+          lineHeight: "var(--typo-h4-line-height)",
+          letterSpacing: "var(--typo-h4-spacing)",
+          color: "var(--typo-h4-color)"
         },
         children: pageTitle
       }
     ) }) }),
     /* @__PURE__ */ jsx("main", { className: "w-full flex justify-center pb-[var(--spacing-8xl)]", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-[1200px] px-[var(--spacing-xl)] pt-[var(--spacing-5xl)]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-[var(--spacing-5xl)]", children: [
-      /* @__PURE__ */ jsx("aside", { className: "w-full lg:w-[320px] shrink-0", children: /* @__PURE__ */ jsx("div", { className: "bg-white border border-[var(--canvas-neutral-border)] rounded-[var(--radius-lg)] p-[var(--spacing-xl)] lg:p-[var(--spacing-4xl)]", children: /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-0", children: accountTabs.map((tab) => {
+      /* @__PURE__ */ jsx("aside", { className: "w-full lg:w-[320px] shrink-0", children: /* @__PURE__ */ jsx("div", { className: "bg-[var(--canvas-background)] border border-[var(--canvas-neutral-border)] rounded-[var(--radius-lg)] p-[var(--spacing-xl)] lg:p-[var(--spacing-4xl)]", children: /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-0", children: accountTabs.map((tab) => {
         const Icon2 = tab.icon;
         const isActive = activeTab === tab.id;
         return /* @__PURE__ */ jsxs(
@@ -6962,7 +6974,7 @@ function ProjectContextShell({
               return /* @__PURE__ */ jsx(IconComponent, { weight: "bold", size: 18, color: branding.iconColor || "var(--canvas-primary-foreground)" });
             })() })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold ml-2.5 text-[var(--canvas-text)]", children: branding.wordmark || "canvas" })
+          /* @__PURE__ */ jsx("span", { className: "font-semibold ml-2.5 text-[var(--canvas-text)]", style: { fontSize: "var(--typo-body-xl-size)" }, children: branding.wordmark || "canvas" })
         ] })
       ) }) }),
       /* @__PURE__ */ jsx("nav", { className: "flex-1 p-2", children: tabs.map((tab) => {
@@ -6978,18 +6990,18 @@ function ProjectContextShell({
             ),
             children: [
               /* @__PURE__ */ jsx(Icon2, { className: "size-4 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: tab.label })
+              /* @__PURE__ */ jsx("span", { className: "font-medium", style: { fontSize: "var(--typo-body-s-size)" }, children: tab.label })
             ]
           },
           tab.id
         );
       }) }),
-      /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-[var(--canvas-border)]", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-[var(--canvas-surface)] p-3", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)] leading-relaxed", children: "\u{1F4A1} Use the prompt templates to generate content with Cursor AI" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-[var(--canvas-border)]", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-[var(--canvas-surface)] p-3", children: /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)] leading-relaxed", style: { fontSize: "var(--typo-body-xs-size)" }, children: "\u{1F4A1} Use the prompt templates to generate content with Cursor AI" }) }) })
     ] }),
     /* @__PURE__ */ jsxs("main", { className: "flex-1 flex flex-col min-w-0 overflow-hidden", children: [
       /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--canvas-border)] px-8 py-6 bg-[var(--canvas-background)]", children: activeTabConfig && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-[var(--canvas-text)]", children: activeTabConfig.label }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--canvas-text-muted)]", children: activeTabConfig.description })
+        /* @__PURE__ */ jsx("h2", { className: "font-semibold text-[var(--canvas-text)]", style: { fontSize: "var(--typo-body-xl-size)" }, children: activeTabConfig.label }),
+        /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: activeTabConfig.description })
       ] }) }),
       /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-8", children }) })
     ] })
@@ -7026,8 +7038,8 @@ function ChatBubble({ message }) {
       /* @__PURE__ */ jsx(
         AvatarFallback,
         {
-          className: "text-[8px]",
           style: {
+            fontSize: "8px",
             backgroundColor: "var(--canvas-subtle)",
             color: "var(--canvas-muted-foreground)"
           },
@@ -7062,8 +7074,9 @@ function ChatDateSeparator({ date }) {
   return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
     "span",
     {
-      className: "text-xs font-medium",
+      className: "font-medium",
       style: {
+        fontSize: "var(--typo-body-xs-size)",
         color: "var(--canvas-muted-foreground)"
       },
       children: date
@@ -7094,10 +7107,11 @@ function MessengerInput({
           {
             placeholder: "Send a message",
             rows: 2,
-            className: "w-full p-3 resize-none focus:outline-none text-xs",
+            className: "w-full p-3 resize-none focus:outline-none",
             style: {
               backgroundColor: "transparent",
               color: "var(--canvas-foreground)",
+              fontSize: "var(--typo-body-xs-size)",
               lineHeight: "var(--typo-body-xs-line-height)"
             }
           }
@@ -7135,8 +7149,7 @@ function MessengerInput({
                   /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: "text-xs",
-                      style: { color: "var(--canvas-muted-foreground)" },
+                      style: { color: "var(--canvas-muted-foreground)", fontSize: "var(--typo-body-xs-size)" },
                       children: attachment.name
                     }
                   ),
@@ -7194,10 +7207,11 @@ function MessengerInput({
                 "button",
                 {
                   onClick: onSend,
-                  className: "h-10 px-[var(--spacing-lg)] rounded-[var(--radius-xs)] font-semibold text-xs transition-colors hover:opacity-90",
+                  className: "h-10 px-[var(--spacing-lg)] rounded-[var(--radius-xs)] font-semibold transition-colors hover:opacity-90",
                   style: {
                     backgroundColor: "var(--canvas-primary)",
-                    color: "var(--canvas-primary-foreground)"
+                    color: "var(--canvas-primary-foreground)",
+                    fontSize: "var(--typo-body-xs-size)"
                   },
                   children: "Send"
                 }
@@ -7268,7 +7282,7 @@ function MessengerSidebar({
                   className: "font-semibold",
                   style: {
                     color: "var(--canvas-foreground)",
-                    fontSize: "20px",
+                    fontSize: "var(--typo-body-xl-size)",
                     lineHeight: "28px"
                   },
                   children: "Messages"
@@ -7354,8 +7368,8 @@ function ThreadRow({ thread, isSelected, onSelect }) {
             /* @__PURE__ */ jsx(
               AvatarFallback,
               {
-                className: "text-xs",
                 style: {
+                  fontSize: "var(--typo-body-xs-size)",
                   backgroundColor: "var(--canvas-primary)",
                   color: "var(--canvas-primary-foreground)"
                 },
@@ -7882,7 +7896,7 @@ function ContentDropzone({
     {
       className: cn(
         "flex items-center justify-center",
-        "bg-white",
+        "bg-[var(--canvas-background)]",
         "border-2 border-dashed border-[var(--canvas-border)]",
         "rounded-[var(--radius-nav)]",
         "overflow-hidden",
@@ -8095,7 +8109,7 @@ function EmptyState({ icon, title, description, className }) {
       children: [
         /* @__PURE__ */ jsx("span", { className: "text-4xl mb-3", children: icon }),
         /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)] font-medium text-center", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--canvas-text-placeholder)] text-center mt-1 max-w-md", children: description })
+        description && /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-placeholder)] text-center mt-1 max-w-md", style: { fontSize: "var(--typo-body-s-size)" }, children: description })
       ]
     }
   );
@@ -9006,12 +9020,12 @@ function StatusBadge({ status }) {
     },
     paid: {
       label: "Paid",
-      bgColor: "var(--canvas-success-surface, #edfdf8)",
+      bgColor: "var(--canvas-success-surface)",
       textColor: "var(--canvas-success)"
     },
     overdue: {
       label: "Overdue",
-      bgColor: "var(--canvas-destructive-surface, #fef2f2)",
+      bgColor: "var(--canvas-destructive-surface)",
       textColor: "var(--canvas-destructive)"
     }
   };
@@ -11444,17 +11458,18 @@ function ProfileCard({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center w-full", children: [
           /* @__PURE__ */ jsxs("div", { className: "relative -mt-16", children: [
-            /* @__PURE__ */ jsxs(Avatar, { className: "size-32 border-4 border-white", children: [
+            /* @__PURE__ */ jsxs(Avatar, { className: "size-32 border-4 border-[var(--canvas-background)]", children: [
               /* @__PURE__ */ jsx(AvatarImage, { src: avatarUrl, alt: name }),
               /* @__PURE__ */ jsx(
                 AvatarFallback,
                 {
-                  className: "text-xl font-semibold bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)]",
+                  className: "font-semibold bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)]",
+                  style: { fontSize: "var(--typo-body-xl-size)" },
                   children: avatarFallback
                 }
               )
             ] }),
-            showStatus && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[9px] right-[9px] size-5 rounded-full bg-emerald-500 border-[3px] border-white" })
+            showStatus && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[9px] right-[9px] size-5 rounded-full bg-[var(--canvas-success)] border-[3px] border-[var(--canvas-background)]" })
           ] }),
           showMenu && /* @__PURE__ */ jsx(
             "button",
@@ -11561,9 +11576,9 @@ function SidebarProfileCard({
           /* @__PURE__ */ jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsxs(Avatar, { className: "size-[120px]", children: [
               /* @__PURE__ */ jsx(AvatarImage, { src: avatarUrl, alt: name }),
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-2xl font-semibold bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)]", children: avatarFallback })
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "font-semibold bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-h6-size)" }, children: avatarFallback })
             ] }),
-            showStatus && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[10px] right-[10px] size-5 rounded-full bg-emerald-500 border-[3px] border-white" })
+            showStatus && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[10px] right-[10px] size-5 rounded-full bg-[var(--canvas-success)] border-[3px] border-[var(--canvas-background)]" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[var(--spacing-xs)]", children: [
             /* @__PURE__ */ jsx(Typography, { variant: "body-xl", className: "text-center", style: { fontWeight: 600 }, children: name }),
@@ -11746,8 +11761,8 @@ var badgeIcons = {
 };
 var badgeColors = {
   zap: "text-[var(--canvas-primary)]",
-  star: "text-amber-600",
-  check: "text-emerald-600"
+  star: "text-[var(--canvas-warning)]",
+  check: "text-[var(--canvas-success)]"
 };
 function BadgesCard({ badges, className }) {
   return /* @__PURE__ */ jsx(CardWrapper, { className: cn("p-[var(--spacing-4xl)]", className), children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--spacing-xl)]", children: badges.map((badge, index) => {
@@ -14623,7 +14638,7 @@ function ControlButton({ icon, onClick, isActive = true, label }) {
       className: cn(
         "w-10 h-10 rounded-full flex items-center justify-center",
         "shadow-sm transition-colors",
-        isActive ? "bg-[var(--canvas-sidebar-light-text)] text-white hover:opacity-80" : "bg-[var(--canvas-destructive)] text-white hover:opacity-80"
+        isActive ? "bg-[var(--canvas-sidebar-light-text)] text-[var(--canvas-primary-foreground)] hover:opacity-80" : "bg-[var(--canvas-destructive)] text-[var(--canvas-primary-foreground)] hover:opacity-80"
       ),
       children: icon
     }
@@ -15151,8 +15166,8 @@ function CreditCardDisplay({
             /* @__PURE__ */ jsx(
               "span",
               {
-                className: "text-white/70 text-xs block mb-1",
-                style: { fontFamily: "var(--typo-global-font)" },
+                className: "text-white/70 block mb-1",
+                style: { fontFamily: "var(--typo-global-font)", fontSize: "var(--typo-body-xs-size)" },
                 children: "CARDHOLDER"
               }
             ),
@@ -15161,7 +15176,7 @@ function CreditCardDisplay({
               {
                 className: "text-white font-medium",
                 style: {
-                  fontSize: "16px",
+                  fontSize: "var(--typo-body-m-size)",
                   fontFamily: "var(--typo-global-font)"
                 },
                 children: cardholderName
@@ -15172,8 +15187,8 @@ function CreditCardDisplay({
             /* @__PURE__ */ jsx(
               "span",
               {
-                className: "text-white/70 text-xs block mb-1",
-                style: { fontFamily: "var(--typo-global-font)" },
+                className: "text-white/70 block mb-1",
+                style: { fontFamily: "var(--typo-global-font)", fontSize: "var(--typo-body-xs-size)" },
                 children: "EXPIRES"
               }
             ),
@@ -15182,7 +15197,7 @@ function CreditCardDisplay({
               {
                 className: "text-white font-medium",
                 style: {
-                  fontSize: "16px",
+                  fontSize: "var(--typo-body-m-size)",
                   fontFamily: "var(--typo-global-font)"
                 },
                 children: expiryDate
@@ -15248,7 +15263,8 @@ function CanvasItem({
                 "div",
                 {
                   onMouseDown: handleDragHandleMouseDown,
-                  className: "flex items-center gap-1.5 text-white/90 text-xs cursor-grab active:cursor-grabbing select-none",
+                  className: "flex items-center gap-1.5 text-white/90 cursor-grab active:cursor-grabbing select-none",
+                  style: { fontSize: "var(--typo-body-xs-size)" },
                   children: [
                     /* @__PURE__ */ jsx(GripHorizontal, { className: "size-4" }),
                     /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: item.componentType })
@@ -15424,9 +15440,10 @@ function DraggableComponent({ component }) {
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "text-sm text-[var(--canvas-text)]",
+            className: "text-[var(--canvas-text)]",
             style: {
-              fontFamily: "var(--typo-body-s-font, var(--typo-global-font))"
+              fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
+              fontSize: "var(--typo-body-s-size)"
             },
             children: component.label
           }
@@ -15448,11 +15465,12 @@ function CategorySection({ category, components, defaultExpanded = true }) {
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: "text-xs font-semibold uppercase tracking-wider text-[var(--canvas-text-muted)]",
+              className: "font-semibold uppercase tracking-wider text-[var(--canvas-text-muted)]",
+              style: { fontSize: "var(--typo-body-xs-size)" },
               children: category
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-[var(--canvas-text-placeholder)]", children: components.length })
+          /* @__PURE__ */ jsx("span", { className: "ml-auto text-[var(--canvas-text-placeholder)]", style: { fontSize: "var(--typo-body-xs-size)" }, children: components.length })
         ]
       }
     ),
@@ -15465,7 +15483,7 @@ function ComponentPalette({ className }) {
     {
       className: cn(
         "w-[280px] h-full flex flex-col",
-        "bg-white border-r border-[var(--canvas-border)]",
+        "bg-[var(--canvas-background)] border-r border-[var(--canvas-border)]",
         className
       ),
       children: [
@@ -15473,9 +15491,10 @@ function ComponentPalette({ className }) {
           /* @__PURE__ */ jsx(
             "h2",
             {
-              className: "text-sm font-semibold text-[var(--canvas-text)]",
+              className: "font-semibold text-[var(--canvas-text)]",
               style: {
-                fontFamily: "var(--typo-body-m-font, var(--typo-global-font))"
+                fontFamily: "var(--typo-body-m-font, var(--typo-global-font))",
+                fontSize: "var(--typo-body-s-size)"
               },
               children: "Components"
             }
@@ -15483,7 +15502,8 @@ function ComponentPalette({ className }) {
           /* @__PURE__ */ jsx(
             "p",
             {
-              className: "text-xs text-[var(--canvas-text-muted)] mt-1",
+              className: "text-[var(--canvas-text-muted)] mt-1",
+              style: { fontSize: "var(--typo-body-xs-size)" },
               children: "Drag components onto the canvas"
             }
           )
@@ -15501,9 +15521,9 @@ function ComponentPalette({ className }) {
             category
           );
         }) }) }),
-        /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-[var(--canvas-border)] bg-[var(--canvas-surface)]", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--canvas-text-placeholder)]", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-[var(--canvas-border)] bg-[var(--canvas-surface)]", children: /* @__PURE__ */ jsxs("p", { className: "text-[var(--canvas-text-placeholder)]", style: { fontSize: "var(--typo-body-xs-size)" }, children: [
           "Tip: Press ",
-          /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-white rounded border border-[var(--canvas-border)] text-[10px]", children: "Delete" }),
+          /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-[var(--canvas-background)] rounded border border-[var(--canvas-border)]", style: { fontSize: "10px" }, children: "Delete" }),
           " to remove selected"
         ] }) })
       ]
@@ -16295,7 +16315,8 @@ function ComponentSearch({
     selectedComponents.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedComponents.map((component) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-[var(--canvas-surface-brand)] text-[var(--canvas-primary)] text-sm",
+        className: "flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-[var(--canvas-surface-brand)] text-[var(--canvas-primary)]",
+        style: { fontSize: "var(--typo-body-s-size)" },
         children: [
           /* @__PURE__ */ jsx("span", { className: "font-medium", children: component.name }),
           /* @__PURE__ */ jsx(
@@ -16329,10 +16350,11 @@ function ComponentSearch({
                 onChange: (e) => setSearchQuery(e.target.value),
                 onFocus: () => setIsOpen(true),
                 placeholder: "Search components...",
-                className: "flex-1 bg-transparent text-sm text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] outline-none"
+                className: "flex-1 bg-transparent text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] outline-none",
+                style: { fontSize: "var(--typo-body-s-size)" }
               }
             ),
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--canvas-text-muted)]", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-xs-size)" }, children: [
               selectedComponents.length,
               " selected"
             ] })
@@ -16353,7 +16375,8 @@ function ComponentSearch({
               "button",
               {
                 onClick: () => toggleCategory(category),
-                className: "w-full flex items-center justify-between px-3 py-2 bg-[var(--canvas-surface)] border-b border-[var(--canvas-border)] text-xs font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide hover:bg-[var(--canvas-surface-brand)]/50",
+                className: "w-full flex items-center justify-between px-3 py-2 bg-[var(--canvas-surface)] border-b border-[var(--canvas-border)] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide hover:bg-[var(--canvas-surface-brand)]/50",
+                style: { fontSize: "var(--typo-body-xs-size)" },
                 children: [
                   /* @__PURE__ */ jsxs("span", { children: [
                     category,
@@ -16388,7 +16411,7 @@ function ComponentSearch({
                         children: isSelected && /* @__PURE__ */ jsx(
                           "svg",
                           {
-                            className: "size-3 text-white",
+                            className: "size-3 text-[var(--canvas-primary-foreground)]",
                             fill: "none",
                             viewBox: "0 0 24 24",
                             stroke: "currentColor",
@@ -16411,15 +16434,16 @@ function ComponentSearch({
                           "span",
                           {
                             className: cn(
-                              "text-sm font-medium",
+                              "font-medium",
                               isSelected ? "text-[var(--canvas-primary)]" : "text-[var(--canvas-text)]"
                             ),
+                            style: { fontSize: "var(--typo-body-s-size)" },
                             children: component.name
                           }
                         ),
-                        /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--canvas-text-placeholder)]", children: component.path })
+                        /* @__PURE__ */ jsx("span", { className: "text-[var(--canvas-text-placeholder)]", style: { fontSize: "var(--typo-body-xs-size)" }, children: component.path })
                       ] }),
-                      /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)] mt-0.5 line-clamp-2", children: component.description })
+                      /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)] mt-0.5 line-clamp-2", style: { fontSize: "var(--typo-body-xs-size)" }, children: component.description })
                     ] })
                   ]
                 },
@@ -16427,7 +16451,7 @@ function ComponentSearch({
               );
             }) })
           ] }, category)),
-          filteredComponents.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-3 py-6 text-center text-sm text-[var(--canvas-text-muted)]", children: [
+          filteredComponents.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-3 py-6 text-center text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: [
             'No components found for "',
             searchQuery,
             '"'
@@ -16544,11 +16568,11 @@ function CustomComponentHelper({ className }) {
   const hasContent = componentName || componentDescription;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--canvas-text)]", children: "Create Custom Component" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--canvas-text-muted)] mt-1", children: "Generate a prompt to create a new ShadCN-based component with design variables" })
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--canvas-text)]", style: { fontSize: "var(--typo-body-l-size)" }, children: "Create Custom Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)] mt-1", style: { fontSize: "var(--typo-body-s-size)" }, children: "Generate a prompt to create a new ShadCN-based component with design variables" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text)]", children: "Component Type" }),
+      /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text)]", style: { fontSize: "var(--typo-body-s-size)", fontWeight: 500 }, children: "Component Type" }),
       /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
         { id: "block", label: "Block" },
         { id: "page-template", label: "Page Template" },
@@ -16558,9 +16582,10 @@ function CustomComponentHelper({ className }) {
         {
           onClick: () => setComponentType(type.id),
           className: cn(
-            "px-4 py-2 rounded-lg text-sm font-medium transition-all",
-            componentType === type.id ? "bg-[var(--canvas-primary)] text-white" : "bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)]"
+            "px-4 py-2 rounded-lg font-medium transition-all",
+            componentType === type.id ? "bg-[var(--canvas-primary)] text-[var(--canvas-primary-foreground)]" : "bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)]"
           ),
+          style: { fontSize: "var(--typo-body-s-size)" },
           children: type.label
         },
         type.id
@@ -16571,7 +16596,8 @@ function CustomComponentHelper({ className }) {
         "label",
         {
           htmlFor: "component-name",
-          className: "text-sm font-medium text-[var(--canvas-text)]",
+          className: "text-[var(--canvas-text)]",
+          style: { fontSize: "var(--typo-body-s-size)", fontWeight: 500 },
           children: "Component Name"
         }
       ),
@@ -16583,7 +16609,8 @@ function CustomComponentHelper({ className }) {
           value: componentName,
           onChange: (e) => setComponentName(e.target.value),
           placeholder: "e.g., MultiStepPopup, ImageCarousel, StatCard",
-          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] text-sm placeholder:text-[var(--canvas-text-placeholder)] focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent"
+          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent",
+          style: { fontSize: "var(--typo-body-s-size)" }
         }
       )
     ] }),
@@ -16592,7 +16619,8 @@ function CustomComponentHelper({ className }) {
         "label",
         {
           htmlFor: "component-description",
-          className: "text-sm font-medium text-[var(--canvas-text)]",
+          className: "text-[var(--canvas-text)]",
+          style: { fontSize: "var(--typo-body-s-size)", fontWeight: 500 },
           children: "Description"
         }
       ),
@@ -16604,13 +16632,14 @@ function CustomComponentHelper({ className }) {
           onChange: (e) => setComponentDescription(e.target.value),
           placeholder: "Describe what this component should do, its features, and any specific requirements (e.g., a multi-step popup with steps listed on the left side and content on the right, progress indicator, next/back buttons)",
           rows: 4,
-          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] text-sm placeholder:text-[var(--canvas-text-placeholder)] focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent resize-none"
+          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent resize-none",
+          style: { fontSize: "var(--typo-body-s-size)" }
         }
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text)]", children: "Reference Components (optional)" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)] mb-2", children: "Select existing components to use as style/pattern references" }),
+      /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text)]", style: { fontSize: "var(--typo-body-s-size)", fontWeight: 500 }, children: "Reference Components (optional)" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)] mb-2", style: { fontSize: "var(--typo-body-xs-size)" }, children: "Select existing components to use as style/pattern references" }),
       /* @__PURE__ */ jsx(
         ComponentSearch,
         {
@@ -16621,7 +16650,7 @@ function CustomComponentHelper({ className }) {
     ] }),
     hasContent && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed border-[var(--canvas-border)] bg-[var(--canvas-surface)] p-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-[var(--canvas-text-muted)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 font-medium text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-[var(--canvas-primary)]" }),
           "Generated Prompt"
         ] }),
@@ -16631,9 +16660,10 @@ function CustomComponentHelper({ className }) {
             onClick: handleCopy,
             disabled: !generatedPrompt,
             className: cn(
-              "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all",
-              copied ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
+              "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
+              copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
             ),
+            style: { fontSize: "var(--typo-body-xs-size)" },
             children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Check, { className: "size-3" }),
               "Copied!"
@@ -16644,9 +16674,9 @@ function CustomComponentHelper({ className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("pre", { className: "text-sm text-[var(--canvas-text)] leading-relaxed font-mono whitespace-pre-wrap bg-[var(--canvas-background)] rounded-md p-3 border border-[var(--canvas-border)] max-h-[300px] overflow-y-auto", children: generatedPrompt })
+      /* @__PURE__ */ jsx("pre", { className: "text-[var(--canvas-text)] leading-relaxed font-mono whitespace-pre-wrap bg-[var(--canvas-background)] rounded-md p-3 border border-[var(--canvas-border)] max-h-[300px] overflow-y-auto", style: { fontSize: "var(--typo-body-s-size)" }, children: generatedPrompt })
     ] }),
-    !hasContent && /* @__PURE__ */ jsx("div", { className: "rounded-lg border-2 border-dashed border-[var(--canvas-border)] bg-[var(--canvas-surface)] p-8 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--canvas-text-muted)]", children: "Enter a component name or description to generate a prompt" }) })
+    !hasContent && /* @__PURE__ */ jsx("div", { className: "rounded-lg border-2 border-dashed border-[var(--canvas-border)] bg-[var(--canvas-surface)] p-8 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: "Enter a component name or description to generate a prompt" }) })
   ] });
 }
 function toKebabCase(str) {
@@ -19672,7 +19702,7 @@ function DateCell({
           "span",
           {
             className: cn(
-              "font-semibold text-base leading-6",
+              "font-semibold leading-6",
               showStrikethrough && "line-through"
             ),
             style: {
@@ -20097,12 +20127,13 @@ function PaginationButton({
       onClick,
       className: cn(
         "flex items-center justify-center shrink-0 transition-colors",
-        "font-semibold text-[14px] leading-[20px]",
+        "font-semibold",
         "size-[32px] rounded-[var(--radius-xs)]",
         "border bg-[var(--canvas-background)]",
         isSelected ? "border-[var(--canvas-primary)] text-[var(--canvas-primary)]" : "border-[var(--canvas-border)] text-[var(--canvas-text)] hover:bg-[var(--canvas-surface)]",
         className
       ),
+      style: { fontSize: "var(--typo-body-s-size)", lineHeight: "var(--typo-body-s-line-height)" },
       "aria-current": isSelected ? "page" : void 0,
       children: page
     }
@@ -20144,7 +20175,7 @@ function NavigationButton({
       "aria-label": type,
       children: [
         (type === "first" || type === "prev") && /* @__PURE__ */ jsx(Icon2, { className: "size-[20px]" }),
-        label && /* @__PURE__ */ jsx("span", { className: "font-semibold text-[14px] leading-[20px]", children: label }),
+        label && /* @__PURE__ */ jsx("span", { className: "font-semibold", style: { fontSize: "var(--typo-body-s-size)", lineHeight: "var(--typo-body-s-line-height)" }, children: label }),
         (type === "next" || type === "last") && /* @__PURE__ */ jsx(Icon2, { className: "size-[20px]" })
       ]
     }
@@ -20246,8 +20277,8 @@ function Pagination({
           showResultsText && /* @__PURE__ */ jsxs(
             "span",
             {
-              className: "text-[14px] leading-[20px] text-[var(--canvas-text)] whitespace-nowrap",
-              style: { fontFamily: "var(--typo-global-font)" },
+              className: "text-[var(--canvas-text)] whitespace-nowrap",
+              style: { fontFamily: "var(--typo-global-font)", fontSize: "var(--typo-body-s-size)", lineHeight: "var(--typo-body-s-line-height)" },
               children: [
                 "Viewing ",
                 formatNumber(startItem),
@@ -20364,7 +20395,7 @@ function PromptTemplate({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-[var(--canvas-text-muted)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 font-medium text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: [
             /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-[var(--canvas-primary)]" }),
             title
           ] }),
@@ -20373,9 +20404,10 @@ function PromptTemplate({
             {
               onClick: handleCopy,
               className: cn(
-                "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all",
-                copied ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
+                "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
+                copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
               ),
+              style: { fontSize: "var(--typo-body-xs-size)" },
               children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(Check, { className: "size-3" }),
                 "Copied!"
@@ -20386,7 +20418,7 @@ function PromptTemplate({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("pre", { className: "text-sm text-[var(--canvas-text)] leading-relaxed font-mono whitespace-pre-wrap bg-[var(--canvas-background)] rounded-md p-3 border border-[var(--canvas-border)] max-h-[300px] overflow-y-auto", children: prompt })
+        /* @__PURE__ */ jsx("pre", { className: "text-[var(--canvas-text)] leading-relaxed font-mono whitespace-pre-wrap bg-[var(--canvas-background)] rounded-md p-3 border border-[var(--canvas-border)] max-h-[300px] overflow-y-auto", style: { fontSize: "var(--typo-body-s-size)" }, children: prompt })
       ]
     }
   );
@@ -20403,9 +20435,10 @@ function MiniPromptChip({ label, prompt }) {
     {
       onClick: handleCopy,
       className: cn(
-        "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all",
-        copied ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : "bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)] hover:bg-[var(--canvas-surface-hover)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)]"
+        "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full font-medium transition-all",
+        copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)] hover:bg-[var(--canvas-surface-hover)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)]"
       ),
+      style: { fontSize: "var(--typo-body-xs-size)" },
       title: `Copy: ${prompt.slice(0, 100)}...`,
       children: [
         copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" }),
@@ -20416,7 +20449,7 @@ function MiniPromptChip({ label, prompt }) {
 }
 function PromptChipsRow({ chips, label = "More prompts:" }) {
   return /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t border-[var(--canvas-border)]", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)] mb-2 font-medium", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)] mb-2 font-medium", style: { fontSize: "var(--typo-body-xs-size)" }, children: label }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: chips.map((chip) => /* @__PURE__ */ jsx(MiniPromptChip, { label: chip.label, prompt: chip.prompt }, chip.label)) })
   ] });
 }
@@ -20499,9 +20532,10 @@ function ScreenPromptTemplate() {
           {
             onClick: () => setPromptType(type),
             className: cn(
-              "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
-              isActive ? "bg-[var(--canvas-primary)] text-white shadow-sm" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)]"
+              "flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all",
+              isActive ? "bg-[var(--canvas-primary)] text-[var(--canvas-primary-foreground)] shadow-sm" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)]"
             ),
+            style: { fontSize: "var(--typo-body-s-size)" },
             children: [
               /* @__PURE__ */ jsx(Icon2, { className: "size-4" }),
               config.label
@@ -20511,10 +20545,10 @@ function ScreenPromptTemplate() {
         );
       }
     ) }),
-    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)] mb-3", children: currentConfig.description }),
+    /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)] mb-3", style: { fontSize: "var(--typo-body-xs-size)" }, children: currentConfig.description }),
     /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--canvas-border)] my-4" }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-[var(--canvas-text-muted)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 font-medium text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: [
         /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-[var(--canvas-primary)]" }),
         "Generate with Cursor"
       ] }),
@@ -20523,9 +20557,10 @@ function ScreenPromptTemplate() {
         {
           onClick: handleCopy,
           className: cn(
-            "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all",
-            copied ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
+            "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
+            copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
           ),
+          style: { fontSize: "var(--typo-body-xs-size)" },
           children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Check, { className: "size-3" }),
             "Copied!"
@@ -20536,7 +20571,7 @@ function ScreenPromptTemplate() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("pre", { className: "text-sm text-[var(--canvas-text)] leading-relaxed font-mono whitespace-pre-wrap bg-[var(--canvas-background)] rounded-md p-3 border border-[var(--canvas-border)] max-h-[300px] overflow-y-auto", children: currentConfig.prompt })
+    /* @__PURE__ */ jsx("pre", { className: "text-[var(--canvas-text)] leading-relaxed font-mono whitespace-pre-wrap bg-[var(--canvas-background)] rounded-md p-3 border border-[var(--canvas-border)] max-h-[300px] overflow-y-auto", style: { fontSize: "var(--typo-body-s-size)" }, children: currentConfig.prompt })
   ] });
 }
 function ScreenPromptBuilder({ className }) {
@@ -20609,11 +20644,11 @@ function ScreenPromptBuilder({ className }) {
   const hasContent = selectedComponents.length > 0 || screenName || screenContext;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--canvas-text)]", children: "Build from Components" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--canvas-text-muted)] mt-1", children: "Select existing components and describe your screen to generate a prompt" })
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--canvas-text)]", style: { fontSize: "var(--typo-body-l-size)" }, children: "Build from Components" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)] mt-1", style: { fontSize: "var(--typo-body-s-size)" }, children: "Select existing components and describe your screen to generate a prompt" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-[var(--canvas-text)]", children: "Select Components" }),
+      /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text)]", style: { fontSize: "var(--typo-body-s-size)", fontWeight: 500 }, children: "Select Components" }),
       /* @__PURE__ */ jsx(
         ComponentSearch,
         {
@@ -20627,7 +20662,8 @@ function ScreenPromptBuilder({ className }) {
         "label",
         {
           htmlFor: "screen-name",
-          className: "text-sm font-medium text-[var(--canvas-text)]",
+          className: "text-[var(--canvas-text)]",
+          style: { fontSize: "var(--typo-body-s-size)", fontWeight: 500 },
           children: "Screen Name"
         }
       ),
@@ -20639,7 +20675,8 @@ function ScreenPromptBuilder({ className }) {
           value: screenName,
           onChange: (e) => setScreenName(e.target.value),
           placeholder: "e.g., User Dashboard, Order History, Settings",
-          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] text-sm placeholder:text-[var(--canvas-text-placeholder)] focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent"
+          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent",
+          style: { fontSize: "var(--typo-body-s-size)" }
         }
       )
     ] }),
@@ -20648,7 +20685,8 @@ function ScreenPromptBuilder({ className }) {
         "label",
         {
           htmlFor: "screen-context",
-          className: "text-sm font-medium text-[var(--canvas-text)]",
+          className: "text-[var(--canvas-text)]",
+          style: { fontSize: "var(--typo-body-s-size)", fontWeight: 500 },
           children: "Screen Purpose & Context"
         }
       ),
@@ -20660,7 +20698,8 @@ function ScreenPromptBuilder({ className }) {
           onChange: (e) => setScreenContext(e.target.value),
           placeholder: "Describe what this screen should do, what users will accomplish here, and any specific requirements...",
           rows: 3,
-          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] text-sm placeholder:text-[var(--canvas-text-placeholder)] focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent resize-none"
+          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent resize-none",
+          style: { fontSize: "var(--typo-body-s-size)" }
         }
       )
     ] }),
@@ -20669,7 +20708,8 @@ function ScreenPromptBuilder({ className }) {
         "label",
         {
           htmlFor: "persona",
-          className: "text-sm font-medium text-[var(--canvas-text)]",
+          className: "text-[var(--canvas-text)]",
+          style: { fontSize: "var(--typo-body-s-size)", fontWeight: 500 },
           children: "Target Persona (optional)"
         }
       ),
@@ -20679,7 +20719,8 @@ function ScreenPromptBuilder({ className }) {
           id: "persona",
           value: selectedPersona,
           onChange: (e) => setSelectedPersona(e.target.value),
-          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] text-sm focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent",
+          className: "w-full px-3 py-2 rounded-lg border border-[var(--canvas-border)] bg-[var(--canvas-background)] text-[var(--canvas-text)] focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:border-transparent",
+          style: { fontSize: "var(--typo-body-s-size)" },
           children: [
             /* @__PURE__ */ jsx("option", { value: "", children: "Select a persona..." }),
             personas.map((persona) => /* @__PURE__ */ jsxs("option", { value: persona.id, children: [
@@ -20695,7 +20736,7 @@ function ScreenPromptBuilder({ className }) {
     ] }),
     hasContent && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed border-[var(--canvas-border)] bg-[var(--canvas-surface)] p-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-[var(--canvas-text-muted)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 font-medium text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-[var(--canvas-primary)]" }),
           "Generated Prompt"
         ] }),
@@ -20705,9 +20746,10 @@ function ScreenPromptBuilder({ className }) {
             onClick: handleCopy,
             disabled: !generatedPrompt,
             className: cn(
-              "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all",
-              copied ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
+              "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
+              copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
             ),
+            style: { fontSize: "var(--typo-body-xs-size)" },
             children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Check, { className: "size-3" }),
               "Copied!"
@@ -20718,18 +20760,18 @@ function ScreenPromptBuilder({ className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("pre", { className: "text-sm text-[var(--canvas-text)] leading-relaxed font-mono whitespace-pre-wrap bg-[var(--canvas-background)] rounded-md p-3 border border-[var(--canvas-border)] max-h-[300px] overflow-y-auto", children: generatedPrompt })
+      /* @__PURE__ */ jsx("pre", { className: "text-[var(--canvas-text)] leading-relaxed font-mono whitespace-pre-wrap bg-[var(--canvas-background)] rounded-md p-3 border border-[var(--canvas-border)] max-h-[300px] overflow-y-auto", style: { fontSize: "var(--typo-body-s-size)" }, children: generatedPrompt })
     ] }),
-    !hasContent && /* @__PURE__ */ jsx("div", { className: "rounded-lg border-2 border-dashed border-[var(--canvas-border)] bg-[var(--canvas-surface)] p-8 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--canvas-text-muted)]", children: "Select components or enter screen details to generate a prompt" }) })
+    !hasContent && /* @__PURE__ */ jsx("div", { className: "rounded-lg border-2 border-dashed border-[var(--canvas-border)] bg-[var(--canvas-surface)] p-8 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: "Select components or enter screen details to generate a prompt" }) })
   ] });
 }
 function ScreenNode({ data, selected }) {
   const { screen, childScreens } = data;
   const hasChildren = childScreens.length > 0;
   const statusColors = {
-    draft: "bg-yellow-100 text-yellow-700 border-yellow-200",
-    review: "bg-blue-100 text-blue-700 border-blue-200",
-    approved: "bg-green-100 text-green-700 border-green-200"
+    draft: { bg: "var(--canvas-warning-surface)", text: "var(--canvas-warning)", border: "var(--canvas-warning)" },
+    review: { bg: "var(--canvas-info-surface)", text: "var(--canvas-info)", border: "var(--canvas-info)" },
+    approved: { bg: "var(--canvas-success-surface)", text: "var(--canvas-success)", border: "var(--canvas-success)" }
   };
   const typeLabels = {
     page: null,
@@ -20742,7 +20784,7 @@ function ScreenNode({ data, selected }) {
     "div",
     {
       className: cn(
-        "rounded-lg border-2 bg-white shadow-sm min-w-[160px]",
+        "rounded-lg border-2 bg-[var(--canvas-background)] shadow-sm min-w-[160px]",
         selected ? "border-[var(--canvas-primary)] shadow-md" : "border-[var(--canvas-border)]"
       ),
       children: [
@@ -20756,11 +20798,11 @@ function ScreenNode({ data, selected }) {
         ),
         /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-lg", children: screen.icon || "\u{1F4C4}" }),
-            /* @__PURE__ */ jsx("span", { className: "font-medium text-sm text-[var(--canvas-text)] truncate", children: screen.name })
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "var(--typo-body-l-size)" }, children: screen.icon || "\u{1F4C4}" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--canvas-text)] truncate", style: { fontSize: "var(--typo-body-s-size)" }, children: screen.name })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--canvas-text-muted)] font-mono", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-[var(--canvas-text-muted)] font-mono", style: { fontSize: "var(--typo-body-xs-size)" }, children: [
               "/",
               screen.slug
             ] }),
@@ -20769,10 +20811,12 @@ function ScreenNode({ data, selected }) {
           /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mt-2 pt-2 border-t border-[var(--canvas-border)]", children: /* @__PURE__ */ jsx(
             "span",
             {
-              className: cn(
-                "text-[10px] px-1.5 py-0.5 rounded border font-medium capitalize",
-                statusColors[screen.status]
-              ),
+              className: "text-[10px] px-1.5 py-0.5 rounded border font-medium capitalize",
+              style: {
+                backgroundColor: statusColors[screen.status].bg,
+                color: statusColors[screen.status].text,
+                borderColor: statusColors[screen.status].border
+              },
               children: screen.status
             }
           ) })
@@ -20781,7 +20825,7 @@ function ScreenNode({ data, selected }) {
           "div",
           {
             className: cn(
-              "px-3 py-2 flex items-center gap-2 text-xs",
+              "px-3 py-2 flex items-center gap-2",
               "hover:bg-[var(--canvas-surface)]",
               i < childScreens.length - 1 && "border-b border-[var(--canvas-border)]"
             ),
@@ -20792,8 +20836,8 @@ function ScreenNode({ data, selected }) {
                 child.type === "drawer" && "\u{1F4E5}",
                 child.type === "state" && "\u{1F504}"
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-[var(--canvas-text)] truncate", children: child.name }),
-              /* @__PURE__ */ jsxs("span", { className: "text-[var(--canvas-text-muted)] font-mono ml-auto", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--canvas-text)] truncate", style: { fontSize: "var(--typo-body-s-size)" }, children: child.name }),
+              /* @__PURE__ */ jsxs("span", { className: "text-[var(--canvas-text-muted)] font-mono ml-auto", style: { fontSize: "var(--typo-body-xs-size)" }, children: [
                 "/",
                 child.slug
               ] })
@@ -20879,7 +20923,8 @@ function ScreenFlowchart({
       "button",
       {
         onClick: onOpenFullscreen,
-        className: "absolute top-3 right-3 z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)] transition-colors",
+        className: "absolute top-3 right-3 z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-md font-medium bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)] transition-colors",
+        style: { fontSize: "var(--typo-body-xs-size)" },
         children: [
           /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" }),
           "Open in new tab"
@@ -20901,7 +20946,7 @@ function ScreenFlowchart({
         className: "bg-[var(--canvas-surface)] rounded-lg border border-[var(--canvas-border)]",
         children: [
           /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1 }),
-          /* @__PURE__ */ jsx(Controls, { className: "!bg-white !border-[var(--canvas-border)] !shadow-sm" })
+          /* @__PURE__ */ jsx(Controls, { className: "!bg-[var(--canvas-background)] !border-[var(--canvas-border)] !shadow-sm" })
         ]
       }
     )
@@ -20921,18 +20966,19 @@ function PersonaCard({ persona, className }) {
           /* @__PURE__ */ jsx("div", { className: "text-3xl", children: persona.avatar || "\u{1F464}" }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--canvas-text)]", children: persona.name }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--canvas-text-muted)]", children: persona.role })
+            /* @__PURE__ */ jsx("p", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: persona.role })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 font-medium text-[var(--canvas-text-muted)] mb-2", style: { fontSize: "var(--typo-body-xs-size)" }, children: [
             /* @__PURE__ */ jsx(Target$1, { className: "size-3" }),
             "Goals"
           ] }),
           /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: persona.goals.map((goal, i) => /* @__PURE__ */ jsxs(
             "li",
             {
-              className: "text-sm text-[var(--canvas-text)] flex items-start gap-2",
+              className: "text-[var(--canvas-text)] flex items-start gap-2",
+              style: { fontSize: "var(--typo-body-s-size)" },
               children: [
                 /* @__PURE__ */ jsx("span", { className: "text-[var(--canvas-primary)] mt-1.5", children: "\u2022" }),
                 goal
@@ -20942,16 +20988,17 @@ function PersonaCard({ persona, className }) {
           )) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 font-medium text-[var(--canvas-text-muted)] mb-2", style: { fontSize: "var(--typo-body-xs-size)" }, children: [
             /* @__PURE__ */ jsx(AlertCircle, { className: "size-3" }),
             "Pain Points"
           ] }),
           /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: persona.painPoints.map((point, i) => /* @__PURE__ */ jsxs(
             "li",
             {
-              className: "text-sm text-[var(--canvas-text)] flex items-start gap-2",
+              className: "text-[var(--canvas-text)] flex items-start gap-2",
+              style: { fontSize: "var(--typo-body-s-size)" },
               children: [
-                /* @__PURE__ */ jsx("span", { className: "text-red-500 mt-1.5", children: "\u2022" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[var(--canvas-destructive)] mt-1.5", children: "\u2022" }),
                 point
               ]
             },
@@ -20960,7 +21007,7 @@ function PersonaCard({ persona, className }) {
         ] }),
         /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--canvas-border)] pt-4 mt-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
           /* @__PURE__ */ jsx(Quote, { className: "size-4 text-[var(--canvas-text-muted)] shrink-0 mt-0.5" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm italic text-[var(--canvas-text-muted)]", children: [
+          /* @__PURE__ */ jsxs("p", { className: "italic text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-body-s-size)" }, children: [
             '"',
             persona.quote,
             '"'
@@ -23686,7 +23733,7 @@ function PricingCards() {
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "absolute top-1 w-9 h-9 bg-white rounded-full shadow transition-all",
+                    className: "absolute top-1 w-9 h-9 bg-[var(--canvas-background)] rounded-full shadow transition-all",
                     style: {
                       left: isAnnual ? "calc(100% - 40px)" : "4px"
                     }