canvas-ui-sdk 0.3.7 → 0.3.9

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
@@ -82,7 +82,7 @@ function AvatarFallback({
   );
 }
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
@@ -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" } })
                               }
@@ -1355,7 +1355,7 @@ function LineTabs({
           {
             onClick: () => handleTabClick(tab.id),
             className: cn(
-              "flex items-center justify-center h-full px-0 transition-colors",
+              "flex items-center justify-center h-full px-0 transition-colors cursor-pointer",
               isActive ? "border-b-2 border-[var(--canvas-primary)] text-[var(--canvas-primary)]" : "border-b border-[var(--canvas-border)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)]"
             ),
             children: /* @__PURE__ */ jsx("span", { className: "text-base font-medium leading-6", children: tab.label })
@@ -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: {
@@ -2054,12 +2054,12 @@ var SelectablePills = React13.forwardRef(
               onClick: () => handlePillClick(option.id),
               disabled,
               className: cn(
-                "inline-flex items-center justify-center rounded-[var(--radius-xs)] border transition-colors",
+                "inline-flex items-center justify-center rounded-[var(--radius-xs)] border transition-colors cursor-pointer",
                 "font-medium whitespace-nowrap",
                 "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"
           )
         }
@@ -3032,7 +3032,7 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] cursor-pointer focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -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" }
     ]
   },
   {
@@ -3749,7 +3761,7 @@ function Header({
           "button",
           {
             onClick: () => onRemoveCartItem?.(item.id),
-            className: "text-left mt-[var(--spacing-xs)] hover:underline",
+            className: "cursor-pointer text-left mt-[var(--spacing-xs)] hover:underline",
             style: {
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
               fontSize: "var(--typo-body-s-size)",
@@ -3832,7 +3844,7 @@ function Header({
             "button",
             {
               onClick: onMarkAsRead,
-              className: "hover:underline",
+              className: "cursor-pointer hover:underline",
               style: {
                 fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
                 fontSize: "var(--typo-body-s-size)",
@@ -3908,7 +3920,7 @@ function Header({
           "button",
           {
             onClick: onViewMoreMessages,
-            className: "hover:underline",
+            className: "cursor-pointer hover:underline",
             style: {
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
               fontSize: "var(--typo-body-s-size)",
@@ -3945,7 +3957,7 @@ function Header({
             "button",
             {
               onClick: onMarkNotificationsAsRead,
-              className: "hover:underline",
+              className: "cursor-pointer hover:underline",
               style: {
                 fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
                 fontSize: "var(--typo-body-s-size)",
@@ -4022,7 +4034,7 @@ function Header({
           "button",
           {
             onClick: onViewMoreNotifications,
-            className: "hover:underline",
+            className: "cursor-pointer hover:underline",
             style: {
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
               fontSize: "var(--typo-body-s-size)",
@@ -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: [
@@ -4095,7 +4107,7 @@ function Header({
             /* @__PURE__ */ jsx(
               "button",
               {
-                className: `transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
+                className: `cursor-pointer transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
                 "aria-label": "Search",
                 children: /* @__PURE__ */ jsx(Search, { className: "size-4" })
               }
@@ -4104,7 +4116,7 @@ function Header({
               /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: `transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
+                  className: `cursor-pointer transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
                   "aria-label": "Notifications",
                   children: /* @__PURE__ */ jsx(Bell, { className: "size-4" })
                 }
@@ -4115,7 +4127,7 @@ function Header({
               /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: `transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
+                  className: `cursor-pointer transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
                   "aria-label": "Messages",
                   children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-4" })
                 }
@@ -4126,7 +4138,7 @@ function Header({
               /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: `transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
+                  className: `cursor-pointer transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
                   "aria-label": "Cart",
                   children: /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4" })
                 }
@@ -4154,7 +4166,7 @@ function Header({
               )
             ] }),
             /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "rounded-full focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:ring-offset-2", children: /* @__PURE__ */ jsxs(Avatar, { className: `size-10 border cursor-pointer ${isDark ? "border-[var(--canvas-sidebar-dark-border)]" : "border-[var(--canvas-neutral-border)]"}`, children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "cursor-pointer rounded-full focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:ring-offset-2", children: /* @__PURE__ */ jsxs(Avatar, { className: `size-10 border cursor-pointer ${isDark ? "border-[var(--canvas-sidebar-dark-border)]" : "border-[var(--canvas-neutral-border)]"}`, children: [
                 /* @__PURE__ */ jsx(AvatarImage, { src: avatarUrl, alt: "User avatar" }),
                 /* @__PURE__ */ jsx(
                   AvatarFallback,
@@ -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,
               {
@@ -4226,7 +4238,7 @@ function Header({
                     }
                     setIsMobileMenuOpen(false);
                   },
-                  className: "flex items-center gap-[var(--spacing-lg)] w-full py-[var(--spacing-lg)] text-left hover:bg-[var(--canvas-neutral-surface)] rounded-[var(--radius-md)] transition-colors",
+                  className: "cursor-pointer flex items-center gap-[var(--spacing-lg)] w-full py-[var(--spacing-lg)] text-left hover:bg-[var(--canvas-neutral-surface)] rounded-[var(--radius-md)] transition-colors",
                   children: [
                     Icon2 && /* @__PURE__ */ jsx(
                       "div",
@@ -4355,7 +4367,7 @@ function SidebarNav({ sections, variant = "dark", onItemClick }) {
               }
             },
             className: cn(
-              "flex items-center gap-[var(--spacing-md)] h-11 px-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
+              "cursor-pointer flex items-center gap-[var(--spacing-md)] h-11 px-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
               // Dark variant (desktop sidebar)
               isDark && isActive && !hasChildren && "bg-[var(--canvas-sidebar-dark-active-bg)] text-[var(--canvas-sidebar-dark-active-text)]",
               isDark && !isActive && "text-[var(--canvas-sidebar-dark-text)] hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -4414,7 +4426,7 @@ function SidebarNav({ sections, variant = "dark", onItemClick }) {
             {
               onClick: () => onItemClick?.(child),
               className: cn(
-                "flex items-center h-9 pl-12 pr-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
+                "cursor-pointer flex items-center h-9 pl-12 pr-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
                 // Dark variant
                 isDark && isChildActive && "bg-[var(--canvas-sidebar-dark-active-bg)] text-[var(--canvas-sidebar-dark-active-text)]",
                 isDark && !isChildActive && "text-[var(--canvas-sidebar-dark-text)] hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -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)]",
@@ -4781,7 +4793,7 @@ function IconNavItem({ item, variant = "dark", onClick }) {
     {
       onClick,
       className: cn(
-        "relative flex flex-col items-center justify-center gap-1 w-16 h-16 rounded-[var(--radius-nav)] transition-colors",
+        "cursor-pointer relative flex flex-col items-center justify-center gap-1 w-16 h-16 rounded-[var(--radius-nav)] transition-colors",
         // Dark variant
         isDark && isActive && "bg-[var(--canvas-sidebar-dark-active-bg)]",
         isDark && !isActive && "hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -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)]",
@@ -5115,7 +5127,7 @@ function IconColumnItem({ section, isActive, variant, onClick }) {
     {
       onClick,
       className: cn(
-        "relative flex flex-col items-center justify-center gap-1 w-11 h-11 rounded-[var(--radius-nav)] transition-colors",
+        "cursor-pointer relative flex flex-col items-center justify-center gap-1 w-11 h-11 rounded-[var(--radius-nav)] transition-colors",
         // Dark variant
         isDark && isActive && "bg-[var(--canvas-sidebar-dark-active-bg)]",
         isDark && !isActive && "hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -5148,7 +5160,7 @@ function NavTabItem({ tab, isActive, variant, onClick }) {
     {
       onClick,
       className: cn(
-        "flex items-center gap-[var(--spacing-md)] h-11 px-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
+        "cursor-pointer flex items-center gap-[var(--spacing-md)] h-11 px-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
         // Dark variant
         isDark && isActive && "bg-[var(--canvas-sidebar-dark-active-bg)] text-[var(--canvas-sidebar-dark-active-text)]",
         isDark && !isActive && "text-[var(--canvas-sidebar-dark-text)] hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -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 }),
@@ -5538,7 +5549,7 @@ function MobileNavTab({ item, variant = "light", onClick }) {
       onClick,
       className: cn(
         // Match icon-sidebar dimensions: 64px × 64px
-        "relative flex flex-col items-center justify-center gap-1 w-16 h-16 rounded-[var(--radius-nav)] transition-colors",
+        "cursor-pointer relative flex flex-col items-center justify-center gap-1 w-16 h-16 rounded-[var(--radius-nav)] transition-colors",
         // Dark variant
         isDark && isActive && "bg-[var(--canvas-sidebar-dark-active-bg)]",
         isDark && !isActive && "hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -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
           }
@@ -6364,7 +6376,7 @@ function LinksCard({
           "a",
           {
             href: link.href,
-            className: "flex items-center gap-1.5 hover:opacity-80 transition-opacity",
+            className: "cursor-pointer flex items-center gap-1.5 hover:opacity-80 transition-opacity",
             children: content
           },
           link.id
@@ -6375,7 +6387,7 @@ function LinksCard({
         {
           type: "button",
           onClick: link.onClick,
-          className: "flex items-center gap-1.5 hover:opacity-80 transition-opacity",
+          className: "cursor-pointer flex items-center gap-1.5 hover:opacity-80 transition-opacity",
           children: content
         },
         link.id
@@ -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) => {
@@ -6973,23 +6985,23 @@ function ProjectContextShell({
           {
             onClick: () => onTabChange(tab.id),
             className: cn(
-              "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors mb-1",
+              "cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors mb-1",
               isActive ? "bg-[var(--canvas-surface-brand)] text-[var(--canvas-primary)]" : "text-[var(--canvas-text-muted)] hover:bg-[var(--canvas-surface)] hover:text-[var(--canvas-text)]"
             ),
             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"
@@ -7278,7 +7292,7 @@ function MessengerSidebar({
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    className: "flex items-center justify-center size-8 rounded-[var(--radius-xs)] border transition-colors hover:opacity-80",
+                    className: "cursor-pointer flex items-center justify-center size-8 rounded-[var(--radius-xs)] border transition-colors hover:opacity-80",
                     style: {
                       backgroundColor: "var(--canvas-background)",
                       borderColor: "var(--canvas-border)"
@@ -7296,7 +7310,7 @@ function MessengerSidebar({
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    className: "flex items-center justify-center size-8 rounded-[var(--radius-xs)] border transition-colors hover:opacity-80",
+                    className: "cursor-pointer flex items-center justify-center size-8 rounded-[var(--radius-xs)] border transition-colors hover:opacity-80",
                     style: {
                       backgroundColor: "var(--canvas-background)",
                       borderColor: "var(--canvas-border)"
@@ -7342,7 +7356,7 @@ function ThreadRow({ thread, isSelected, onSelect }) {
     "button",
     {
       onClick: onSelect,
-      className: "w-full flex items-center gap-[var(--spacing-xl)] px-4 lg:px-[var(--spacing-5xl)] py-[var(--spacing-xl)] transition-colors text-left border-b",
+      className: "cursor-pointer w-full flex items-center gap-[var(--spacing-xl)] px-4 lg:px-[var(--spacing-5xl)] py-[var(--spacing-xl)] transition-colors text-left border-b",
       style: {
         backgroundColor: isSelected ? "var(--canvas-surface)" : "var(--canvas-background)",
         borderColor: "var(--canvas-border)"
@@ -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 })
       ]
     }
   );
@@ -8113,7 +8127,7 @@ function MenuSectionItem({
       {
         type: "button",
         onClick: () => setExpanded(!expanded),
-        className: "w-full flex items-center gap-4 py-6 text-left group",
+        className: "cursor-pointer w-full flex items-center gap-4 py-6 text-left group",
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -8206,7 +8220,7 @@ function PillTabs({
       {
         onClick: () => onTabChange?.(tab.id),
         className: cn(
-          "flex items-center gap-[var(--spacing-md)] h-10 px-[var(--spacing-xl)] rounded-full transition-colors",
+          "cursor-pointer flex items-center gap-[var(--spacing-md)] h-10 px-[var(--spacing-xl)] rounded-full transition-colors",
           "bg-[var(--canvas-border)]",
           isActive && "bg-[var(--canvas-surface-brand)]"
         ),
@@ -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)"
     }
   };
@@ -10148,7 +10162,7 @@ function CommentInput({
             "button",
             {
               type: "button",
-              className: "absolute right-3 top-1/2 -translate-y-1/2",
+              className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2",
               style: { color: "var(--canvas-text-placeholder)" },
               children: /* @__PURE__ */ jsx(Paperclip, { className: "w-5 h-5" })
             }
@@ -10180,7 +10194,7 @@ function CommentActions({
           {
             type: "button",
             onClick: onReply,
-            className: "flex items-center",
+            className: "cursor-pointer flex items-center",
             style: {
               gap: "var(--spacing-sm)",
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -10197,7 +10211,7 @@ function CommentActions({
           {
             type: "button",
             onClick: onLike,
-            className: "flex items-center",
+            className: "cursor-pointer flex items-center",
             style: {
               gap: "var(--spacing-sm)",
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -10397,6 +10411,7 @@ function PostCommentItem({
                 {
                   type: "button",
                   onClick: () => setShowReplies(!showReplies),
+                  className: "cursor-pointer",
                   style: {
                     fontFamily: "var(--typo-body-xs-font, var(--typo-global-font))",
                     fontSize: "var(--typo-body-xs-size)",
@@ -10444,7 +10459,7 @@ function PostCard({
                   {
                     type: "button",
                     onClick: onUpvote,
-                    className: "flex items-center justify-center",
+                    className: "cursor-pointer flex items-center justify-center",
                     style: {
                       width: 40,
                       height: 40,
@@ -10588,7 +10603,7 @@ function PostCard({
                       "button",
                       {
                         type: "button",
-                        className: "flex items-center",
+                        className: "cursor-pointer flex items-center",
                         style: {
                           gap: "var(--spacing-sm)",
                           fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -11337,7 +11352,7 @@ function FaqsTable({
                   "button",
                   {
                     onClick: () => toggleItem(item.id),
-                    className: "flex items-center justify-between w-full text-left",
+                    className: "cursor-pointer flex items-center justify-between w-full text-left",
                     style: { gap: "var(--spacing-xl)" },
                     "aria-expanded": isExpanded,
                     "aria-controls": `faq-answer-${item.id}`,
@@ -11444,23 +11459,24 @@ 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",
             {
               onClick: onMenuClick,
-              className: "absolute top-4 right-0 flex items-center justify-center size-7 rounded-[var(--radius-xs)] border border-[var(--canvas-border)] bg-[var(--canvas-background)] hover:bg-[var(--canvas-surface)] transition-colors",
+              className: "cursor-pointer absolute top-4 right-0 flex items-center justify-center size-7 rounded-[var(--radius-xs)] border border-[var(--canvas-border)] bg-[var(--canvas-background)] hover:bg-[var(--canvas-surface)] transition-colors",
               "aria-label": "More options",
               children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4 text-[var(--canvas-text-muted)]" })
             }
@@ -11515,7 +11531,7 @@ function ProfileCard({
             "a",
             {
               href: link.href || "#",
-              className: "flex items-center gap-[var(--spacing-sm)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors",
+              className: "cursor-pointer flex items-center gap-[var(--spacing-sm)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors",
               children: [
                 /* @__PURE__ */ jsx(IconComponent, { className: "size-4" }),
                 /* @__PURE__ */ jsx(Typography, { variant: "body-s", color: "muted", as: "span", children: link.label })
@@ -11561,9 +11577,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 +11762,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) => {
@@ -13633,9 +13649,9 @@ function PostComposer({ placeholder = "What's on your mind?", imagePreview, onPo
             },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "var(--spacing-lg)" }, children: [
-                /* @__PURE__ */ jsx("button", { type: "button", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Paperclip, { className: "w-5 h-5" }) }),
-                /* @__PURE__ */ jsx("button", { type: "button", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Video, { className: "w-5 h-5" }) }),
-                /* @__PURE__ */ jsx("button", { type: "button", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Link2, { className: "w-5 h-5" }) })
+                /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Paperclip, { className: "w-5 h-5" }) }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Video, { className: "w-5 h-5" }) }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Link2, { className: "w-5 h-5" }) })
               ] }),
               /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handlePost, children: "Post" })
             ]
@@ -13657,6 +13673,7 @@ function ActionIconsRow({ isLiked, onLike, onComment, onRepost, onShare }) {
           {
             type: "button",
             onClick: onLike,
+            className: "cursor-pointer",
             style: { color: isLiked ? "var(--canvas-destructive)" : "var(--canvas-text)" },
             children: /* @__PURE__ */ jsx(
               Heart$1,
@@ -13669,9 +13686,9 @@ function ActionIconsRow({ isLiked, onLike, onComment, onRepost, onShare }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: onComment, style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(MessageCircle, { className: "w-5 h-5" }) }),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: onRepost, style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(RefreshCw, { className: "w-5 h-5" }) }),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: onShare, style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Send, { className: "w-5 h-5" }) })
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onComment, className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(MessageCircle, { className: "w-5 h-5" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onRepost, className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(RefreshCw, { className: "w-5 h-5" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onShare, className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Send, { className: "w-5 h-5" }) })
       ]
     }
   );
@@ -13915,7 +13932,7 @@ function RepostCard({ repost, onLike, onComment, onRepost, onShare }) {
               "button",
               {
                 type: "button",
-                className: "flex items-center justify-center",
+                className: "cursor-pointer flex items-center justify-center",
                 style: {
                   width: 32,
                   height: 32,
@@ -14040,7 +14057,7 @@ function PostCell({ post, onLike, onComment, onRepost, onShare, onMenuClick }) {
               {
                 type: "button",
                 onClick: onMenuClick,
-                className: "flex items-center justify-center",
+                className: "cursor-pointer flex items-center justify-center",
                 style: {
                   width: 32,
                   height: 32,
@@ -14623,7 +14640,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 +15168,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 +15178,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 +15189,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 +15199,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 +15265,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 +15442,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
           }
@@ -15442,17 +15461,18 @@ function CategorySection({ category, components, defaultExpanded = true }) {
       "button",
       {
         onClick: () => setIsExpanded(!isExpanded),
-        className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-[var(--canvas-surface)] rounded-md transition-colors",
+        className: "cursor-pointer flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-[var(--canvas-surface)] rounded-md transition-colors",
         children: [
           isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-[var(--canvas-text-muted)]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[var(--canvas-text-muted)]" }),
           /* @__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 +15485,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 +15493,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 +15504,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 +15523,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,14 +16317,15 @@ 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(
             "button",
             {
               onClick: () => removeComponent(component.id),
-              className: "p-0.5 rounded-full hover:bg-[var(--canvas-primary)]/20 transition-colors",
+              className: "cursor-pointer p-0.5 rounded-full hover:bg-[var(--canvas-primary)]/20 transition-colors",
               children: /* @__PURE__ */ jsx(X, { className: "size-3" })
             }
           )
@@ -16329,10 +16352,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 +16377,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: "cursor-pointer 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,
@@ -16374,7 +16399,7 @@ function ComponentSearch({
                 {
                   onClick: () => toggleComponent(component),
                   className: cn(
-                    "w-full flex items-start gap-3 px-3 py-2.5 text-left transition-colors border-b border-[var(--canvas-border)]/50 last:border-b-0",
+                    "cursor-pointer w-full flex items-start gap-3 px-3 py-2.5 text-left transition-colors border-b border-[var(--canvas-border)]/50 last:border-b-0",
                     isSelected ? "bg-[var(--canvas-surface-brand)]/50" : "hover:bg-[var(--canvas-surface)]"
                   ),
                   children: [
@@ -16388,7 +16413,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 +16436,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 +16453,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 +16570,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 +16584,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)]"
+            "cursor-pointer 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 +16598,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 +16611,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 +16621,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 +16634,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 +16652,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 +16662,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)]"
+              "cursor-pointer 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 +16676,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) {
@@ -16772,7 +16804,7 @@ function TileCard({ item, onSave, onClick }) {
                   "button",
                   {
                     onClick: handlePrevImage,
-                    className: "flex items-center justify-center shrink-0 transition-transform hover:scale-105",
+                    className: "cursor-pointer flex items-center justify-center shrink-0 transition-transform hover:scale-105",
                     style: {
                       width: "32px",
                       height: "32px",
@@ -16794,7 +16826,7 @@ function TileCard({ item, onSave, onClick }) {
                   "button",
                   {
                     onClick: handleNextImage,
-                    className: "flex items-center justify-center shrink-0 transition-transform hover:scale-105",
+                    className: "cursor-pointer flex items-center justify-center shrink-0 transition-transform hover:scale-105",
                     style: {
                       width: "32px",
                       height: "32px",
@@ -16817,7 +16849,7 @@ function TileCard({ item, onSave, onClick }) {
                 "button",
                 {
                   onClick: handleSave,
-                  className: "flex items-center transition-transform hover:scale-105",
+                  className: "cursor-pointer flex items-center transition-transform hover:scale-105",
                   style: {
                     height: "var(--spacing-5xl, 40px)",
                     paddingLeft: "var(--spacing-xl, 16px)",
@@ -19672,7 +19704,7 @@ function DateCell({
           "span",
           {
             className: cn(
-              "font-semibold text-base leading-6",
+              "font-semibold leading-6",
               showStrikethrough && "line-through"
             ),
             style: {
@@ -20096,13 +20128,14 @@ function PaginationButton({
       type: "button",
       onClick,
       className: cn(
-        "flex items-center justify-center shrink-0 transition-colors",
-        "font-semibold text-[14px] leading-[20px]",
+        "cursor-pointer flex items-center justify-center shrink-0 transition-colors",
+        "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
     }
@@ -20138,13 +20171,13 @@ function NavigationButton({
         "h-[32px] rounded-[var(--radius-xs)]",
         "border bg-[var(--canvas-background)] border-[var(--canvas-border)]",
         isIconOnly ? "w-[32px]" : "px-[var(--spacing-md)] gap-[var(--spacing-xs)]",
-        disabled ? "text-[var(--canvas-text-placeholder)] cursor-not-allowed" : "text-[var(--canvas-text)] hover:bg-[var(--canvas-surface)]",
+        disabled ? "text-[var(--canvas-text-placeholder)] cursor-not-allowed" : "cursor-pointer text-[var(--canvas-text)] hover:bg-[var(--canvas-surface)]",
         className
       ),
       "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 +20279,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 +20397,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 +20406,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)]"
+                "cursor-pointer 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 +20420,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 +20437,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)]"
+        "cursor-pointer 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 +20451,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 +20534,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)]"
+              "cursor-pointer 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 +20547,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 +20559,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)]"
+            "cursor-pointer 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 +20573,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 +20646,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 +20664,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 +20677,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 +20687,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 +20700,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 +20710,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 +20721,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 +20738,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 +20748,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)]"
+              "cursor-pointer 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 +20762,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 +20786,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 +20800,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 +20813,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 +20827,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 +20838,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 +20925,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: "cursor-pointer 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 +20948,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 +20968,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 +20990,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 +21009,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,
             '"'
@@ -23679,14 +23728,14 @@ function PricingCards() {
               "button",
               {
                 onClick: () => setIsAnnual(!isAnnual),
-                className: "relative w-20 h-11 rounded-full transition-colors",
+                className: "cursor-pointer relative w-20 h-11 rounded-full transition-colors",
                 style: {
                   backgroundColor: isAnnual ? "var(--canvas-primary)" : "var(--canvas-border)"
                 },
                 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"
                     }