diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
index af0848c0b8..01b177e20d 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
@@ -29,7 +29,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
   };
 
   return (
-    <div className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-2.5 overflow-y-scroll px-4 py-4">
+    <div className="vertical-scrollbar scrollbar-sm flex h-full w-full flex-col gap-2.5 overflow-y-scroll px-4 py-4">
       {sidebarMenu.map((item) => {
         const isActive = item.href === pathName || pathName?.startsWith(item.href);
         return (
diff --git a/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 6da0ce2e2b..c38a577d56 100644
--- a/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -55,7 +55,7 @@ export const IssueKanbanLayoutRoot = observer(function IssueKanbanLayoutRoot(pro
   return (
     <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
       <div
-        className="horizontal-scrollbar relative flex scrollbar-lg size-full overflow-x-auto overflow-y-hidden"
+        className="horizontal-scrollbar relative scrollbar-lg flex size-full overflow-x-auto overflow-y-hidden"
         ref={scrollableContainerRef}
       >
         <div className="relative h-full w-max min-w-full">
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
index ba7f052d19..4cddab5871 100644
--- a/apps/space/styles/globals.css
+++ b/apps/space/styles/globals.css
@@ -3,32 +3,13 @@
 @import "@plane/propel/styles/react-day-picker.css";
 @plugin "@tailwindcss/typography";
 
-/* stickies and editor colors */
+/* stickies and editor colors
+ * Text colors and the themed light/dark background ramps come from
+ * @plane/editor/styles (imported above), which is their single source of truth.
+ * Only the un-themed :root fallback below is kept: the editor package declares
+ * background colors solely under [data-theme*="light"] / [data-theme*="dark"],
+ * so without this they are undefined until a theme lands on the element. */
 :root {
-  /* text colors */
-  --editor-colors-gray-text: #5c5e63;
-  --editor-colors-peach-text: #ff5b59;
-  --editor-colors-pink-text: #f65385;
-  --editor-colors-orange-text: #fd9038;
-  --editor-colors-green-text: #0fc27b;
-  --editor-colors-light-blue-text: #17bee9;
-  --editor-colors-dark-blue-text: #266df0;
-  --editor-colors-purple-text: #9162f9;
-  /* end text colors */
-
-  /* background colors */
-  --editor-colors-gray-background: #d6d6d8;
-  --editor-colors-peach-background: #ffd5d7;
-  --editor-colors-pink-background: #fdd4e3;
-  --editor-colors-orange-background: #ffe3cd;
-  --editor-colors-green-background: #c3f0de;
-  --editor-colors-light-blue-background: #c5eff9;
-  --editor-colors-dark-blue-background: #c9dafb;
-  --editor-colors-purple-background: #e3d8fd;
-  /* end background colors */
-}
-/* background colors */
-[data-theme*="light"] {
   --editor-colors-gray-background: #d6d6d8;
   --editor-colors-peach-background: #ffd5d7;
   --editor-colors-pink-background: #fdd4e3;
@@ -38,17 +19,6 @@
   --editor-colors-dark-blue-background: #c9dafb;
   --editor-colors-purple-background: #e3d8fd;
 }
-[data-theme*="dark"] {
-  --editor-colors-gray-background: #404144;
-  --editor-colors-peach-background: #593032;
-  --editor-colors-pink-background: #562e3d;
-  --editor-colors-orange-background: #583e2a;
-  --editor-colors-green-background: #1d4a3b;
-  --editor-colors-light-blue-background: #1f495c;
-  --editor-colors-dark-blue-background: #223558;
-  --editor-colors-purple-background: #3d325a;
-}
-/* end background colors */
 
 /* Progress Bar Styles */
 :root {
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
index 8b1c74a1db..caa9156a78 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -149,7 +149,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
             />
           </div>
         ) : (
-          <div className="vertical-scrollbar mt-4 flex scrollbar-sm flex-grow flex-col gap-0.5 overflow-x-hidden overflow-y-auto pr-2 pl-9">
+          <div className="vertical-scrollbar mt-4 scrollbar-sm flex flex-grow flex-col gap-0.5 overflow-x-hidden overflow-y-auto pr-2 pl-9">
             {filteredProjects.map((projectId, index) => (
               <SidebarProjectsListItem
                 key={projectId}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
index 69e02a43bc..7bd93646c2 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
@@ -60,7 +60,7 @@ function ProfileActivityPage() {
           <h3 className="text-16 font-medium">{t("profile.stats.recent_activity.title")}</h3>
           {canDownloadActivity && <DownloadActivityButton />}
         </div>
-        <div className="vertical-scrollbar flex scrollbar-md h-full flex-col overflow-y-auto px-5 md:px-9">
+        <div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
           {activityPages}
           {pageCount < totalPages && resultsCount !== 0 && (
             <div className="flex w-full items-center justify-center text-11">
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
index 49e6479ade..4142152487 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
@@ -72,7 +72,7 @@ function CycleDetailPage({ params }: Route.ComponentProps) {
             {!isSidebarCollapsed && (
               <div
                 className={cn(
-                  "vertical-scrollbar absolute right-0 z-13 flex scrollbar-sm h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 shadow-raised-200 duration-300"
+                  "vertical-scrollbar absolute right-0 z-13 scrollbar-sm flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 shadow-raised-200 duration-300"
                 )}
               >
                 <CycleDetailsSidebar
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
index 1066ed4e2c..3a958965cb 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
@@ -68,7 +68,7 @@ function ModuleIssuesPage({ params }: Route.ComponentProps) {
           {!isSidebarCollapsed && (
             <div
               className={cn(
-                "vertical-scrollbar absolute right-0 z-13 flex scrollbar-sm h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 shadow-raised-200 duration-300"
+                "vertical-scrollbar absolute right-0 z-13 scrollbar-sm flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 shadow-raised-200 duration-300"
               )}
             >
               <ModuleAnalyticsSidebar moduleId={moduleId} handleClose={toggleSidebar} />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
index 8043f47f8c..e80d29cf78 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
@@ -40,7 +40,7 @@ function WorkspaceViewsPage() {
             mode="true-transparent"
           />
         </div>
-        <div className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col">
+        <div className="vertical-scrollbar scrollbar-lg flex h-full w-full flex-col">
           {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => t(v.i18n_label).toLowerCase().includes(query.toLowerCase())).map(
             (option) => (
               <GlobalDefaultViewListItem key={option.key} view={option} />
diff --git a/apps/web/core/components/core/list/list-root.tsx b/apps/web/core/components/core/list/list-root.tsx
index d81f2daeec..efe787e647 100644
--- a/apps/web/core/components/core/list/list-root.tsx
+++ b/apps/web/core/components/core/list/list-root.tsx
@@ -16,7 +16,7 @@ export function ListLayout(props: IListContainer) {
   return (
     <Row
       variant={ERowVariant.HUGGING}
-      className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col overflow-y-auto"
+      className="vertical-scrollbar scrollbar-lg flex h-full w-full flex-col overflow-y-auto"
     >
       {children}
     </Row>
diff --git a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
index 56dc05860e..42189b2f63 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -173,11 +173,11 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
         <Tab.Panels as={Fragment}>
           <Tab.Panel
             as="div"
-            className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
+            className="vertical-scrollbar scrollbar-sm flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
           >
             <div
               ref={issuesContainerRef}
-              className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-1 overflow-y-auto"
+              className="vertical-scrollbar scrollbar-sm flex h-full w-full flex-col gap-1 overflow-y-auto"
             >
               {cycleIssueDetails && "issueIds" in cycleIssueDetails ? (
                 cycleIssueDetails.issueCount > 0 ? (
@@ -264,7 +264,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
 
           <Tab.Panel
             as="div"
-            className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
+            className="vertical-scrollbar scrollbar-sm flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
           >
             {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
@@ -326,7 +326,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
 
           <Tab.Panel
             as="div"
-            className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
+            className="vertical-scrollbar scrollbar-sm flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
           >
             {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
diff --git a/apps/web/core/components/cycles/archived-cycles/header.tsx b/apps/web/core/components/cycles/archived-cycles/header.tsx
index 7b9cc56997..64980a7f6d 100644
--- a/apps/web/core/components/cycles/archived-cycles/header.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/header.tsx
@@ -72,7 +72,7 @@ export const ArchivedCyclesHeader = observer(function ArchivedCyclesHeader() {
 
   return (
     <div className="group relative flex border-b border-subtle">
-      <div className="horizontal-scrollbar flex scrollbar-sm w-full items-center gap-2 overflow-x-auto px-4">
+      <div className="horizontal-scrollbar scrollbar-sm flex w-full items-center gap-2 overflow-x-auto px-4">
         <ArchiveTabsList />
       </div>
       {/* filter options */}
diff --git a/apps/web/core/components/gantt-chart/chart/main-content.tsx b/apps/web/core/components/gantt-chart/chart/main-content.tsx
index f2f53e1da0..2ae48f5c7c 100644
--- a/apps/web/core/components/gantt-chart/chart/main-content.tsx
+++ b/apps/web/core/components/gantt-chart/chart/main-content.tsx
@@ -171,7 +171,7 @@ export const GanttChartMainContent = observer(function GanttChartMainContent(pro
               // DO NOT REMOVE THE ID
               id="gantt-container"
               className={cn(
-                "vertical-scrollbar horizontal-scrollbar flex scrollbar-lg h-full w-full overflow-auto border-t-[0.5px] border-subtle",
+                "vertical-scrollbar horizontal-scrollbar scrollbar-lg flex h-full w-full overflow-auto border-t-[0.5px] border-subtle",
                 {
                   "mb-8": bottomSpacing,
                 }
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 89715732c1..5f5ca94c85 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -261,7 +261,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
       </div>
       <IssueLayoutHOC layout={EIssueLayoutTypes.KANBAN}>
         <div
-          className={`horizontal-scrollbar relative flex scrollbar-lg h-full w-full bg-surface-2 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
+          className={`horizontal-scrollbar relative scrollbar-lg flex h-full w-full bg-surface-2 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
           ref={scrollableContainerRef}
         >
           <div className="relative h-full w-max min-w-full bg-surface-2">
diff --git a/apps/web/core/components/modules/archived-modules/header.tsx b/apps/web/core/components/modules/archived-modules/header.tsx
index a15c431df2..06f52ef0e0 100644
--- a/apps/web/core/components/modules/archived-modules/header.tsx
+++ b/apps/web/core/components/modules/archived-modules/header.tsx
@@ -82,7 +82,7 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
 
   return (
     <div className="group relative flex border-b border-subtle">
-      <div className="horizontal-scrollbar flex scrollbar-sm w-full items-center gap-2 overflow-x-auto px-4">
+      <div className="horizontal-scrollbar scrollbar-sm flex w-full items-center gap-2 overflow-x-auto px-4">
         <ArchiveTabsList />
       </div>
       {/* filter options */}
diff --git a/apps/web/core/components/modules/archived-modules/view.tsx b/apps/web/core/components/modules/archived-modules/view.tsx
index f7a07b4685..417eaeeecd 100644
--- a/apps/web/core/components/modules/archived-modules/view.tsx
+++ b/apps/web/core/components/modules/archived-modules/view.tsx
@@ -53,7 +53,7 @@ export const ArchivedModulesView = observer(function ArchivedModulesView(props:
   return (
     <div className="h-full overflow-y-auto">
       <div className="flex h-full w-full justify-between">
-        <div className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col overflow-y-auto">
+        <div className="vertical-scrollbar scrollbar-lg flex h-full w-full flex-col overflow-y-auto">
           {filteredArchivedModuleIds.map((moduleId) => (
             <ModuleListItem key={moduleId} moduleId={moduleId} />
           ))}
diff --git a/apps/web/core/components/pages/editor/editor-body.tsx b/apps/web/core/components/pages/editor/editor-body.tsx
index d8d55d2f79..523ca448b0 100644
--- a/apps/web/core/components/pages/editor/editor-body.tsx
+++ b/apps/web/core/components/pages/editor/editor-body.tsx
@@ -240,7 +240,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
 
   return (
     <Row
-      className="vertical-scrollbar relative flex scrollbar-md size-full flex-col overflow-x-hidden overflow-y-auto duration-200"
+      className="vertical-scrollbar relative scrollbar-md flex size-full flex-col overflow-x-hidden overflow-y-auto duration-200"
       variant={ERowVariant.HUGGING}
     >
       <div id="page-content-container" className="relative w-full flex-shrink-0">
diff --git a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
index ae6b52d83a..b827ff423d 100644
--- a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
+++ b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
@@ -22,7 +22,7 @@ export function ProfileSettingContentWrapper(props: Props) {
 
       <div
         className={cn(
-          "vertical-scrollbar mx-auto flex scrollbar-md h-full w-full flex-col px-8 py-10 md:px-20 md:py-16 lg:px-36 xl:px-56",
+          "vertical-scrollbar mx-auto scrollbar-md flex h-full w-full flex-col px-8 py-10 md:px-20 md:py-16 lg:px-36 xl:px-56",
           className
         )}
       >
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index d6c9ed78f4..e1e447dbe4 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -154,7 +154,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                     }
                   )}
                 >
-                  <div className="vertical-scrollbar flex scrollbar-sm max-h-96 flex-col items-start justify-start overflow-x-hidden overflow-y-scroll">
+                  <div className="vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-x-hidden overflow-y-scroll">
                     <span className="sticky top-0 z-21 h-full w-full flex-shrink-0 truncate rounded-md bg-surface-1 px-4 pt-3 pb-1 text-left text-13 font-medium text-placeholder">
                       {currentUser?.email}
                     </span>
diff --git a/apps/web/core/components/workspace/views/header.tsx b/apps/web/core/components/workspace/views/header.tsx
index f1a92a94f6..056dcceda8 100644
--- a/apps/web/core/components/workspace/views/header.tsx
+++ b/apps/web/core/components/workspace/views/header.tsx
@@ -94,7 +94,7 @@ export const GlobalViewsHeader = observer(function GlobalViewsHeader() {
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div
         ref={containerRef}
-        className="horizontal-scrollbar flex scrollbar-sm h-full w-full items-center overflow-x-auto overflow-y-hidden"
+        className="horizontal-scrollbar scrollbar-sm flex h-full w-full items-center overflow-x-auto overflow-y-hidden"
       >
         {DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
           <DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index ab520abe29..156a0fb61f 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -5,32 +5,13 @@
 @import "./emoji.css";
 @plugin "@tailwindcss/typography";
 
-/* stickies and editor colors */
+/* stickies and editor colors
+ * Text colors and the themed light/dark background ramps come from
+ * @plane/editor/styles (imported above), which is their single source of truth.
+ * Only the un-themed :root fallback below is kept: the editor package declares
+ * background colors solely under [data-theme*="light"] / [data-theme*="dark"],
+ * so without this they are undefined until a theme lands on the element. */
 :root {
-  /* text colors */
-  --editor-colors-gray-text: #5c5e63;
-  --editor-colors-peach-text: #ff5b59;
-  --editor-colors-pink-text: #f65385;
-  --editor-colors-orange-text: #fd9038;
-  --editor-colors-green-text: #0fc27b;
-  --editor-colors-light-blue-text: #17bee9;
-  --editor-colors-dark-blue-text: #266df0;
-  --editor-colors-purple-text: #9162f9;
-  /* end text colors */
-
-  /* background colors */
-  --editor-colors-gray-background: #d6d6d8;
-  --editor-colors-peach-background: #ffd5d7;
-  --editor-colors-pink-background: #fdd4e3;
-  --editor-colors-orange-background: #ffe3cd;
-  --editor-colors-green-background: #c3f0de;
-  --editor-colors-light-blue-background: #c5eff9;
-  --editor-colors-dark-blue-background: #c9dafb;
-  --editor-colors-purple-background: #e3d8fd;
-  /* end background colors */
-}
-/* background colors */
-[data-theme*="light"] {
   --editor-colors-gray-background: #d6d6d8;
   --editor-colors-peach-background: #ffd5d7;
   --editor-colors-pink-background: #fdd4e3;
@@ -40,17 +21,6 @@
   --editor-colors-dark-blue-background: #c9dafb;
   --editor-colors-purple-background: #e3d8fd;
 }
-[data-theme*="dark"] {
-  --editor-colors-gray-background: #404144;
-  --editor-colors-peach-background: #593032;
-  --editor-colors-pink-background: #562e3d;
-  --editor-colors-orange-background: #583e2a;
-  --editor-colors-green-background: #1d4a3b;
-  --editor-colors-light-blue-background: #1f495c;
-  --editor-colors-dark-blue-background: #223558;
-  --editor-colors-purple-background: #3d325a;
-}
-/* end background colors */
 
 .shadow-custom {
   box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
diff --git a/packages/propel/src/charts/components/legend.tsx b/packages/propel/src/charts/components/legend.tsx
index 89da225af7..cadef002f8 100644
--- a/packages/propel/src/charts/components/legend.tsx
+++ b/packages/propel/src/charts/components/legend.tsx
@@ -50,7 +50,7 @@ const CustomLegend = React.forwardRef(function CustomLegend(
   return (
     <div
       ref={ref}
-      className={cn("vertical-scrollbar flex scrollbar-sm items-center overflow-scroll px-4", {
+      className={cn("vertical-scrollbar scrollbar-sm flex items-center overflow-scroll px-4", {
         "max-h-full flex-col items-start py-4": layout === "vertical",
       })}
     >
diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx
index cd4b2b0bb0..f17c3432d8 100644
--- a/packages/propel/src/charts/components/tooltip.tsx
+++ b/packages/propel/src/charts/components/tooltip.tsx
@@ -28,7 +28,7 @@ export const CustomTooltip = React.memo(function CustomTooltip(props: Props) {
 
   return (
     <Card
-      className="vertical-scrollbar flex scrollbar-sm max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
+      className="vertical-scrollbar scrollbar-sm flex max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
       spacing={ECardSpacing.SM}
     >
       <p className="flex-shrink-0 truncate border-b border-subtle pb-2 text-11 font-medium text-primary">{label}</p>
diff --git a/packages/propel/src/charts/pie-chart/tooltip.tsx b/packages/propel/src/charts/pie-chart/tooltip.tsx
index 10dd2a9402..1c2dcf5ba4 100644
--- a/packages/propel/src/charts/pie-chart/tooltip.tsx
+++ b/packages/propel/src/charts/pie-chart/tooltip.tsx
@@ -20,7 +20,7 @@ export const CustomPieChartTooltip = React.memo(function CustomPieChartTooltip(p
 
   return (
     <Card
-      className="vertical-scrollbar flex scrollbar-sm max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
+      className="vertical-scrollbar scrollbar-sm flex max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
       spacing={ECardSpacing.SM}
     >
       <p className="flex-shrink-0 truncate border-b border-subtle pb-2 text-11 font-medium text-primary">{label}</p>
diff --git a/packages/tailwind-config/animations.css b/packages/tailwind-config/animations.css
deleted file mode 100644
index 04835346c9..0000000000
--- a/packages/tailwind-config/animations.css
+++ /dev/null
@@ -1,88 +0,0 @@
-@theme {
-  /* slide up */
-  --animate-slide-up: slide-up 0.3s ease-out forwards;
-  @keyframes slide-up {
-    from {
-      transform: translateY(10px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  /* slide in from bottom */
-  --animate-slide-in-from-bottom: slideInFromBottom 0.25s ease-out forwards;
-  @keyframes slideInFromBottom {
-    0% {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  /* slide in from top */
-  --animate-slide-in-from-top: slideInFromTop 0.25s ease-out forwards;
-  @keyframes slideInFromTop {
-    0% {
-      transform: translateY(-100%);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  /* slide out */
-  --animate-slide-out: slideOut 0.25s ease-out forwards;
-  @keyframes slideOut {
-    0% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-    100% {
-      transform: translateY(-100%);
-      opacity: 0;
-    }
-  }
-
-  /* slide out down */
-  --animate-slide-out-down: slideOutDown 0.25s ease-out forwards;
-  @keyframes slideOutDown {
-    0% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-    100% {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-  }
-
-  /* fade out */
-  --animate-fade-out: fadeOut 0.25s ease-out forwards;
-  @keyframes fadeOut {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  /* fade in */
-  --animate-fade-in: fadeIn 0.25s ease-out forwards;
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-}
diff --git a/packages/tailwind-config/index.css b/packages/tailwind-config/index.css
index ecebd1a56b..dae708c017 100644
--- a/packages/tailwind-config/index.css
+++ b/packages/tailwind-config/index.css
@@ -1,6 +1,26 @@
 @import "tailwindcss";
-@import "./variables.css";
-@import "./animations.css";
+/*
+ * Design tokens + animations come from @makeplane/propel, which supersedes the
+ * variables.css / animations.css this package used to ship. It defines every
+ * token name we had bar one — --scrollbar-thumb-surface-hover, whose consumers
+ * now point at propel's --scrollbar-thumb-hover — plus every --animate-* token
+ * and a superset of our keyframes, and it keys light/dark off the same
+ * [data-theme*="dark"] / [data-theme="dark-contrast"] selectors we already use.
+ *
+ * Token *values* are propel's, not ours: many differ from what this package
+ * shipped. See the migration notes for the drift that needs a visual pass.
+ *
+ * Imported as the two leaf files rather than the "@makeplane/propel/styles"
+ * barrel. The barrel is those same two files plus `@source "../"`, which points
+ * Tailwind at propel's dist and emits utilities for its components — dead CSS
+ * here, since we consume propel for tokens only and import none of its JS.
+ * Re-add the barrel if propel components are adopted.
+ *
+ * propel's CSS deliberately does not import tailwindcss itself, so that stays
+ * above.
+ */
+@import "@makeplane/propel/styles/variables";
+@import "@makeplane/propel/styles/animations";
 @source "../**/*.{ts,tsx}";
 
 * {
@@ -103,8 +123,10 @@ body {
     }
   }
 
+  /* Container hover out-orders `::-webkit-scrollbar-thumb:hover` and `:active`
+     at equal specificity, so this shade shows while hovering *and* dragging. */
   &:hover::-webkit-scrollbar-thumb {
-    @apply bg-scrollbar-thumb-surface-hover;
+    @apply bg-scrollbar-thumb-hover;
   }
 
   &::-webkit-scrollbar-corner {
@@ -116,7 +138,22 @@ body {
   margin-top: 44px;
 }
 
-/* Scrollbar variants */
+/* Scrollbar variants
+ * `sm`, `md` and `lg` collide by name with propel's own scrollbar utilities,
+ * imported at the top of this file. Both definitions are emitted and ours lands
+ * second, so it wins — but only for properties it actually restates. propel sets
+ * `scrollbar-width` / `scrollbar-color`, and from Chromium 121 setting either of
+ * those makes the browser ignore every ::-webkit-scrollbar rule on the element,
+ * which would silently drop the geometry below and leave one 11px scrollbar
+ * everywhere. Resetting both back to `auto` hands the pseudo-elements back.
+ *
+ * This leans on ours being emitted after propel's, which follows from `@utility`
+ * registration order and is not something Tailwind documents for duplicate
+ * names. Keep these definitions below the propel @import. If scrollbars ever
+ * turn thin and uniform app-wide, this is why — rename ours to break the tie.
+ *
+ * `xs` has no propel counterpart, so it needs no reset.
+ */
 @utility scrollbar-xs {
   &::-webkit-scrollbar {
     height: 10px;
@@ -127,6 +164,13 @@ body {
   }
 }
 @utility scrollbar-sm {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+
+  &:hover {
+    scrollbar-color: auto;
+  }
+
   &::-webkit-scrollbar {
     height: 12px;
     width: 12px;
@@ -137,6 +181,13 @@ body {
   }
 }
 @utility scrollbar-md {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+
+  &:hover {
+    scrollbar-color: auto;
+  }
+
   &::-webkit-scrollbar {
     height: 14px;
     width: 14px;
@@ -147,6 +198,13 @@ body {
   }
 }
 @utility scrollbar-lg {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+
+  &:hover {
+    scrollbar-color: auto;
+  }
+
   &::-webkit-scrollbar {
     height: 16px;
     width: 16px;
@@ -157,19 +215,6 @@ body {
   }
 }
 
-.hide-vertical-scrollbar::-webkit-scrollbar {
-  width: 0 !important;
-}
-
-.hide-horizontal-scrollbar::-webkit-scrollbar {
-  height: 0 !important;
-}
-
-.hide-both-scrollbars::-webkit-scrollbar {
-  height: 0 !important;
-  width: 0 !important;
-}
-
 /* highlight class */
 @utility highlight {
   border: 1px solid var(--border-color-accent-strong) !important;
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
index 6c37a83db3..f0acfc0166 100644
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@@ -13,6 +13,7 @@
     "./postcss.config.js": "./postcss.config.js"
   },
   "dependencies": {
+    "@makeplane/propel": "0.2.0",
     "@tailwindcss/postcss": "catalog:",
     "postcss": "catalog:"
   },
diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css
deleted file mode 100644
index 1f697cdb55..0000000000
--- a/packages/tailwind-config/variables.css
+++ /dev/null
@@ -1,1309 +0,0 @@
-@custom-variant dark (&:where([data-theme*="dark"], [data-theme*="dark"] *));
-@custom-variant dark-high-contrast (&:where([data-theme="dark-contrast"], [data-theme="dark-contrast"] *));
-@custom-variant light-high-contrast (&:where([data-theme="light-contrast"], [data-theme="light-contrast"] *));
-
-@layer base {
-  :root,
-  :host {
-    /* ---------- Alpha colors ---------- */
-    /* White alpha */
-    --alpha-white-0: oklch(1 0 0 / 0%);
-    --alpha-white-100: oklch(1 0 0 / 5%);
-    --alpha-white-200: oklch(1 0 0 / 10%);
-    --alpha-white-300: oklch(1 0 0 / 15%);
-    --alpha-white-400: oklch(1 0 0 / 20%);
-    --alpha-white-500: oklch(1 0 0 / 30%);
-    --alpha-white-600: oklch(1 0 0 / 40%);
-    --alpha-white-700: oklch(1 0 0 / 50%);
-    --alpha-white-800: oklch(1 0 0 / 60%);
-    --alpha-white-900: oklch(1 0 0 / 70%);
-    --alpha-white-1000: oklch(1 0 0 / 80%);
-    --alpha-white-1100: oklch(1 0 0 / 90%);
-    --alpha-white-1200: oklch(1 0 0 / 95%);
-    /* Black alpha */
-    --alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%);
-    --alpha-black-100: oklch(0.1482 0.0034 196.79 / 5%);
-    --alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%);
-    --alpha-black-300: oklch(0.1482 0.0034 196.79 / 15%);
-    --alpha-black-400: oklch(0.1482 0.0034 196.79 / 20%);
-    --alpha-black-500: oklch(0.1482 0.0034 196.79 / 30%);
-    --alpha-black-600: oklch(0.1482 0.0034 196.79 / 40%);
-    --alpha-black-700: oklch(0.1482 0.0034 196.79 / 50%);
-    --alpha-black-800: oklch(0.1482 0.0034 196.79 / 60%);
-    --alpha-black-900: oklch(0.1482 0.0034 196.79 / 70%);
-    --alpha-black-1000: oklch(0.1482 0.0034 196.79 / 80%);
-    --alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%);
-    --alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%);
-    /* --------- Extended colors ---------- */
-    /* Purple */
-    --extended-color-purple-25: oklch(0.981 0.0054 297.73);
-    --extended-color-purple-50: oklch(0.9421 0.0162 293.74);
-    --extended-color-purple-100: oklch(0.8808 0.0343 293.03);
-    --extended-color-purple-200: oklch(0.779 0.0639 293.01);
-    --extended-color-purple-300: oklch(0.6978 0.0888 291.44);
-    --extended-color-purple-400: oklch(0.6139 0.1164 290.19);
-    --extended-color-purple-500: oklch(0.5527 0.1361 288.8);
-    --extended-color-purple-600: oklch(0.4895 0.157 286.65);
-    --extended-color-purple-700: oklch(0.42 0.1303 287.25);
-    --extended-color-purple-800: oklch(0.3617 0.1077 287.53);
-    --extended-color-purple-900: oklch(0.2861 0.0795 287.41);
-    --extended-color-purple-950: oklch(0.219 0.0552 288.93);
-    /* Orange */
-    --extended-color-orange-25: oklch(0.9856 0.0084 56.32);
-    --extended-color-orange-50: oklch(0.964 0.0219 58.79);
-    --extended-color-orange-100: oklch(0.9152 0.0522 56.77);
-    --extended-color-orange-200: oklch(0.8504 0.097 56.87);
-    --extended-color-orange-300: oklch(0.801 0.1323 55.27);
-    --extended-color-orange-400: oklch(0.7563 0.1644 52.56);
-    --extended-color-orange-500: oklch(0.7177 0.1905 47.86);
-    --extended-color-orange-600: oklch(0.6601 0.1884 45.09);
-    --extended-color-orange-700: oklch(0.5737 0.162 45.72);
-    --extended-color-orange-800: oklch(0.5059 0.141467 46.3267);
-    --extended-color-orange-900: oklch(0.3897 0.105571 48.3415);
-    --extended-color-orange-950: oklch(0.2896 0.0746 51.86);
-    /* Crimson */
-    --extended-color-crimson-25: oklch(0.9805 0.0066 28.83);
-    --extended-color-crimson-50: oklch(0.9503 0.0186 21.57);
-    --extended-color-crimson-100: oklch(0.8847 0.0455 23.1);
-    --extended-color-crimson-200: oklch(0.791 0.0874 23.59);
-    --extended-color-crimson-300: oklch(0.72 0.124 24.83);
-    --extended-color-crimson-400: oklch(0.6556 0.1604 26.47);
-    --extended-color-crimson-500: oklch(0.5954 0.1956 28.51);
-    --extended-color-crimson-600: oklch(0.5284 0.185 28.96);
-    --extended-color-crimson-700: oklch(0.4754 0.1647 28.98);
-    --extended-color-crimson-800: oklch(0.4209 0.1438 29.01);
-    --extended-color-crimson-900: oklch(0.3249 0.106 28.39);
-    --extended-color-crimson-950: oklch(0.2457 0.0742 27.56);
-    /* Emerald */
-    --extended-color-emerald-25: oklch(0.9884 0.0082 157.1);
-    --extended-color-emerald-50: oklch(0.9563 0.0256 154.47);
-    --extended-color-emerald-100: oklch(0.9153 0.0531 153.59);
-    --extended-color-emerald-200: oklch(0.8679 0.0829 153.02);
-    --extended-color-emerald-300: oklch(0.8221 0.1121 152.16);
-    --extended-color-emerald-400: oklch(0.7785 0.1398 151.07);
-    --extended-color-emerald-500: oklch(0.7401 0.166 149.61);
-    --extended-color-emerald-600: oklch(0.6567 0.1599 148.98);
-    --extended-color-emerald-700: oklch(0.5883 0.1413 149.06);
-    --extended-color-emerald-800: oklch(0.4965 0.1172 149.18);
-    --extended-color-emerald-900: oklch(0.4003 0.0918 149.37);
-    --extended-color-emerald-950: oklch(0.2982 0.0631 150.55);
-    /* Pink */
-    --extended-color-pink-25: oklch(0.9828 0.005 345.28);
-    --extended-color-pink-50: oklch(0.9394 0.0201 340.71);
-    --extended-color-pink-100: oklch(0.8759 0.0418 339.71);
-    --extended-color-pink-200: oklch(0.805 0.0664 341.18);
-    --extended-color-pink-300: oklch(0.736 0.0938 342.16);
-    --extended-color-pink-400: oklch(0.6673 0.1206 342.89);
-    --extended-color-pink-500: oklch(0.6185 0.1388 344.06);
-    --extended-color-pink-600: oklch(0.5704 0.1574 345.25);
-    --extended-color-pink-700: oklch(0.4947 0.1333 344.88);
-    --extended-color-pink-800: oklch(0.4162 0.1108 344.66);
-    --extended-color-pink-900: oklch(0.326 0.0807 344.57);
-    --extended-color-pink-950: oklch(0.2474 0.0553 344.95);
-    /* Yellow */
-    --extended-color-yellow-25: oklch(0.989 0.0073 80.72);
-    --extended-color-yellow-50: oklch(0.9631 0.0268 85.66);
-    --extended-color-yellow-100: oklch(0.9297 0.0545 86.15);
-    --extended-color-yellow-200: oklch(0.8893 0.0843 85.3);
-    --extended-color-yellow-300: oklch(0.8522 0.1121 85.14);
-    --extended-color-yellow-400: oklch(0.8167 0.1342 83.9);
-    --extended-color-yellow-500: oklch(0.79 0.1466 82.04);
-    --extended-color-yellow-600: oklch(0.7399 0.1487 79.36);
-    --extended-color-yellow-700: oklch(0.683 0.1365 79.84);
-    --extended-color-yellow-800: oklch(0.5522 0.1093 80.44);
-    --extended-color-yellow-900: oklch(0.425 0.0824 81.46);
-    --extended-color-yellow-950: oklch(0.3142 0.0586 82.21);
-    /* Indigo */
-    --extended-color-indigo-25: oklch(0.9813 0.0074 260.73);
-    --extended-color-indigo-50: oklch(0.9415 0.022 263.19);
-    --extended-color-indigo-100: oklch(0.8828 0.045 263.07);
-    --extended-color-indigo-200: oklch(0.7852 0.086 263.89);
-    --extended-color-indigo-300: oklch(0.7066 0.121 263.57);
-    --extended-color-indigo-400: oklch(0.6322 0.1556 262.59);
-    --extended-color-indigo-500: oklch(0.579 0.1807 262.31);
-    --extended-color-indigo-600: oklch(0.5291 0.2045 262.05);
-    --extended-color-indigo-700: oklch(0.458 0.1753 262.2);
-    --extended-color-indigo-800: oklch(0.3862 0.1436 262.12);
-    --extended-color-indigo-900: oklch(0.3019 0.1051 262.16);
-    --extended-color-indigo-950: oklch(0.2308 0.0713 261.96);
-    /* Grey */
-    --extended-color-grey-25: oklch(0.9851 0 0);
-    --extended-color-grey-50: oklch(0.9461 0 0);
-    --extended-color-grey-100: oklch(0.9067 0 0);
-    --extended-color-grey-200: oklch(0.8297 0 0);
-    --extended-color-grey-300: oklch(0.7668 0 0);
-    --extended-color-grey-400: oklch(0.6993 0 0);
-    --extended-color-grey-500: oklch(0.65 0 0);
-    --extended-color-grey-600: oklch(0.5999 0 0);
-    --extended-color-grey-700: oklch(0.5208 0 0);
-    --extended-color-grey-800: oklch(0.4386 0 0);
-    --extended-color-grey-900: oklch(0.3407 0 0);
-    --extended-color-grey-950: oklch(0.2603 0 0);
-    /* Priority */
-    --priority-urgent: oklch(0.5798 0.1766 26.99);
-    --priority-high: oklch(0.6802 0.1633 50.67);
-    --priority-medium: oklch(0.79 0.1466 82.04);
-    --priority-low: oklch(0.579 0.1807 262.31);
-    --priority-none: oklch(0.6376 0.0129 231.77);
-
-    /* -------------------- Light mode color tokens -------------------- */
-    /* Neutral colors */
-    --neutral-white: oklch(1 0 0);
-    --neutral-100: oklch(0.9848 0.0003 230.66);
-    --neutral-200: oklch(0.9696 0.0007 230.67);
-    --neutral-300: oklch(0.9543 0.001 230.67);
-    --neutral-400: oklch(0.9389 0.0014 230.68);
-    --neutral-500: oklch(0.9235 0.001733 230.6853);
-    --neutral-600: oklch(0.8925 0.0024 230.7);
-    --neutral-700: oklch(0.8612 0.0032 230.71);
-    --neutral-800: oklch(0.6668 0.0079 230.82);
-    --neutral-900: oklch(0.6161 0.009153 230.867);
-    --neutral-1000: oklch(0.5288 0.0083 230.88);
-    --neutral-1100: oklch(0.4377 0.0066 230.87);
-    --neutral-1200: oklch(0.2378 0.0029 230.83);
-    --neutral-black: oklch(0.1472 0.0034 230.83);
-    /* Brand colors */
-    --brand-100: oklch(0.9847 0.0083 236.56);
-    --brand-200: oklch(0.9715 0.0167 230.9);
-    --brand-300: oklch(0.9428 0.0341 230.22);
-    --brand-400: oklch(0.9008 0.0587 232);
-    --brand-500: oklch(0.8414 0.0947 233.08);
-    --brand-600: oklch(0.7649 0.1392 236.3);
-    --brand-700: oklch(0.6766 0.1665 243.91);
-    --brand-900: oklch(0.4347 0.104093 242.4823);
-    --brand-1000: oklch(0.3399 0.0783 240.32);
-    --brand-1100: oklch(0.2626 0.0578 237.5);
-    --brand-1200: oklch(0.2093 0.0438 234.02);
-    --brand-default: oklch(0.4799 0.1158 242.91);
-    /* Green/Success colors */
-    --green-100: oklch(0.9819 0.0181 155.83);
-    --green-200: oklch(0.9624 0.0434 156.74);
-    --green-300: oklch(0.9258 0.0845 155.86);
-    --green-400: oklch(0.8704 0.149 154.62);
-    --green-500: oklch(0.7914 0.2091 151.66);
-    --green-600: oklch(0.7289 0.2119 147.82);
-    --green-700: oklch(0.632 0.185972 147.3695);
-    --green-800: oklch(0.5296 0.149485 148.9899);
-    --green-900: oklch(0.4468 0.1187 151.4);
-    --green-1000: oklch(0.3935 0.0957 152.28);
-    --green-1100: oklch(0.2654 0.0651 152.77);
-    /* Amber/Warning colors */
-    --amber-100: oklch(0.9869 0.0214 95.28);
-    --amber-200: oklch(0.9617 0.0592 95.89);
-    --amber-300: oklch(0.9244 0.1203 95.85);
-    --amber-400: oklch(0.8781 0.1688 91.86);
-    --amber-500: oklch(0.829 0.1712 81.04);
-    --amber-600: oklch(0.7724 0.172798 65.367);
-    --amber-700: oklch(0.6671 0.1685 53.38);
-    --amber-800: oklch(0.557 0.158291 45.3594);
-    --amber-900: oklch(0.4747 0.135757 44.9806);
-    --amber-1000: oklch(0.4149 0.1126 45.88);
-    --amber-1100: oklch(0.279 0.0773 45.6);
-    /* Red/Danger colors */
-    --red-100: oklch(0.9705 0.0129 17.38);
-    --red-200: oklch(0.9365 0.032 17.74);
-    --red-300: oklch(0.8834 0.0616 18.39);
-    --red-400: oklch(0.8053 0.1109 19.78);
-    --red-500: oklch(0.7022 0.1892 22.23);
-    --red-600: oklch(0.6378 0.2373 25.44);
-    --red-700: oklch(0.583 0.238666 28.4765);
-    --red-800: oklch(0.5095 0.208583 28.513);
-    --red-900: oklch(0.4446 0.1774 26.79);
-    --red-1000: oklch(0.3967 0.1408 25.71);
-    --red-1100: oklch(0.3493 0.1215 25.21);
-
-    /* -------------------- Light mode custom(derived) colors -------------------- */
-    /* Scrollbar colors */
-    --scrollbar-thumb: var(--alpha-black-200);
-    --scrollbar-thumb-surface-hover: var(--alpha-black-300);
-    --scrollbar-thumb-hover: var(--alpha-black-400);
-    --scrollbar-thumb-active: var(--alpha-black-500);
-    /* Background colors */
-    --bg-canvas: var(--neutral-300);
-    --bg-surface-1: var(--neutral-white);
-    --bg-surface-2: var(--neutral-100);
-    --bg-layer-1: var(--neutral-200);
-    --bg-layer-1-hover: var(--neutral-300);
-    --bg-layer-1-active: var(--neutral-400);
-    --bg-layer-1-selected: var(--neutral-400);
-    --bg-layer-2: var(--neutral-white);
-    --bg-layer-2-hover: var(--neutral-100);
-    --bg-layer-2-active: var(--neutral-200);
-    --bg-layer-2-selected: var(--neutral-200);
-    --bg-layer-3: var(--neutral-300);
-    --bg-layer-3-hover: var(--neutral-400);
-    --bg-layer-3-active: var(--neutral-500);
-    --bg-layer-3-selected: var(--neutral-500);
-    --bg-layer-transparent: var(--alpha-white-0);
-    --bg-layer-transparent-hover: var(--alpha-black-100);
-    --bg-layer-transparent-active: var(--alpha-black-200);
-    --bg-layer-transparent-selected: var(--alpha-black-300);
-    --bg-layer-disabled: var(--neutral-400);
-    --bg-accent-primary: var(--brand-default);
-    --bg-accent-primary-hover: var(--brand-900);
-    --bg-accent-primary-active: var(--brand-1000);
-    --bg-accent-subtle: var(--brand-100);
-    --bg-accent-subtle-hover: var(--brand-200);
-    --bg-accent-subtle-active: var(--brand-300);
-    --bg-success-primary: var(--green-700);
-    --bg-success-subtle: var(--green-100);
-    --bg-success-subtle-1: var(--green-200);
-    --bg-warning-primary: var(--amber-600);
-    --bg-warning-subtle: var(--amber-100);
-    --bg-danger-primary: var(--red-700);
-    --bg-danger-primary-hover: var(--red-800);
-    --bg-danger-primary-active: var(--red-900);
-    --bg-danger-primary-selected: var(--red-900);
-    --bg-danger-subtle: var(--red-100);
-    --bg-danger-subtle-hover: var(--red-200);
-    --bg-danger-subtle-active: var(--red-300);
-    --bg-danger-subtle-selected: var(--red-300);
-    --bg-danger-transparent: var(--red-100);
-    --bg-danger-transparent-hover: var(--red-100);
-    --bg-danger-transparent-active: var(--red-100);
-    --bg-danger-transparent-selected: var(--red-100);
-    --bg-backdrop: var(--alpha-black-500);
-    --bg-inverse: var(--alpha-black-1000);
-    /* Border colors */
-    --border-subtle: var(--neutral-400);
-    --border-subtle-1: var(--neutral-500);
-    --border-strong: var(--neutral-600);
-    --border-strong-1: var(--neutral-700);
-    --border-inverse: var(--neutral-white);
-    --border-disabled: var(--neutral-300);
-    --border-accent-strong: var(--brand-default);
-    --border-accent-subtle: var(--brand-300);
-    --border-success-strong: var(--green-700);
-    --border-success-subtle: var(--green-300);
-    --border-warning-strong: var(--amber-700);
-    --border-warning-subtle: var(--amber-400);
-    --border-danger-strong: var(--red-700);
-    --border-danger-subtle: var(--red-400);
-    /* Text colors */
-    --txt-primary: var(--neutral-1200);
-    --txt-secondary: var(--neutral-1100);
-    --txt-tertiary: var(--neutral-1000);
-    --txt-placeholder: var(--neutral-900);
-    --txt-disabled: var(--neutral-800);
-    --txt-accent-primary: var(--brand-default);
-    --txt-accent-secondary: var(--brand-700);
-    --txt-on-color: var(--neutral-100);
-    --txt-on-color-disabled: var(--alpha-black-400);
-    --txt-inverse: var(--neutral-white);
-    --txt-success-primary: var(--green-900);
-    --txt-success-secondary: var(--green-700);
-    --txt-warning-primary: var(--amber-900);
-    --txt-warning-secondary: var(--amber-700);
-    --txt-danger-primary: var(--red-900);
-    --txt-danger-secondary: var(--red-700);
-    /* Icon colors */
-    --txt-icon-primary: var(--neutral-1200);
-    --txt-icon-accent-subtle: var(--brand-500);
-    --txt-icon-accent-primary: var(--brand-default);
-    --txt-icon-danger-primary: var(--red-900);
-    --txt-icon-danger-secondary: var(--red-700);
-    --txt-icon-success-primary: var(--green-900);
-    --txt-icon-success-secondary: var(--green-700);
-    --txt-icon-warning-primary: var(--amber-900);
-    --txt-icon-warning-secondary: var(--amber-700);
-    --txt-icon-accent-primary-inverse: var(--brand-900);
-    --txt-icon-accent-secondary: var(--brand-1200);
-    --txt-icon-secondary: var(--neutral-1100);
-    --txt-icon-tertiary: var(--neutral-900);
-    --txt-icon-placeholder: var(--neutral-800);
-    --txt-icon-disabled: var(--neutral-700);
-    --txt-icon-danger: var(--red-700);
-    --txt-icon-on-color: var(--neutral-white);
-    --txt-icon-on-color-disabled: var(--alpha-black-400);
-    --txt-icon-inverse: var(--neutral-white);
-    /* Link colors */
-    --txt-link-primary: var(--brand-default);
-    --txt-link-primary-hover: var(--brand-900);
-    --txt-link-secondary: var(--neutral-900);
-    /* Label colors */
-    --label-indigo-bg: var(--extended-color-indigo-50);
-    --label-indigo-bg-strong: var(--extended-color-indigo-700);
-    --label-indigo-hover: var(--extended-color-indigo-100);
-    --label-indigo-icon: var(--extended-color-indigo-700);
-    --label-indigo-text: var(--extended-color-indigo-700);
-    --label-indigo-border: var(--extended-color-indigo-700);
-    --label-indigo-focus: var(--extended-color-indigo-500);
-    --label-emerald-bg: var(--extended-color-emerald-50);
-    --label-emerald-bg-strong: var(--extended-color-emerald-600);
-    --label-emerald-hover: var(--extended-color-emerald-200);
-    --label-emerald-icon: var(--extended-color-emerald-800);
-    --label-emerald-text: var(--extended-color-emerald-800);
-    --label-emerald-border: var(--extended-color-emerald-800);
-    --label-emerald-focus: var(--extended-color-emerald-700);
-    --label-grey-bg: var(--extended-color-grey-50);
-    --label-grey-bg-strong: var(--extended-color-grey-700);
-    --label-grey-hover: var(--extended-color-grey-100);
-    --label-grey-icon: var(--extended-color-grey-700);
-    --label-grey-text: var(--extended-color-grey-700);
-    --label-grey-border: var(--extended-color-grey-700);
-    --label-grey-focus: var(--extended-color-grey-500);
-    --label-crimson-bg: var(--extended-color-crimson-50);
-    --label-crimson-bg-strong: var(--extended-color-crimson-700);
-    --label-crimson-hover: var(--extended-color-crimson-100);
-    --label-crimson-icon: var(--extended-color-crimson-700);
-    --label-crimson-text: var(--extended-color-crimson-700);
-    --label-crimson-border: var(--extended-color-crimson-700);
-    --label-crimson-focus: var(--extended-color-crimson-500);
-    --label-yellow-bg: var(--extended-color-yellow-50);
-    --label-yellow-bg-strong: var(--extended-color-yellow-600);
-    --label-yellow-hover: var(--extended-color-yellow-100);
-    --label-yellow-icon: var(--extended-color-yellow-700);
-    --label-yellow-text: var(--extended-color-yellow-700);
-    --label-yellow-border: var(--extended-color-yellow-600);
-    --label-yellow-focus: var(--extended-color-yellow-400);
-    --label-orange-bg: var(--extended-color-orange-50);
-    --label-orange-bg-strong: var(--extended-color-orange-600);
-    --label-orange-hover: var(--extended-color-orange-100);
-    --label-orange-icon: var(--extended-color-orange-600);
-    --label-orange-text: var(--extended-color-orange-600);
-    --label-orange-border: var(--extended-color-orange-600);
-    --label-orange-focus: var(--extended-color-orange-300);
-    --label-pink-bg: var(--extended-color-pink-50);
-    --label-pink-bg-strong: var(--extended-color-pink-600);
-    --label-pink-hover: var(--extended-color-pink-100);
-    --label-pink-icon: var(--extended-color-pink-600);
-    --label-pink-text: var(--extended-color-pink-600);
-    --label-pink-border: var(--extended-color-pink-600);
-    --label-pink-focus: var(--extended-color-pink-400);
-    --label-purple-bg: var(--extended-color-purple-50);
-    --label-purple-bg-strong: var(--extended-color-purple-500);
-    --label-purple-hover: var(--extended-color-purple-100);
-    --label-purple-icon: var(--extended-color-purple-500);
-    --label-purple-text: var(--extended-color-purple-600);
-    --label-purple-border: var(--extended-color-purple-600);
-    --label-purple-focus: var(--extended-color-purple-300);
-    /* Illustration colors */
-    --illustration-fill-primary: var(--neutral-white);
-    --illustration-fill-secondary: var(--neutral-200);
-    --illustration-fill-tertiary: var(--neutral-400);
-    --illustration-fill-quaternary: var(--neutral-700);
-    --illustration-stroke-primary: var(--neutral-700);
-    --illustration-stroke-secondary: var(--neutral-800);
-    --illustration-stroke-tertiary: var(--neutral-1200);
-    /* Neutral plan colors */
-    --txt-plans-neutral-primary: var(--neutral-1000);
-    --txt-plans-neutral-color: var(--neutral-100);
-    --bg-plans-neutral-subtle: var(--neutral-400);
-    --bg-plans-neutral-solid: var(--neutral-1200);
-    /* Brand plan colors */
-    --txt-plans-brand-primary: var(--brand-1200);
-    --txt-plans-brand-color: var(--neutral-100);
-    --bg-plans-brand-subtle: var(--brand-200);
-    --bg-plans-brand-solid: var(--brand-1200);
-
-    /* ---------- Dark mode color tokens ---------- */
-    @variant dark {
-      /* Neutral colors */
-      --neutral-black: oklch(0.1689 0.0021 230.81);
-      --neutral-100: oklch(0.1932 0.002 230.81);
-      --neutral-200: oklch(0.2158 0.0025 230.82);
-      --neutral-300: oklch(0.2378 0.0029 230.83);
-      --neutral-400: oklch(0.2593 0.0033 230.84);
-      --neutral-500: oklch(0.3011 0.0041 230.85);
-      --neutral-600: oklch(0.3415 0.0049 230.86);
-      --neutral-700: oklch(0.3999 0.0059 230.87);
-      --neutral-800: oklch(0.5989 0.0096 230.88);
-      --neutral-900: oklch(0.6835 0.0074 230.81);
-      --neutral-1000: oklch(0.7655 0.0054 230.76);
-      --neutral-1100: oklch(0.8455 0.0035 230.72);
-      --neutral-1200: oklch(0.9235 0.001733 230.6853);
-      --neutral-white: oklch(0.9702 0 0);
-      /* Brand colors */
-      --brand-100: oklch(0.2029 0.03 232.24);
-      --brand-200: oklch(0.2513 0.0418 234.6);
-      --brand-300: oklch(0.3208 0.05806 236.44);
-      --brand-400: oklch(0.4088 0.077702 237.13);
-      --brand-500: oklch(0.4511 0.087024 237.37);
-      --brand-700: oklch(0.7408 0.100309 233.89);
-      --brand-800: oklch(0.8318 0.065614 232.07);
-      --brand-900: oklch(0.8969 0.040089 231.35);
-      --brand-1000: oklch(0.9409 0.022883 231.01);
-      --brand-1100: oklch(0.9704 0.011421 230.82);
-      --brand-1200: oklch(0.9856 0.005 228.82);
-      --brand-default: oklch(0.6311 0.126281 238.01);
-      /* Green colors */
-      --green-100: oklch(0.2721 0.067322 152.52);
-      --green-200: oklch(0.3935 0.0957 152.28);
-      --green-300: oklch(0.4468 0.1187 151.4);
-      --green-400: oklch(0.5296 0.149485 148.9899);
-      --green-500: oklch(0.632 0.185972 147.3695);
-      --green-600: oklch(0.7289 0.2119 147.82);
-      --green-700: oklch(0.7914 0.2091 151.66);
-      --green-800: oklch(0.8704 0.149 154.62);
-      --green-900: oklch(0.9258 0.0845 155.86);
-      --green-1000: oklch(0.9624 0.0434 156.74);
-      --green-1100: oklch(0.9819 0.0181 155.83);
-      /* Amber colors */
-      --amber-100: oklch(0.3042 0.0853 45.16);
-      --amber-200: oklch(0.4149 0.1126 45.88);
-      --amber-300: oklch(0.4747 0.135757 44.9806);
-      --amber-400: oklch(0.557 0.158291 45.3594);
-      --amber-500: oklch(0.6671 0.1685 53.38);
-      --amber-600: oklch(0.7724 0.172798 65.367);
-      --amber-700: oklch(0.829 0.1712 81.04);
-      --amber-800: oklch(0.8781 0.1688 91.86);
-      --amber-900: oklch(0.9244 0.1203 95.85);
-      --amber-1000: oklch(0.9617 0.0592 95.89);
-      --amber-1100: oklch(0.9869 0.0214 95.28);
-      /* Red colors */
-      --red-100: oklch(0.2615 0.085 24.41);
-      --red-200: oklch(0.3967 0.1408 25.71);
-      --red-300: oklch(0.4446 0.1774 26.79);
-      --red-400: oklch(0.5095 0.208583 28.513);
-      --red-500: oklch(0.583 0.238666 28.4765);
-      --red-600: oklch(0.6378 0.2373 25.44);
-      --red-700: oklch(0.7022 0.1892 22.23);
-      --red-800: oklch(0.8053 0.1109 19.78);
-      --red-900: oklch(0.8834 0.0616 18.39);
-      --red-1000: oklch(0.9365 0.032 17.74);
-      --red-1100: oklch(0.9705 0.0129 17.38);
-      /* -------------------- Dark mode derived colors -------------------- */
-      /* Scrollbar colors */
-      --scrollbar-thumb: var(--alpha-white-200);
-      --scrollbar-thumb-surface-hover: var(--alpha-white-300);
-      --scrollbar-thumb-hover: var(--alpha-white-400);
-      --scrollbar-thumb-active: var(--alpha-white-500);
-      /* Background colors */
-      --bg-canvas: var(--neutral-black);
-      --bg-surface-1: var(--neutral-100);
-      --bg-surface-2: var(--neutral-200);
-      --bg-layer-1: var(--neutral-200);
-      --bg-layer-1-hover: var(--neutral-300);
-      --bg-layer-1-active: var(--neutral-400);
-      --bg-layer-1-selected: var(--neutral-400);
-      --bg-layer-2: var(--neutral-300);
-      --bg-layer-2-hover: var(--neutral-400);
-      --bg-layer-2-active: var(--neutral-500);
-      --bg-layer-2-selected: var(--neutral-500);
-      --bg-layer-3: var(--neutral-400);
-      --bg-layer-3-hover: var(--neutral-500);
-      --bg-layer-3-active: var(--neutral-600);
-      --bg-layer-3-selected: var(--neutral-600);
-      --bg-layer-transparent: var(--alpha-black-0);
-      --bg-layer-transparent-hover: var(--alpha-white-100);
-      --bg-layer-transparent-active: var(--alpha-white-200);
-      --bg-layer-transparent-selected: var(--alpha-white-300);
-      --bg-layer-disabled: var(--neutral-700);
-      --bg-accent-primary: var(--brand-default);
-      --bg-accent-primary-hover: var(--brand-500);
-      --bg-accent-primary-active: var(--brand-400);
-      --bg-accent-subtle: var(--brand-100);
-      --bg-accent-subtle-hover: var(--brand-200);
-      --bg-accent-subtle-active: var(--brand-300);
-      --bg-success-primary: var(--green-700);
-      --bg-success-subtle: var(--green-100);
-      --bg-success-subtle-1: var(--green-100);
-      --bg-warning-primary: var(--amber-600);
-      --bg-warning-subtle: var(--amber-100);
-      --bg-danger-primary: var(--red-300);
-      --bg-danger-primary-hover: var(--red-400);
-      --bg-danger-primary-active: var(--red-500);
-      --bg-danger-primary-selected: var(--red-500);
-      --bg-danger-subtle: var(--red-100);
-      --bg-danger-subtle-hover: var(--red-200);
-      --bg-danger-subtle-active: var(--red-300);
-      --bg-danger-subtle-selected: var(--red-300);
-      --bg-danger-transparent: var(--red-100);
-      --bg-danger-transparent-hover: var(--red-100);
-      --bg-danger-transparent-active: var(--red-100);
-      --bg-danger-transparent-selected: var(--red-100);
-      --bg-backdrop: var(--alpha-black-1000);
-      --bg-inverse: var(--alpha-white-1000);
-      /* Border colors */
-      --border-subtle: var(--neutral-400);
-      --border-subtle-1: var(--neutral-500);
-      --border-strong: var(--neutral-600);
-      --border-strong-1: var(--neutral-700);
-      --border-inverse: var(--neutral-100);
-      --border-disabled: var(--neutral-300);
-      --border-accent-strong: var(--brand-default);
-      --border-accent-subtle: var(--brand-300);
-      --border-success-strong: var(--green-400);
-      --border-success-subtle: var(--green-200);
-      --border-warning-strong: var(--amber-400);
-      --border-warning-subtle: var(--amber-200);
-      --border-danger-strong: var(--red-700);
-      --border-danger-subtle: var(--red-200);
-      /* Text colors */
-      --txt-primary: var(--neutral-1200);
-      --txt-secondary: var(--neutral-1100);
-      --txt-tertiary: var(--neutral-1000);
-      --txt-placeholder: var(--neutral-900);
-      --txt-disabled: var(--neutral-800);
-      --txt-accent-primary: var(--brand-default);
-      --txt-accent-secondary: var(--brand-700);
-      --txt-on-color: var(--neutral-1200);
-      --txt-on-color-disabled: var(--alpha-white-400);
-      --txt-inverse: var(--neutral-black);
-      --txt-success-primary: var(--green-900);
-      --txt-success-secondary: var(--green-700);
-      --txt-warning-primary: var(--amber-900);
-      --txt-warning-secondary: var(--amber-700);
-      --txt-danger-primary: var(--red-900);
-      --txt-danger-secondary: var(--red-700);
-      /* Icon colors */
-      --txt-icon-primary: var(--neutral-1200);
-      --txt-icon-accent-subtle: var(--brand-700);
-      --txt-icon-accent-primary: var(--brand-default);
-      --txt-icon-accent-primary-inverse: var(--brand-900);
-      --txt-icon-accent-secondary: var(--brand-1200);
-      --txt-icon-danger-primary: var(--red-900);
-      --txt-icon-danger-secondary: var(--red-700);
-      --txt-icon-success-primary: var(--green-900);
-      --txt-icon-success-secondary: var(--green-700);
-      --txt-icon-warning-primary: var(--amber-900);
-      --txt-icon-warning-secondary: var(--amber-700);
-      --txt-icon-secondary: var(--neutral-1100);
-      --txt-icon-tertiary: var(--neutral-1000);
-      --txt-icon-placeholder: var(--neutral-800);
-      --txt-icon-disabled: var(--neutral-700);
-      --txt-icon-danger: var(--red-700);
-      --txt-icon-on-color: var(--neutral-white);
-      --txt-icon-on-color-disabled: var(--alpha-white-400);
-      --txt-icon-inverse: var(--neutral-black);
-      /* Link colors */
-      --txt-link-primary: var(--brand-default);
-      --txt-link-primary-hover: var(--brand-700);
-      --txt-link-secondary: var(--neutral-1100);
-      /* Label colors */
-      --label-indigo-bg: var(--extended-color-indigo-900);
-      --label-indigo-bg-strong: var(--extended-color-indigo-500);
-      --label-indigo-hover: var(--extended-color-indigo-800);
-      --label-indigo-icon: var(--extended-color-indigo-400);
-      --label-indigo-text: var(--extended-color-indigo-400);
-      --label-indigo-border: var(--extended-color-indigo-400);
-      --label-indigo-focus: var(--extended-color-indigo-400);
-      --label-emerald-bg: var(--extended-color-emerald-950);
-      --label-emerald-bg-strong: var(--extended-color-emerald-600);
-      --label-emerald-hover: var(--extended-color-emerald-900);
-      --label-emerald-icon: var(--extended-color-emerald-400);
-      --label-emerald-text: var(--extended-color-emerald-400);
-      --label-emerald-border: var(--extended-color-emerald-400);
-      --label-emerald-focus: var(--extended-color-emerald-700);
-      --label-grey-bg: var(--extended-color-grey-900);
-      --label-grey-bg-strong: var(--extended-color-grey-500);
-      --label-grey-hover: var(--extended-color-grey-800);
-      --label-grey-icon: var(--extended-color-grey-400);
-      --label-grey-text: var(--extended-color-grey-400);
-      --label-grey-border: var(--extended-color-grey-400);
-      --label-grey-focus: var(--extended-color-grey-400);
-      --label-crimson-bg: var(--extended-color-crimson-950);
-      --label-crimson-bg-strong: var(--extended-color-crimson-500);
-      --label-crimson-hover: var(--extended-color-crimson-900);
-      --label-crimson-icon: var(--extended-color-crimson-400);
-      --label-crimson-text: var(--extended-color-crimson-400);
-      --label-crimson-border: var(--extended-color-crimson-400);
-      --label-crimson-focus: var(--extended-color-crimson-400);
-      --label-yellow-bg: var(--extended-color-yellow-950);
-      --label-yellow-bg-strong: var(--extended-color-yellow-500);
-      --label-yellow-hover: var(--extended-color-yellow-900);
-      --label-yellow-icon: var(--extended-color-yellow-500);
-      --label-yellow-text: var(--extended-color-yellow-500);
-      --label-yellow-border: var(--extended-color-yellow-500);
-      --label-yellow-focus: var(--extended-color-yellow-400);
-      --label-orange-bg: var(--extended-color-orange-950);
-      --label-orange-bg-strong: var(--extended-color-orange-400);
-      --label-orange-hover: var(--extended-color-orange-900);
-      --label-orange-icon: var(--extended-color-orange-300);
-      --label-orange-text: var(--extended-color-orange-300);
-      --label-orange-border: var(--extended-color-orange-300);
-      --label-orange-focus: var(--extended-color-orange-300);
-      --label-pink-bg: var(--extended-color-pink-900);
-      --label-pink-bg-strong: var(--extended-color-pink-500);
-      --label-pink-hover: var(--extended-color-pink-800);
-      --label-pink-icon: var(--extended-color-pink-400);
-      --label-pink-text: var(--extended-color-pink-400);
-      --label-pink-border: var(--extended-color-pink-400);
-      --label-pink-focus: var(--extended-color-pink-400);
-      --label-purple-bg: var(--extended-color-purple-900);
-      --label-purple-bg-strong: var(--extended-color-purple-400);
-      --label-purple-hover: var(--extended-color-purple-800);
-      --label-purple-icon: var(--extended-color-purple-400);
-      --label-purple-text: var(--extended-color-purple-400);
-      --label-purple-border: var(--extended-color-purple-400);
-      --label-purple-focus: var(--extended-color-purple-300);
-      /* Illustration colors */
-      --illustration-fill-primary: var(--neutral-400);
-      --illustration-fill-secondary: var(--neutral-500);
-      --illustration-fill-tertiary: var(--neutral-700);
-      --illustration-fill-quaternary: var(--neutral-700);
-      --illustration-stroke-primary: var(--neutral-700);
-      --illustration-stroke-secondary: var(--neutral-800);
-      --illustration-stroke-tertiary: var(--neutral-1000);
-      /* Neutral plan colors */
-      --txt-plans-neutral-primary: var(--neutral-1000);
-      --txt-plans-neutral-color: var(--neutral-100);
-      --bg-plans-neutral-subtle: var(--neutral-500);
-      --bg-plans-neutral-solid: var(--neutral-1100);
-      /* Brand plan colors */
-      --txt-plans-brand-primary: var(--brand-1000);
-      --txt-plans-brand-color: var(--brand-100);
-      --bg-plans-brand-subtle: var(--brand-200);
-      --bg-plans-brand-solid: var(--brand-1100);
-    }
-
-    /* -------------------- Dark high contrast mode color tokens -------------------- */
-    @variant dark-high-contrast {
-      /* Border colors */
-      --border-subtle: var(--neutral-1200);
-      --border-subtle-1: var(--neutral-1100);
-      --border-strong: var(--neutral-1000);
-      --border-strong-1: var(--neutral-900);
-      --border-inverse: var(--neutral-white);
-      --border-disabled: var(--neutral-700);
-      --border-accent-strong: var(--brand-default);
-      --border-accent-subtle: var(--brand-300);
-      --border-success-strong: var(--green-400);
-      --border-success-subtle: var(--green-200);
-      --border-warning-strong: var(--amber-400);
-      --border-warning-subtle: var(--amber-200);
-      --border-danger-strong: var(--red-400);
-      --border-danger-subtle: var(--red-200);
-    }
-
-    /* -------------------- Light high contrast mode color tokens -------------------- */
-
-    @variant light-high-contrast {
-      /* Border colors */
-      --border-subtle: var(--neutral-1200);
-      --border-subtle-1: var(--neutral-1100);
-      --border-strong: var(--neutral-1000);
-      --border-strong-1: var(--neutral-900);
-      --border-inverse: var(--neutral-black);
-      --border-disabled: var(--neutral-700);
-      --border-accent-strong: var(--brand-default);
-      --border-accent-subtle: var(--brand-300);
-      --border-success-strong: var(--green-700);
-      --border-success-subtle: var(--green-600);
-      --border-warning-strong: var(--amber-700);
-      --border-warning-subtle: var(--amber-400);
-      --border-danger-strong: var(--red-700);
-      --border-danger-subtle: var(--red-400);
-    }
-  }
-}
-
-/* -------------------- Theme tokens -------------------- */
-@theme {
-  --color-*: initial;
-  --color-white: oklch(1 0 0);
-  --color-black: oklch(0.1482 0.0034 196.79);
-  /* ---------- Border radius ---------- */
-  --radius-4xl: initial;
-  /* ---------- Border width ---------- */
-  --border-width-*: initial;
-  --border-width-sm: 1px;
-  --border-width-md: 1.5px;
-  --border-width-lg: 2px;
-  --border-width-xl: 2.5px;
-  --default-border-width: 1px;
-  /* ---------- Outline width ---------- */
-  --outline-width-*: initial;
-  /* ---------- Ring width ---------- */
-  --ring-width-*: initial;
-  /* ---------- Shadow ---------- */
-  --shadow-*: initial;
-  --shadow-raised-100: 0px 1px 6px -1px #292f3d08, 0px 1px 4px 0px #292f3d0a;
-  --shadow-raised-200: 0px 1px 2px -1px #292f3d0f, 0px 1px 3px 0px #292f3d0d;
-  --shadow-raised-300: 0px 2px 4px -1px #292f3d0a, 0px 4px 6px -1px #292f3d0d;
-  --shadow-overlay-100: 0px 10px 10px -5px #292f3d0a, 0px 10px 40px -5px #292f3d0a;
-  --shadow-overlay-200: 0px 10px 10px -10px #292f3d0a, 0px 30px 60px -12px #292f3d1a;
-  --shadow-direction-left: -10px 0px 30px -5px #292f3d05, -5px 0px 80px -5px #292f3d0a;
-  --shadow-direction-right: 10px 0px 30px -5px #0000000a, 5px 0px 80px -5px #0000000a;
-  /* --------- Height --------- */
-  --height-header: 3.25rem;
-  /* --------- Padding --------- */
-  --padding-page: 1.35rem;
-  --padding-page-x: 1.35rem;
-  --padding-page-y: 1.35rem;
-}
-
-/* -------------------- Semantic colors (Final colors to be used in components) -------------------- */
-@theme inline {
-  /* ---------- Outline width ---------- */
-  --outline-width-sm: var(--border-width-sm);
-  --outline-width-md: var(--border-width-md);
-  --outline-width-lg: var(--border-width-lg);
-  --outline-width-xl: var(--border-width-xl);
-  --default-outline-width: var(--default-border-width);
-  /* ---------- Ring width ---------- */
-  --ring-width-sm: var(--border-width-sm);
-  --ring-width-md: var(--border-width-md);
-  --ring-width-lg: var(--border-width-lg);
-  --ring-width-xl: var(--border-width-xl);
-  --default-ring-width: var(--default-border-width);
-  /* Scrollbar colors */
-  --background-color-scrollbar-thumb: var(--scrollbar-thumb);
-  --background-color-scrollbar-thumb-surface-hover: var(--scrollbar-thumb-surface-hover);
-  --background-color-scrollbar-thumb-hover: var(--scrollbar-thumb-hover);
-  --background-color-scrollbar-thumb-active: var(--scrollbar-thumb-active);
-  /* Background colors */
-  --background-color-canvas: var(--bg-canvas);
-  --background-color-surface-1: var(--bg-surface-1);
-  --background-color-surface-2: var(--bg-surface-2);
-  --background-color-layer-1: var(--bg-layer-1);
-  --background-color-layer-1-hover: var(--bg-layer-1-hover);
-  --background-color-layer-1-active: var(--bg-layer-1-active);
-  --background-color-layer-1-selected: var(--bg-layer-1-selected);
-  --background-color-layer-2: var(--bg-layer-2);
-  --background-color-layer-2-hover: var(--bg-layer-2-hover);
-  --background-color-layer-2-active: var(--bg-layer-2-active);
-  --background-color-layer-2-selected: var(--bg-layer-2-selected);
-  --background-color-layer-3: var(--bg-layer-3);
-  --background-color-layer-3-hover: var(--bg-layer-3-hover);
-  --background-color-layer-3-active: var(--bg-layer-3-active);
-  --background-color-layer-3-selected: var(--bg-layer-3-selected);
-  --background-color-layer-transparent: var(--bg-layer-transparent);
-  --background-color-layer-transparent-hover: var(--bg-layer-transparent-hover);
-  --background-color-layer-transparent-active: var(--bg-layer-transparent-active);
-  --background-color-layer-transparent-selected: var(--bg-layer-transparent-selected);
-  --background-color-layer-disabled: var(--bg-layer-disabled);
-  --background-color-accent-primary: var(--bg-accent-primary);
-  --background-color-accent-primary-hover: var(--bg-accent-primary-hover);
-  --background-color-accent-primary-active: var(--bg-accent-primary-active);
-  --background-color-accent-subtle: var(--bg-accent-subtle);
-  --background-color-accent-subtle-hover: var(--bg-accent-subtle-hover);
-  --background-color-accent-subtle-active: var(--bg-accent-subtle-active);
-  --background-color-success-primary: var(--bg-success-primary);
-  --background-color-success-subtle: var(--bg-success-subtle);
-  --background-color-success-subtle-1: var(--bg-success-subtle-1);
-  --background-color-warning-primary: var(--bg-warning-primary);
-  --background-color-warning-subtle: var(--bg-warning-subtle);
-  --background-color-danger-primary: var(--bg-danger-primary);
-  --background-color-danger-primary-hover: var(--bg-danger-primary-hover);
-  --background-color-danger-primary-active: var(--bg-danger-primary-active);
-  --background-color-danger-primary-selected: var(--bg-danger-primary-selected);
-  --background-color-danger-subtle: var(--bg-danger-subtle);
-  --background-color-danger-subtle-hover: var(--bg-danger-subtle-hover);
-  --background-color-danger-subtle-active: var(--bg-danger-subtle-active);
-  --background-color-danger-subtle-selected: var(--bg-danger-subtle-selected);
-  --background-color-danger-transparent: var(--bg-danger-transparent);
-  --background-color-danger-transparent-hover: var(--bg-danger-transparent-hover);
-  --background-color-danger-transparent-active: var(--bg-danger-transparent-active);
-  --background-color-danger-transparent-selected: var(--bg-danger-transparent-selected);
-  --background-color-backdrop: var(--bg-backdrop);
-  --background-color-inverse: var(--bg-inverse);
-  /* Border colors */
-  --border-color-subtle: var(--border-subtle);
-  --border-color-subtle-1: var(--border-subtle-1);
-  --border-color-strong: var(--border-strong);
-  --border-color-strong-1: var(--border-strong-1);
-  --border-color-inverse: var(--border-inverse);
-  --border-color-disabled: var(--border-disabled);
-  --border-color-accent-strong: var(--border-accent-strong);
-  --border-color-accent-subtle: var(--border-accent-subtle);
-  --border-color-success-strong: var(--border-success-strong);
-  --border-color-success-subtle: var(--border-success-subtle);
-  --border-color-warning-strong: var(--border-warning-strong);
-  --border-color-warning-subtle: var(--border-warning-subtle);
-  --border-color-danger-strong: var(--border-danger-strong);
-  --border-color-danger-subtle: var(--border-danger-subtle);
-  /* Outline colors */
-  --outline-color-subtle: var(--border-color-subtle);
-  --outline-color-subtle-1: var(--border-color-subtle-1);
-  --outline-color-strong: var(--border-color-strong);
-  --outline-color-strong-1: var(--border-color-strong-1);
-  --outline-color-inverse: var(--border-color-inverse);
-  --outline-color-disabled: var(--border-color-disabled);
-  --outline-color-accent-strong: var(--border-color-accent-strong);
-  --outline-color-accent-subtle: var(--border-color-accent-subtle);
-  --outline-color-success-strong: var(--border-color-success-strong);
-  --outline-color-success-subtle: var(--border-color-success-subtle);
-  --outline-color-warning-strong: var(--border-color-warning-strong);
-  --outline-color-warning-subtle: var(--border-color-warning-subtle);
-  --outline-color-danger-strong: var(--border-color-danger-strong);
-  --outline-color-danger-subtle: var(--border-color-danger-subtle);
-  /* Ring colors */
-  --ring-color-subtle: var(--border-color-subtle);
-  --ring-color-subtle-1: var(--border-color-subtle-1);
-  --ring-color-strong: var(--border-color-strong);
-  --ring-color-strong-1: var(--border-color-strong-1);
-  --ring-color-inverse: var(--border-color-inverse);
-  --ring-color-disabled: var(--border-color-disabled);
-  --ring-color-accent-strong: var(--border-color-accent-strong);
-  --ring-color-accent-subtle: var(--border-color-accent-subtle);
-  --ring-color-success-strong: var(--border-color-success-strong);
-  --ring-color-success-subtle: var(--border-color-success-subtle);
-  --ring-color-warning-strong: var(--border-color-warning-strong);
-  --ring-color-warning-subtle: var(--border-color-warning-subtle);
-  --ring-color-danger-strong: var(--border-color-danger-strong);
-  --ring-color-danger-subtle: var(--border-color-danger-subtle);
-  /* Text colors */
-  --text-color-primary: var(--txt-primary);
-  --text-color-secondary: var(--txt-secondary);
-  --text-color-tertiary: var(--txt-tertiary);
-  --text-color-placeholder: var(--txt-placeholder);
-  --text-color-disabled: var(--txt-disabled);
-  --text-color-accent-primary: var(--txt-accent-primary);
-  --text-color-accent-secondary: var(--txt-accent-secondary);
-  --text-color-on-color: var(--txt-on-color);
-  --text-color-on-color-disabled: var(--txt-on-color-disabled);
-  --text-color-inverse: var(--txt-inverse);
-  --text-color-success-primary: var(--txt-success-primary);
-  --text-color-success-secondary: var(--txt-success-secondary);
-  --text-color-warning-primary: var(--txt-warning-primary);
-  --text-color-warning-secondary: var(--txt-warning-secondary);
-  --text-color-danger-primary: var(--txt-danger-primary);
-  --text-color-danger-secondary: var(--txt-danger-secondary);
-  /* Stroke colors */
-  --stroke-primary: var(--text-color-primary);
-  --stroke-secondary: var(--text-color-secondary);
-  --stroke-tertiary: var(--text-color-tertiary);
-  --stroke-placeholder: var(--text-color-placeholder);
-  --stroke-disabled: var(--text-color-disabled);
-  --stroke-accent-primary: var(--text-color-accent-primary);
-  --stroke-accent-secondary: var(--text-color-accent-secondary);
-  --stroke-on-color: var(--text-color-on-color);
-  --stroke-on-color-disabled: var(--text-color-on-color-disabled);
-  --stroke-inverse: var(--text-color-inverse);
-  --stroke-success: var(--text-color-success);
-  --stroke-success-primary: var(--text-color-success-primary);
-  --stroke-success-secondary: var(--text-color-success-secondary);
-  --stroke-warning: var(--text-color-warning);
-  --stroke-warning-primary: var(--text-color-warning-primary);
-  --stroke-warning-secondary: var(--text-color-warning-secondary);
-  --stroke-danger: var(--text-color-danger);
-  --stroke-danger-primary: var(--text-color-danger-primary);
-  --stroke-danger-secondary: var(--text-color-danger-secondary);
-  /* Fill colors */
-  --fill-primary: var(--text-color-primary);
-  --fill-secondary: var(--text-color-secondary);
-  --fill-tertiary: var(--text-color-tertiary);
-  --fill-placeholder: var(--text-color-placeholder);
-  --fill-disabled: var(--text-color-disabled);
-  --fill-accent-primary: var(--text-color-accent-primary);
-  --fill-accent-secondary: var(--text-color-accent-secondary);
-  --fill-on-color: var(--text-color-on-color);
-  --fill-on-color-disabled: var(--text-color-on-color-disabled);
-  --fill-inverse: var(--text-color-inverse);
-  --fill-success: var(--text-color-success);
-  --fill-success-primary: var(--text-color-success-primary);
-  --fill-success-secondary: var(--text-color-success-secondary);
-  --fill-warning: var(--text-color-warning);
-  --fill-warning-primary: var(--text-color-warning-primary);
-  --fill-warning-secondary: var(--text-color-warning-secondary);
-  --fill-danger: var(--text-color-danger);
-  --fill-danger-primary: var(--text-color-danger-primary);
-  --fill-danger-secondary: var(--text-color-danger-secondary);
-  /* Icon colors */
-  --text-color-icon-primary: var(--txt-icon-primary);
-  --text-color-icon-accent-subtle: var(--txt-icon-accent-subtle);
-  --text-color-icon-accent-primary: var(--txt-icon-accent-primary);
-  --text-color-icon-danger-primary: var(--txt-icon-danger-primary);
-  --text-color-icon-danger-secondary: var(--txt-icon-danger-secondary);
-  --text-color-icon-success-primary: var(--txt-icon-success-primary);
-  --text-color-icon-success-secondary: var(--txt-icon-success-secondary);
-  --text-color-icon-warning-primary: var(--txt-icon-warning-primary);
-  --text-color-icon-warning-secondary: var(--txt-icon-warning-secondary);
-  --text-color-icon-accent-primary-inverse: var(--txt-icon-accent-primary-inverse);
-  --text-color-icon-accent-secondary: var(--txt-icon-accent-secondary);
-  --text-color-icon-secondary: var(--txt-icon-secondary);
-  --text-color-icon-tertiary: var(--txt-icon-tertiary);
-  --text-color-icon-placeholder: var(--txt-icon-placeholder);
-  --text-color-icon-disabled: var(--txt-icon-disabled);
-  --text-color-icon-danger: var(--txt-icon-danger);
-  --text-color-icon-on-color: var(--txt-icon-on-color);
-  --text-color-icon-on-color-disabled: var(--txt-icon-on-color-disabled);
-  --text-color-icon-inverse: var(--txt-icon-inverse);
-  /* Link colors */
-  --text-color-link-primary: var(--txt-link-primary);
-  --text-color-link-primary-hover: var(--txt-link-primary-hover);
-  --text-color-link-secondary: var(--txt-link-secondary);
-  /* Neutral plan colors */
-  --text-color-plans-neutral-primary: var(--txt-plans-neutral-primary);
-  --text-color-plans-neutral-color: var(--txt-plans-neutral-color);
-  --background-color-plans-neutral-subtle: var(--bg-plans-neutral-subtle);
-  --background-color-plans-neutral-solid: var(--bg-plans-neutral-solid);
-  /* Brand plan colors */
-  --text-color-plans-brand-primary: var(--txt-plans-brand-primary);
-  --text-color-plans-brand-color: var(--txt-plans-brand-color);
-  --background-color-plans-brand-subtle: var(--bg-plans-brand-subtle);
-  --background-color-plans-brand-solid: var(--bg-plans-brand-solid);
-  /* Label colors */
-  --color-label-indigo-bg: var(--label-indigo-bg);
-  --color-label-indigo-bg-strong: var(--label-indigo-bg-strong);
-  --color-label-indigo-hover: var(--label-indigo-hover);
-  --color-label-indigo-icon: var(--label-indigo-icon);
-  --color-label-indigo-text: var(--label-indigo-text);
-  --color-label-indigo-border: var(--label-indigo-border);
-  --color-label-indigo-focus: var(--label-indigo-focus);
-  --color-label-emerald-bg: var(--label-emerald-bg);
-  --color-label-emerald-bg-strong: var(--label-emerald-bg-strong);
-  --color-label-emerald-hover: var(--label-emerald-hover);
-  --color-label-emerald-icon: var(--label-emerald-icon);
-  --color-label-emerald-text: var(--label-emerald-text);
-  --color-label-emerald-border: var(--label-emerald-border);
-  --color-label-emerald-focus: var(--label-emerald-focus);
-  --color-label-grey-bg: var(--label-grey-bg);
-  --color-label-grey-bg-strong: var(--label-grey-bg-strong);
-  --color-label-grey-hover: var(--label-grey-hover);
-  --color-label-grey-icon: var(--label-grey-icon);
-  --color-label-grey-text: var(--label-grey-text);
-  --color-label-grey-border: var(--label-grey-border);
-  --color-label-grey-focus: var(--label-grey-focus);
-  --color-label-crimson-bg: var(--label-crimson-bg);
-  --color-label-crimson-bg-strong: var(--label-crimson-bg-strong);
-  --color-label-crimson-hover: var(--label-crimson-hover);
-  --color-label-crimson-icon: var(--label-crimson-icon);
-  --color-label-crimson-text: var(--label-crimson-text);
-  --color-label-crimson-border: var(--label-crimson-border);
-  --color-label-crimson-focus: var(--label-crimson-focus);
-  --color-label-yellow-bg: var(--label-yellow-bg);
-  --color-label-yellow-bg-strong: var(--label-yellow-bg-strong);
-  --color-label-yellow-hover: var(--label-yellow-hover);
-  --color-label-yellow-icon: var(--label-yellow-icon);
-  --color-label-yellow-text: var(--label-yellow-text);
-  --color-label-yellow-border: var(--label-yellow-border);
-  --color-label-yellow-focus: var(--label-yellow-focus);
-  /* ---------- Priority colors ---------- */
-  /* Text */
-  --text-color-priority-urgent: var(--priority-urgent);
-  --text-color-priority-high: var(--priority-high);
-  --text-color-priority-medium: var(--priority-medium);
-  --text-color-priority-low: var(--priority-low);
-  --text-color-priority-none: var(--priority-none);
-  /* Border */
-  --border-color-priority-urgent: var(--priority-urgent);
-  --border-color-priority-high: var(--priority-high);
-  --border-color-priority-medium: var(--priority-medium);
-  --border-color-priority-low: var(--priority-low);
-  --border-color-priority-none: var(--priority-none);
-}
-
-/* ---------- Typography tokens ---------- */
-@theme {
-  /* ---------- Font family ---------- */
-  --font-*: initial;
-  --font-heading:
-    "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
-  --font-body:
-    "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
-  --font-code:
-    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-  /* ---------- Font weight ---------- */
-  --font-weight-*: initial;
-  --font-weight-light: 300;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-heavy: 800;
-
-  /* ---------- Font size ---------- */
-  --text-*: initial;
-  --text-9: 0.5625rem;
-  --text-10: 0.625rem;
-  --text-11: 0.6875rem;
-  --text-12: 0.75rem;
-  --text-13: 0.8125rem;
-  --text-14: 0.875rem;
-  --text-16: 1rem;
-  --text-18: 1.125rem;
-  --text-20: 1.25rem;
-  --text-24: 1.5rem;
-  --text-28: 1.75rem;
-  --text-32: 2rem;
-  --text-40: 2.5rem;
-
-  /* ---------- Letter spacing ---------- */
-  --tracking-*: initial;
-  --tracking-extra-tight: -0.025rem;
-  --tracking-tight: -0.05rem;
-  --tracking-default: 0;
-  --tracking-wide: 0.05rem;
-
-  /* ---------- Heading text tokens ---------- */
-  --text-h1-regular: var(--text-32);
-  --text-h1-regular--line-height: 1.2;
-  --text-h1-regular--letter-spacing: var(--tracking-default);
-  --text-h1-regular--font-weight: var(--font-weight-regular);
-
-  --text-h1-medium: var(--text-32);
-  --text-h1-medium--line-height: 1.2;
-  --text-h1-medium--letter-spacing: var(--tracking-default);
-  --text-h1-medium--font-weight: var(--font-weight-medium);
-
-  --text-h1-semibold: var(--text-32);
-  --text-h1-semibold--line-height: 1.2;
-  --text-h1-semibold--letter-spacing: var(--tracking-default);
-  --text-h1-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-h1-bold: var(--text-32);
-  --text-h1-bold--line-height: 1.2;
-  --text-h1-bold--letter-spacing: var(--tracking-default);
-  --text-h1-bold--font-weight: var(--font-weight-bold);
-
-  --text-h2-regular: var(--text-28);
-  --text-h2-regular--line-height: 1.2;
-  --text-h2-regular--letter-spacing: var(--tracking-default);
-  --text-h2-regular--font-weight: var(--font-weight-regular);
-
-  --text-h2-medium: var(--text-28);
-  --text-h2-medium--line-height: 1.2;
-  --text-h2-medium--letter-spacing: var(--tracking-default);
-  --text-h2-medium--font-weight: var(--font-weight-medium);
-
-  --text-h2-semibold: var(--text-28);
-  --text-h2-semibold--line-height: 1.2;
-  --text-h2-semibold--letter-spacing: var(--tracking-default);
-  --text-h2-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-h2-bold: var(--text-28);
-  --text-h2-bold--line-height: 1.2;
-  --text-h2-bold--letter-spacing: var(--tracking-default);
-  --text-h2-bold--font-weight: var(--font-weight-bold);
-
-  --text-h3-regular: var(--text-24);
-  --text-h3-regular--line-height: 1.2;
-  --text-h3-regular--letter-spacing: var(--tracking-default);
-  --text-h3-regular--font-weight: var(--font-weight-regular);
-
-  --text-h3-medium: var(--text-24);
-  --text-h3-medium--line-height: 1.2;
-  --text-h3-medium--letter-spacing: var(--tracking-default);
-  --text-h3-medium--font-weight: var(--font-weight-medium);
-
-  --text-h3-semibold: var(--text-24);
-  --text-h3-semibold--line-height: 1.2;
-  --text-h3-semibold--letter-spacing: var(--tracking-default);
-  --text-h3-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-h3-bold: var(--text-24);
-  --text-h3-bold--line-height: 1.2;
-  --text-h3-bold--letter-spacing: var(--tracking-default);
-  --text-h3-bold--font-weight: var(--font-weight-bold);
-
-  --text-h4-regular: var(--text-20);
-  --text-h4-regular--line-height: 1.2;
-  --text-h4-regular--letter-spacing: var(--tracking-default);
-  --text-h4-regular--font-weight: var(--font-weight-regular);
-
-  --text-h4-medium: var(--text-20);
-  --text-h4-medium--line-height: 1.2;
-  --text-h4-medium--letter-spacing: var(--tracking-default);
-  --text-h4-medium--font-weight: var(--font-weight-medium);
-
-  --text-h4-semibold: var(--text-20);
-  --text-h4-semibold--line-height: 1.2;
-  --text-h4-semibold--letter-spacing: var(--tracking-default);
-  --text-h4-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-h4-bold: var(--text-20);
-  --text-h4-bold--line-height: 1.2;
-  --text-h4-bold--letter-spacing: var(--tracking-default);
-  --text-h4-bold--font-weight: var(--font-weight-bold);
-
-  --text-h5-regular: var(--text-18);
-  --text-h5-regular--line-height: 1.2;
-  --text-h5-regular--letter-spacing: var(--tracking-default);
-  --text-h5-regular--font-weight: var(--font-weight-regular);
-
-  --text-h5-medium: var(--text-18);
-  --text-h5-medium--line-height: 1.2;
-  --text-h5-medium--letter-spacing: var(--tracking-default);
-  --text-h5-medium--font-weight: var(--font-weight-medium);
-
-  --text-h5-semibold: var(--text-18);
-  --text-h5-semibold--line-height: 1.2;
-  --text-h5-semibold--letter-spacing: var(--tracking-default);
-  --text-h5-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-h5-bold: var(--text-18);
-  --text-h5-bold--line-height: 1.2;
-  --text-h5-bold--letter-spacing: var(--tracking-default);
-  --text-h5-bold--font-weight: var(--font-weight-bold);
-
-  --text-h6-regular: var(--text-16);
-  --text-h6-regular--line-height: 1.2;
-  --text-h6-regular--letter-spacing: var(--tracking-default);
-  --text-h6-regular--font-weight: var(--font-weight-regular);
-
-  --text-h6-medium: var(--text-16);
-  --text-h6-medium--line-height: 1.2;
-  --text-h6-medium--letter-spacing: var(--tracking-default);
-  --text-h6-medium--font-weight: var(--font-weight-medium);
-
-  --text-h6-semibold: var(--text-16);
-  --text-h6-semibold--line-height: 1.2;
-  --text-h6-semibold--letter-spacing: var(--tracking-default);
-  --text-h6-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-h6-bold: var(--text-16);
-  --text-h6-bold--line-height: 1.2;
-  --text-h6-bold--letter-spacing: var(--tracking-default);
-  --text-h6-bold--font-weight: var(--font-weight-bold);
-
-  /* ---------- Body text tokens ---------- */
-  --text-body-md-regular: var(--text-16);
-  --text-body-md-regular--line-height: 1.4;
-  --text-body-md-regular--letter-spacing: calc(0.01 * var(--text-16));
-  --text-body-md-regular--font-weight: var(--font-weight-regular);
-
-  --text-body-md-medium: var(--text-16);
-  --text-body-md-medium--line-height: 1.4;
-  --text-body-md-medium--letter-spacing: calc(0.01 * var(--text-16));
-  --text-body-md-medium--font-weight: var(--font-weight-medium);
-
-  --text-body-md-semibold: var(--text-16);
-  --text-body-md-semibold--line-height: 1.4;
-  --text-body-md-semibold--letter-spacing: calc(0.01 * var(--text-16));
-  --text-body-md-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-body-md-bold: var(--text-16);
-  --text-body-md-bold--line-height: 1.4;
-  --text-body-md-bold--letter-spacing: calc(0.01 * var(--text-16));
-  --text-body-md-bold--font-weight: var(--font-weight-bold);
-
-  --text-body-sm-regular: var(--text-14);
-  --text-body-sm-regular--line-height: 1.4;
-  --text-body-sm-regular--letter-spacing: calc(0.01 * var(--text-14));
-  --text-body-sm-regular--font-weight: var(--font-weight-regular);
-
-  --text-body-sm-medium: var(--text-14);
-  --text-body-sm-medium--line-height: 1.4;
-  --text-body-sm-medium--letter-spacing: calc(0.01 * var(--text-14));
-  --text-body-sm-medium--font-weight: var(--font-weight-medium);
-
-  --text-body-sm-semibold: var(--text-14);
-  --text-body-sm-semibold--line-height: 1.4;
-  --text-body-sm-semibold--letter-spacing: calc(0.01 * var(--text-14));
-  --text-body-sm-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-body-sm-bold: var(--text-14);
-  --text-body-sm-bold--line-height: 1.4;
-  --text-body-sm-bold--letter-spacing: calc(0.01 * var(--text-14));
-  --text-body-sm-bold--font-weight: var(--font-weight-bold);
-
-  --text-body-xs-regular: var(--text-13);
-  --text-body-xs-regular--line-height: 1.4;
-  --text-body-xs-regular--letter-spacing: calc(0.01 * var(--text-13));
-  --text-body-xs-regular--font-weight: var(--font-weight-regular);
-
-  --text-body-xs-medium: var(--text-13);
-  --text-body-xs-medium--line-height: 1.4;
-  --text-body-xs-medium--letter-spacing: calc(0.01 * var(--text-13));
-  --text-body-xs-medium--font-weight: var(--font-weight-medium);
-
-  --text-body-xs-semibold: var(--text-13);
-  --text-body-xs-semibold--line-height: 1.4;
-  --text-body-xs-semibold--letter-spacing: calc(0.01 * var(--text-13));
-  --text-body-xs-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-body-xs-bold: var(--text-13);
-  --text-body-xs-bold--line-height: 1.4;
-  --text-body-xs-bold--letter-spacing: calc(0.01 * var(--text-13));
-  --text-body-xs-bold--font-weight: var(--font-weight-bold);
-
-  --text-caption-md-regular: var(--text-12);
-  --text-caption-md-regular--line-height: 1.1;
-  --text-caption-md-regular--letter-spacing: var(--tracking-default);
-  --text-caption-md-regular--font-weight: var(--font-weight-regular);
-
-  --text-caption-md-medium: var(--text-12);
-  --text-caption-md-medium--line-height: 1.1;
-  --text-caption-md-medium--letter-spacing: var(--tracking-default);
-  --text-caption-md-medium--font-weight: var(--font-weight-medium);
-
-  --text-caption-md-semibold: var(--text-12);
-  --text-caption-md-semibold--line-height: 1.1;
-  --text-caption-md-semibold--letter-spacing: var(--tracking-default);
-  --text-caption-md-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-caption-md-bold: var(--text-12);
-  --text-caption-md-bold--line-height: 1.1;
-  --text-caption-md-bold--letter-spacing: var(--tracking-default);
-  --text-caption-md-bold--font-weight: var(--font-weight-bold);
-
-  --text-caption-sm-regular: var(--text-11);
-  --text-caption-sm-regular--line-height: 1.1;
-  --text-caption-sm-regular--letter-spacing: var(--tracking-default);
-  --text-caption-sm-regular--font-weight: var(--font-weight-regular);
-
-  --text-caption-sm-medium: var(--text-11);
-  --text-caption-sm-medium--line-height: 1.1;
-  --text-caption-sm-medium--letter-spacing: var(--tracking-default);
-  --text-caption-sm-medium--font-weight: var(--font-weight-medium);
-
-  --text-caption-sm-semibold: var(--text-11);
-  --text-caption-sm-semibold--line-height: 1.1;
-  --text-caption-sm-semibold--letter-spacing: var(--tracking-default);
-  --text-caption-sm-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-caption-sm-bold: var(--text-11);
-  --text-caption-sm-bold--line-height: 1.1;
-  --text-caption-sm-bold--letter-spacing: var(--tracking-default);
-  --text-caption-sm-bold--font-weight: var(--font-weight-bold);
-
-  --text-caption-xs-regular: var(--text-10);
-  --text-caption-xs-regular--line-height: 1;
-  --text-caption-xs-regular--letter-spacing: calc(0.01 * var(--text-10));
-  --text-caption-xs-regular--font-weight: var(--font-weight-regular);
-
-  --text-caption-xs-medium: var(--text-10);
-  --text-caption-xs-medium--line-height: 1;
-  --text-caption-xs-medium--letter-spacing: calc(0.01 * var(--text-10));
-  --text-caption-xs-medium--font-weight: var(--font-weight-medium);
-
-  --text-caption-xs-semibold: var(--text-10);
-  --text-caption-xs-semibold--line-height: 1;
-  --text-caption-xs-semibold--letter-spacing: calc(0.01 * var(--text-10));
-  --text-caption-xs-semibold--font-weight: var(--font-weight-semibold);
-
-  --text-caption-xs-bold: var(--text-10);
-  --text-caption-xs-bold--line-height: 1;
-  --text-caption-xs-bold--letter-spacing: calc(0.01 * var(--text-10));
-  --text-caption-xs-bold--font-weight: var(--font-weight-bold);
-}
-
-/* -------------------- Utility classes -------------------- */
-@utility scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-@utility material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Tailwind typography plugin overwrites */
-@utility prose {
-  --tw-prose-body: var(--text-color-primary);
-  --tw-prose-p: var(--text-color-primary);
-  --tw-prose-headings: var(--text-color-primary);
-  --tw-prose-lead: var(--text-color-primary);
-  --tw-prose-links: var(--text-color-link-primary);
-  --tw-prose-bold: "inherit";
-  --tw-prose-counters: var(--text-color-primary);
-  --tw-prose-bullets: var(--text-color-primary);
-  --tw-prose-hr: var(--text-color-primary);
-  --tw-prose-quotes: var(--text-color-primary);
-  --tw-prose-quote-borders: var(--border-color-subtle);
-  --tw-prose-code: var(--text-color-primary);
-  --tw-prose-pre-code: var(--text-color-primary);
-  --tw-prose-pre-bg: var(--background-color-layer-1);
-  --tw-prose-th-borders: var(--border-color-subtle);
-  --tw-prose-td-borders: var(--border-color-subtle);
-}
diff --git a/packages/ui/src/scroll-area.tsx b/packages/ui/src/scroll-area.tsx
index 4ce2a1edba..7ec69de676 100644
--- a/packages/ui/src/scroll-area.tsx
+++ b/packages/ui/src/scroll-area.tsx
@@ -47,7 +47,7 @@ export function ScrollArea(props: TScrollAreaProps) {
       >
         <RadixScrollArea.Thumb
           className={cn(
-            "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover:bg-scrollbar-thumb-surface-hover group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active",
+            "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover:bg-scrollbar-thumb-hover group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active",
             thumbSizeStyles[size]
           )}
         />
@@ -61,7 +61,7 @@ export function ScrollArea(props: TScrollAreaProps) {
       >
         <RadixScrollArea.Thumb
           className={cn(
-            "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover:bg-scrollbar-thumb-surface-hover group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active",
+            "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover:bg-scrollbar-thumb-hover group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active",
             thumbSizeStyles[size]
           )}
         />
diff --git a/packages/utils/src/theme/constants.ts b/packages/utils/src/theme/constants.ts
index 5ee4ef8784..c572e53b34 100644
--- a/packages/utils/src/theme/constants.ts
+++ b/packages/utils/src/theme/constants.ts
@@ -10,12 +10,19 @@
  */
 
 /**
- * Alpha mapping for 14-shade palette system
+ * Alpha mapping for 14-shade palette system.
+ *
+ * Must mirror the --alpha-white-* / --alpha-black-* ladder in
+ * @makeplane/propel (styles/variables.css), which is the source of truth for
+ * the default themes. These values are only applied for custom themes, so any
+ * drift shows up as custom themes rendering differently from the default one —
+ * silently, with no build error. Rungs 100-300 are deliberately much lighter
+ * than the linear 0.05 step the rest of the scale follows.
  */
 export const ALPHA_MAPPING = {
-  100: 0.05,
-  200: 0.1,
-  300: 0.15,
+  100: 0.04,
+  200: 0.06,
+  300: 0.08,
   400: 0.2,
   500: 0.3,
   600: 0.4,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bbf11e23d1..d54e1f78c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1711,6 +1711,9 @@ importers:
 
   packages/tailwind-config:
     dependencies:
+      '@makeplane/propel':
+        specifier: 0.2.0
+        version: 0.2.0(@date-fns/tz@1.4.1)(@types/react@18.3.11)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@4.1.17)
       '@tailwindcss/postcss':
         specifier: 'catalog:'
         version: 4.1.17
@@ -2237,6 +2240,33 @@ packages:
       '@types/react':
         optional: true
 
+  '@base-ui/react@1.7.0':
+    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.2':
+    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@bcoe/v8-coverage@1.0.2':
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
@@ -2586,15 +2616,27 @@ packages:
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
   '@floating-ui/dom@1.7.4':
     resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
 
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
   '@floating-ui/react-dom@2.1.6':
     resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@floating-ui/react@0.26.28':
     resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
     peerDependencies:
@@ -2604,6 +2646,9 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
   '@fontsource-variable/inter@5.2.8':
     resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
 
@@ -2924,6 +2969,14 @@ packages:
     peerDependencies:
       '@types/react': 17 || 18 || 19
 
+  '@makeplane/propel@0.2.0':
+    resolution: {integrity: sha512-a4gd9m9gTMbc2NOrpb1jrSkM/OtocVBTf2bmnaAdU8K8Xw3OoTgvMLM3nRtfUbSFNLl1OjG7SCXeg2x/7lYvSA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+      tailwindcss: ^4.0.0
+
   '@mdx-js/react@3.1.0':
     resolution: {integrity: sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==}
     peerDependencies:
@@ -6010,6 +6063,7 @@ packages:
 
   crypto-js@4.2.0:
     resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+    deprecated: Active development of CryptoJS has been discontinued. This library is no longer maintained.
 
   css-loader@7.1.4:
     resolution: {integrity: sha512-vv3J9tlOl04WjiMvHQI/9tmIrCxVrj6PFbHemBB1iihpeRbi/I4h033eoFIhwxBBqLhI0KYFS7yvynBFhIZfTw==}
@@ -7564,6 +7618,11 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  lucide-react@1.33.0:
+    resolution: {integrity: sha512-MTRwMy0ZlL8Ur/vOAiJ9XGHE+kFPC7brq6MxAm0GiGXEBj0qy0jA/pG4N675oSzciO/UCdX8T+5yUQdmDeTLxg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -8524,6 +8583,16 @@ packages:
     peerDependencies:
       react: '*'
 
+  react-day-picker@10.0.1:
+    resolution: {integrity: sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': '>=16.8.0'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-day-picker@9.5.0:
     resolution: {integrity: sha512-WmJnPFVLnKh5Qscm7wavMNg86rqPverSWjx+zgK8/ZmGRSQ8c8OoqW10RI+AzAfT2atIxImpCUU2R9Z7Xb2SUA==}
     engines: {node: '>=18'}
@@ -8794,6 +8863,9 @@ packages:
   reselect@5.1.1:
     resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
 
+  reselect@5.3.0:
+    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -10260,6 +10332,31 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.11
 
+  '@base-ui/react@1.7.0(@date-fns/tz@1.4.1)(@types/react@18.3.11)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui/utils': 0.3.2(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/react-dom': 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/utils': 0.2.12
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      use-sync-external-store: 1.6.0(react@18.3.1)
+    optionalDependencies:
+      '@date-fns/tz': 1.4.1
+      '@types/react': 18.3.11
+      date-fns: 4.1.0
+
+  '@base-ui/utils@0.3.2(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.12
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      reselect: 5.3.0
+      use-sync-external-store: 1.6.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.11
+
   '@bcoe/v8-coverage@1.0.2': {}
 
   '@blueprintjs/colors@4.2.1':
@@ -10582,17 +10679,32 @@ snapshots:
     dependencies:
       '@floating-ui/utils': 0.2.10
 
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
   '@floating-ui/dom@1.7.4':
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
 
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
   '@floating-ui/react-dom@2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/dom': 1.7.4
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  '@floating-ui/react-dom@2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@floating-ui/react@0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -10603,6 +10715,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@floating-ui/utils@0.2.12': {}
+
   '@fontsource-variable/inter@5.2.8': {}
 
   '@fontsource/ibm-plex-mono@5.2.7': {}
@@ -10907,6 +11021,20 @@ snapshots:
     dependencies:
       '@types/react': 18.3.11
 
+  '@makeplane/propel@0.2.0(@date-fns/tz@1.4.1)(@types/react@18.3.11)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@4.1.17)':
+    dependencies:
+      '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@18.3.11)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      class-variance-authority: 0.7.1
+      lucide-react: 1.33.0(react@18.3.1)
+      react: 18.3.1
+      react-day-picker: 10.0.1(@types/react@18.3.11)(react@18.3.1)
+      react-dom: 18.3.1(react@18.3.1)
+      tailwindcss: 4.1.17
+    transitivePeerDependencies:
+      - '@date-fns/tz'
+      - '@types/react'
+      - date-fns
+
   '@mdx-js/react@3.1.0(@types/react@18.3.11)(react@18.3.1)':
     dependencies:
       '@types/mdx': 2.0.13
@@ -15293,6 +15421,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  lucide-react@1.33.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   lz-string@1.5.0: {}
 
   magic-string@0.30.21:
@@ -16614,6 +16746,14 @@ snapshots:
       reactcss: 1.2.3(react@18.3.1)
       tinycolor2: 1.6.0
 
+  react-day-picker@10.0.1(@types/react@18.3.11)(react@18.3.1):
+    dependencies:
+      '@date-fns/tz': 1.4.1
+      date-fns: 4.1.0
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.11
+
   react-day-picker@9.5.0(react@18.3.1):
     dependencies:
       '@date-fns/tz': 1.4.1
@@ -17012,6 +17152,8 @@ snapshots:
 
   reselect@5.1.1: {}
 
+  reselect@5.3.0: {}
+
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}