From 6e827f1da3bf471db506b61df93a952d09836852 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katia@trigger.dev>
Date: Wed, 8 Jul 2026 15:11:40 +0200
Subject: [PATCH] chore: Tailwind CSS v4 migration (#4139)

Migrates the webapp from Tailwind CSS 3.4 to 4.x.
---
 .server-changes/tailwind-v4-migration.md      |    6 +
 .server-changes/theme-color-tokens.md         |    6 +
 apps/webapp/app/components/AskAI.tsx          |   16 +-
 .../app/components/BackgroundWrapper.tsx      |    6 +-
 .../app/components/BlankStatePanels.tsx       |    2 +-
 .../app/components/DefinitionTooltip.tsx      |    4 +-
 apps/webapp/app/components/Feedback.tsx       |    2 +-
 apps/webapp/app/components/GitMetadata.tsx    |    6 +-
 apps/webapp/app/components/ListPagination.tsx |    6 +-
 .../webapp/app/components/LoginPageLayout.tsx |    2 +-
 .../app/components/ProductHuntBanner.tsx      |    2 +-
 .../app/components/UserProfilePhoto.tsx       |    2 +-
 apps/webapp/app/components/WarmStarts.tsx     |    6 +-
 .../components/admin/FeatureFlagsDialog.tsx   |   12 +-
 .../admin/backOffice/MaxProjectsSection.tsx   |    2 +-
 .../admin/backOffice/RateLimitSection.tsx     |    2 +-
 .../app/components/billing/FreePlanUsage.tsx  |    9 +-
 .../app/components/billing/UsageBar.tsx       |    2 +-
 .../app/components/code/AIQueryInput.tsx      |    6 +-
 .../app/components/code/ChartConfigPanel.tsx  |    8 +-
 apps/webapp/app/components/code/CodeBlock.tsx |   58 +-
 .../webapp/app/components/code/InlineCode.tsx |    2 +-
 .../app/components/code/QueryResultsChart.tsx |   10 +-
 .../webapp/app/components/code/TSQLEditor.tsx |    4 +-
 .../app/components/code/TSQLResultsTable.tsx  |   28 +-
 .../app/components/code/codeMirrorTheme.ts    |   61 +-
 apps/webapp/app/components/code/shikiTheme.ts |   72 +-
 .../components/dashboard-agent/AgentChart.tsx |    4 +-
 .../DashboardAgentComposer.tsx                |    4 +-
 .../DashboardAgentContextBanner.tsx           |    2 +-
 .../dashboard-agent/DashboardAgentHeader.tsx  |    4 +-
 .../dashboard-agent/DashboardAgentHistory.tsx |   10 +-
 .../DashboardAgentMessages.tsx                |    2 +-
 .../DashboardAgentSuggestedPrompts.tsx        |    2 +-
 .../dashboard-agent/RunDiagnosisCard.tsx      |   10 +-
 .../dashboardAgentLauncher.tsx                |    4 +-
 .../environments/RegenerateApiKeyModal.tsx    |    2 +-
 .../errors/ConfigureErrorAlerts.tsx           |    2 +-
 .../integrations/VercelBuildSettings.tsx      |    4 +-
 .../integrations/VercelOnboardingModal.tsx    |    6 +-
 .../app/components/layout/AppLayout.tsx       |    8 +-
 .../app/components/logs/LogDetailView.tsx     |    2 +-
 .../app/components/logs/LogsLevelFilter.tsx   |    6 +-
 apps/webapp/app/components/logs/LogsTable.tsx |    6 +-
 .../app/components/metrics/BigNumber.tsx      |    2 +-
 .../app/components/metrics/QueryWidget.tsx    |    4 +-
 .../metrics/SaveToDashboardDialog.tsx         |    8 +-
 .../app/components/metrics/ScopeFilter.tsx    |    2 +-
 .../app/components/metrics/TitleWidget.tsx    |    4 +-
 .../components/navigation/AccountSideMenu.tsx |    2 +-
 .../navigation/DashboardDialogs.tsx           |   14 +-
 .../components/navigation/DashboardList.tsx   |    2 +-
 .../navigation/EnvironmentSelector.tsx        |   12 +-
 .../navigation/HelpAndFeedbackPopover.tsx     |    6 +-
 .../navigation/NotificationCard.tsx           |    6 +-
 .../navigation/NotificationPanel.tsx          |    4 +-
 .../OrganizationSettingsSideMenu.tsx          |    2 +-
 .../app/components/navigation/SideMenu.tsx    |   42 +-
 .../components/navigation/SideMenuHeader.tsx  |    4 +-
 .../components/navigation/SideMenuItem.tsx    |   12 +-
 .../components/navigation/SideMenuSection.tsx |    4 +-
 .../onboarding/TechnologyPicker.tsx           |   16 +-
 .../components/primitives/AnimatingArrow.tsx  |   10 +-
 .../components/primitives/AppliedFilter.tsx   |    6 +-
 .../app/components/primitives/Avatar.tsx      |    4 +-
 .../app/components/primitives/Badge.tsx       |    6 +-
 .../app/components/primitives/Buttons.tsx     |   22 +-
 .../app/components/primitives/Calendar.tsx    |   20 +-
 .../app/components/primitives/Callout.tsx     |   40 +-
 .../app/components/primitives/Checkbox.tsx    |   16 +-
 .../primitives/CheckboxIndicator.tsx          |    2 +-
 .../app/components/primitives/ClientTabs.tsx  |   14 +-
 .../components/primitives/ClipboardField.tsx  |   20 +-
 .../app/components/primitives/CopyButton.tsx  |    4 +-
 .../components/primitives/CopyableText.tsx    |    4 +-
 .../app/components/primitives/DateField.tsx   |   14 +-
 .../components/primitives/DateTimePicker.tsx  |    8 +-
 .../app/components/primitives/DetailCell.tsx  |    4 +-
 .../app/components/primitives/Dialog.tsx      |    6 +-
 .../webapp/app/components/primitives/Icon.tsx |    2 +-
 .../app/components/primitives/Input.tsx       |   20 +-
 .../primitives/InputNumberStepper.tsx         |   14 +-
 .../app/components/primitives/InputOTP.tsx    |    6 +-
 .../primitives/LoadingBarDivider.tsx          |    2 +-
 .../app/components/primitives/PageHeader.tsx  |    2 +-
 .../app/components/primitives/Pagination.tsx  |    9 +-
 .../app/components/primitives/Popover.tsx     |   24 +-
 .../app/components/primitives/RadioButton.tsx |   20 +-
 .../app/components/primitives/Resizable.tsx   |    8 +-
 .../app/components/primitives/SearchInput.tsx |    2 +-
 .../primitives/SegmentedControl.tsx           |   10 +-
 .../app/components/primitives/Select.tsx      |   26 +-
 .../app/components/primitives/Sheet.tsx       |    4 +-
 .../app/components/primitives/SheetV3.tsx     |    2 +-
 .../app/components/primitives/ShortcutKey.tsx |   10 +-
 .../components/primitives/SimpleSelect.tsx    |   12 +-
 .../app/components/primitives/Slider.tsx      |    6 +-
 .../app/components/primitives/StepNumber.tsx  |    2 +-
 .../app/components/primitives/Switch.tsx      |   14 +-
 .../app/components/primitives/Table.tsx       |   50 +-
 .../webapp/app/components/primitives/Tabs.tsx |   13 +-
 .../app/components/primitives/TextArea.tsx    |    2 +-
 .../app/components/primitives/Tooltip.tsx     |    2 +-
 .../primitives/TreeView/TreeView.tsx          |    2 +-
 .../components/primitives/UsageSparkline.tsx  |   15 +-
 .../primitives/charts/BigNumberCard.tsx       |    6 +-
 .../components/primitives/charts/Chart.tsx    |    8 +-
 .../components/primitives/charts/ChartBar.tsx |   22 +-
 .../primitives/charts/ChartBlankState.tsx     |    2 +-
 .../primitives/charts/ChartCard.tsx           |    2 +-
 .../primitives/charts/ChartLegendCompound.tsx |   10 +-
 .../primitives/charts/ChartLine.tsx           |    8 +-
 .../primitives/charts/ChartLoading.tsx        |   20 +-
 .../primitives/charts/ChartRoot.tsx           |    2 +-
 .../primitives/charts/ChartZoom.tsx           |   10 +-
 .../primitives/charts/statusColors.ts         |   19 +-
 .../app/components/query/QueryEditor.tsx      |   23 +-
 .../webapp/app/components/run/RunTimeline.tsx |   22 +-
 .../app/components/runs/v3/AIFilterInput.tsx  |    6 +-
 .../app/components/runs/v3/BatchFilters.tsx   |    8 +-
 .../components/runs/v3/DeploymentStatus.tsx   |    4 +-
 .../components/runs/v3/PromptSpanDetails.tsx  |    8 +-
 .../components/runs/v3/ReplayRunDialog.tsx    |    6 +-
 .../app/components/runs/v3/RunFilters.tsx     |   10 +-
 .../runs/v3/RunStatusCellTooltip.tsx          |    2 +-
 apps/webapp/app/components/runs/v3/RunTag.tsx |   18 +-
 .../components/runs/v3/ScheduleFilters.tsx    |    4 +-
 .../app/components/runs/v3/SharedFilters.tsx  |    8 +-
 .../runs/v3/SpanHorizontalTimeline.tsx        |   10 +-
 .../app/components/runs/v3/SpanTitle.tsx      |   12 +-
 .../runs/v3/TaskRunAttemptStatus.tsx          |   10 +-
 .../app/components/runs/v3/TaskRunStatus.tsx  |   55 +-
 .../app/components/runs/v3/TaskRunsTable.tsx  |   30 +-
 .../components/runs/v3/TaskTriggerSource.tsx  |   14 +-
 .../runs/v3/WaitpointTokenFilters.tsx         |   16 +-
 .../runs/v3/agent/AgentMessageView.tsx        |   18 +-
 .../components/runs/v3/ai/AIChatMessages.tsx  |   14 +-
 .../runs/v3/ai/AIEmbedSpanDetails.tsx         |    4 +-
 .../components/runs/v3/ai/AIModelSummary.tsx  |    2 +-
 .../components/runs/v3/ai/AISpanDetails.tsx   |   10 +-
 .../runs/v3/ai/AIToolCallSpanDetails.tsx      |    2 +-
 .../runs/v3/ai/AIToolsInventory.tsx           |    2 +-
 .../components/runs/v3/ai/SpanMetricRow.tsx   |    2 +-
 .../app/components/scheduled/timezones.tsx    |    2 +-
 .../schedules/ScheduleInspector.tsx           |    2 +-
 .../components/sessions/v1/SessionFilters.tsx |    8 +-
 .../components/sessions/v1/SessionsTable.tsx  |    6 +-
 apps/webapp/app/hooks/useThemeColor.ts        |   32 +
 apps/webapp/app/root.tsx                      |    4 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |   49 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |   22 +-
 .../route.tsx                                 |    8 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    8 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    4 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |   14 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |   16 +-
 .../route.tsx                                 |   21 +-
 .../route.tsx                                 |   16 +-
 .../route.tsx                                 |   30 +-
 .../route.tsx                                 |   34 +-
 .../route.tsx                                 |   25 +-
 .../AITabContent.tsx                          |    2 +-
 .../QueryHelpSidebar.tsx                      |   10 +-
 .../QueryHistoryPopover.tsx                   |    8 +-
 .../TRQLGuideContent.tsx                      |    4 +-
 .../TableSchemaContent.tsx                    |    4 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |   26 +-
 .../route.tsx                                 |   26 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |    6 +-
 .../AIPayloadTabContent.tsx                   |   30 +-
 .../TestSidebarTabs.tsx                       |    8 +-
 .../route.tsx                                 |   20 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |   18 +-
 ...zationSlug.settings.integrations.slack.tsx |    2 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |   24 +-
 .../route.tsx                                 |    4 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |    4 +-
 .../route.tsx                                 |    8 +-
 .../route.tsx                                 |    4 +-
 .../webapp/app/routes/_app.orgs.new/route.tsx |    4 +-
 .../app/routes/_app.timezones/route.tsx       |    6 +-
 .../route.tsx                                 |    2 +-
 .../app/routes/account.security/route.tsx     |    2 +-
 .../app/routes/account.tokens/route.tsx       |    2 +-
 .../webapp/app/routes/admin.feature-flags.tsx |   12 +-
 .../app/routes/admin.llm-models.$modelId.tsx  |   14 +-
 .../app/routes/admin.llm-models._index.tsx    |    4 +-
 .../admin.llm-models.missing.$model.tsx       |   15 +-
 .../app/routes/admin.llm-models.new.tsx       |   12 +-
 .../webapp/app/routes/admin.notifications.tsx |   18 +-
 .../app/routes/confirm-basic-details.tsx      |    8 +-
 apps/webapp/app/routes/invites.tsx            |    6 +-
 apps/webapp/app/routes/login._index/route.tsx |   10 +-
 .../webapp/app/routes/resources.incidents.tsx |    6 +-
 .../route.tsx                                 |   18 +-
 .../route.tsx                                 |    8 +-
 ...ectParam.env.$envParam.runs.bulkaction.tsx |    2 +-
 .../route.tsx                                 |    2 +-
 ...cts.$projectParam.env.$envParam.vercel.tsx |    2 +-
 .../route.tsx                                 |    4 +-
 ...ctParam.schedules.new.natural-language.tsx |    2 +-
 ...ces.orgs.$organizationSlug.select-plan.tsx |   14 +-
 .../app/routes/storybook.agent-ui/route.tsx   |    2 +-
 .../routes/storybook.animated-panel/route.tsx |    2 +-
 .../app/routes/storybook.buttons/route.tsx    |   10 +-
 .../app/routes/storybook.charts/route.tsx     |    2 +-
 .../routes/storybook.detail-cell/route.tsx    |    6 +-
 .../routes/storybook.page-header/route.tsx    |    2 +-
 .../app/routes/storybook.popover/route.tsx    |    4 +-
 .../app/routes/storybook.spinner/route.tsx    |   10 +-
 .../app/routes/storybook.streamdown/route.tsx |    4 +-
 .../app/routes/storybook.table/route.tsx      |    2 +-
 .../storybook.tabs.$tabNumber/route.tsx       |    2 +-
 .../app/routes/storybook.tabs/route.tsx       |   18 +-
 .../app/routes/storybook.timeline/route.tsx   |   10 +-
 .../app/routes/storybook.tree-view/route.tsx  |    2 +-
 .../routes/storybook.tsql-editor/route.tsx    |    6 +-
 .../routes/storybook.unordered-list/route.tsx |    2 +-
 apps/webapp/app/routes/storybook/route.tsx    |    2 +-
 .../app/routes/unsubscribe.$userId.$token.tsx |    2 +-
 apps/webapp/app/routes/vercel.onboarding.tsx  |   12 +-
 apps/webapp/app/tailwind.css                  |  604 +++++++--
 apps/webapp/app/utils/cn.ts                   |   74 +-
 apps/webapp/package.json                      |   24 +-
 apps/webapp/postcss.config.js                 |    6 +-
 apps/webapp/remix.config.js                   |    4 +-
 apps/webapp/tailwind.config.js                |  385 ------
 pnpm-lock.yaml                                | 1150 ++++++-----------
 246 files changed, 2109 insertions(+), 2478 deletions(-)
 create mode 100644 .server-changes/tailwind-v4-migration.md
 create mode 100644 .server-changes/theme-color-tokens.md
 create mode 100644 apps/webapp/app/hooks/useThemeColor.ts
 delete mode 100644 apps/webapp/tailwind.config.js

diff --git a/.server-changes/tailwind-v4-migration.md b/.server-changes/tailwind-v4-migration.md
new file mode 100644
index 000000000..c1675ff21
--- /dev/null
+++ b/.server-changes/tailwind-v4-migration.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Migrated the webapp to Tailwind CSS v4 with a CSS-first `@theme`. Semantic color tokens are now CSS variables overridable per theme (multi-theme support). Tailwind runs through `@tailwindcss/postcss`; plugins replaced or upgraded to v4-compatible versions.
diff --git a/.server-changes/theme-color-tokens.md b/.server-changes/theme-color-tokens.md
new file mode 100644
index 000000000..1766a74d2
--- /dev/null
+++ b/.server-changes/theme-color-tokens.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Replaced raw charcoal-* Tailwind classes with semantic theme tokens (surfaces, borders, text) across the dashboard. Adds surface/border/text tokens to the themable layer so future themes only override CSS variables.
diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index bf76654cc..d62ffa5b3 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -173,7 +173,7 @@ function AskAIDialog({ initialQuery, isOpen, onOpenChange, closeAskAI }: AskAIDi
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent className="animated-gradient-glow flex max-h-[90vh] min-h-fit w-full flex-col justify-between gap-0 px-0 pb-0 pt-0 sm:max-w-prose">
-        <DialogHeader className="flex h-[2.75rem] items-start justify-center rounded-t-md bg-background-bright pl-3">
+        <DialogHeader className="flex h-11 items-start justify-center rounded-t-md bg-background-bright pl-3">
           <div className="flex items-center gap-1">
             <AISparkleIcon className="size-5" />
             <DialogTitle className="text-sm font-medium text-text-bright">Ask AI</DialogTitle>
@@ -226,7 +226,7 @@ function ChatMessages({
   ];
 
   return (
-    <div className="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+    <div className="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       {conversation.length === 0 ? (
         <motion.div
           className="flex flex-col gap-2 pb-2"
@@ -249,7 +249,7 @@ function ChatMessages({
           {exampleQuestions.map((question, index) => (
             <motion.button
               key={index}
-              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-charcoal-600 px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500"
+              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-border-bright px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500"
               onClick={() => onExampleClick(question)}
               variants={{
                 hidden: {
@@ -468,7 +468,7 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
         error={error}
         addFeedback={addFeedback}
       />
-      <form onSubmit={handleSubmit} className="flex-shrink-0 border-t border-grid-bright p-4">
+      <form onSubmit={handleSubmit} className="shrink-0 border-t border-grid-bright p-4">
         <div className="flex gap-3">
           <input
             type="text"
@@ -511,7 +511,7 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
               disabled={!message.trim()}
               LeadingIcon={<ArrowUpIcon className="size-5 text-text-bright" />}
               variant="primary/large"
-              className="size-10 min-w-10 rounded-full group-disabled/button:border-charcoal-550 group-disabled/button:bg-charcoal-600"
+              className="size-10 min-w-10 rounded-full group-disabled/button:border-border-brighter group-disabled/button:bg-surface-control"
             />
           )}
         </div>
@@ -531,11 +531,11 @@ function GradientSpinnerBackground({
 }) {
   return (
     <div
-      className={`flex rounded-full bg-gradient-to-br from-indigo-500 via-purple-500 to-fuchsia-500 p-px ${className}`}
+      className={`flex rounded-full bg-linear-to-br from-indigo-500 via-purple-500 to-fuchsia-500 p-px ${className}`}
     >
       <div
-        className={`flex h-full w-full items-center justify-center rounded-full bg-charcoal-600 ${
-          hoverEffect ? "transition group-hover:bg-charcoal-550" : ""
+        className={`flex h-full w-full items-center justify-center rounded-full bg-surface-control ${
+          hoverEffect ? "transition group-hover:bg-surface-control-hover" : ""
         }`}
       >
         {children}
diff --git a/apps/webapp/app/components/BackgroundWrapper.tsx b/apps/webapp/app/components/BackgroundWrapper.tsx
index aaf06d56a..c13983a12 100644
--- a/apps/webapp/app/components/BackgroundWrapper.tsx
+++ b/apps/webapp/app/components/BackgroundWrapper.tsx
@@ -7,7 +7,7 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
   return (
     <div className="relative h-full w-full overflow-hidden bg-background-dimmed lg:bg-transparent">
       <div
-        className="absolute left-0 top-0 hidden w-[260px] bg-contain bg-left-top bg-no-repeat lg:block"
+        className="absolute left-0 top-0 hidden w-[260px] bg-contain bg-top-left bg-no-repeat lg:block"
         style={{
           backgroundImage: `url(${blurredDashboardBackgroundMenuTop})`,
           aspectRatio: "auto",
@@ -17,7 +17,7 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
       />
 
       <div
-        className="absolute bottom-0 left-0 hidden w-[260px] bg-contain bg-left-bottom bg-no-repeat lg:block"
+        className="absolute bottom-0 left-0 hidden w-[260px] bg-contain bg-bottom-left bg-no-repeat lg:block"
         style={{
           backgroundImage: `url(${blurredDashboardBackgroundMenuBottom})`,
           aspectRatio: "auto",
@@ -27,7 +27,7 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
       />
 
       <div
-        className="absolute top-0 hidden bg-left-top bg-no-repeat lg:block"
+        className="absolute top-0 hidden bg-top-left bg-no-repeat lg:block"
         style={{
           left: "260px",
           backgroundImage: `url(${blurredDashboardBackgroundTable})`,
diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx
index 7b5bdc631..56a7c0da4 100644
--- a/apps/webapp/app/components/BlankStatePanels.tsx
+++ b/apps/webapp/app/components/BlankStatePanels.tsx
@@ -304,7 +304,7 @@ export function DeploymentsNoneDev() {
           organization={organization}
           project={project}
           environment={environment}
-          className="w-fit border border-charcoal-600 bg-secondary hover:border-charcoal-550 hover:bg-charcoal-600"
+          className="w-fit border border-border-bright bg-secondary hover:border-border-brighter hover:bg-surface-control"
         />
       </StepContentContainer>
     </>
diff --git a/apps/webapp/app/components/DefinitionTooltip.tsx b/apps/webapp/app/components/DefinitionTooltip.tsx
index d91cce92c..13505e2d5 100644
--- a/apps/webapp/app/components/DefinitionTooltip.tsx
+++ b/apps/webapp/app/components/DefinitionTooltip.tsx
@@ -17,11 +17,11 @@ export function DefinitionTip({
     <TooltipProvider>
       <Tooltip disableHoverableContent={disableHoverableContent}>
         <TooltipTrigger className="text-left">
-          <span className="cursor-default underline decoration-charcoal-500 decoration-dashed underline-offset-4 transition hover:decoration-charcoal-400">
+          <span className="cursor-default underline decoration-text-faint decoration-dashed underline-offset-4 transition hover:decoration-text-dimmed">
             {children}
           </span>
         </TooltipTrigger>
-        <TooltipContent align="end" side="right" className="w-[16rem] min-w-[16rem]">
+        <TooltipContent align="end" side="right" className="w-64 min-w-64">
           <Header3 className="mb-1">{title}</Header3>
           {typeof content === "string" ? (
             <Paragraph variant="small">{content}</Paragraph>
diff --git a/apps/webapp/app/components/Feedback.tsx b/apps/webapp/app/components/Feedback.tsx
index 683f39d34..ebd61180d 100644
--- a/apps/webapp/app/components/Feedback.tsx
+++ b/apps/webapp/app/components/Feedback.tsx
@@ -84,7 +84,7 @@ export function Feedback({ button, defaultValue = "bug", onOpenChange }: Feedbac
         <DialogHeader>Contact us</DialogHeader>
         <div className="mt-2 flex flex-col gap-4">
           <div className="flex items-center gap-4">
-            <Icon icon={EnvelopeIcon} className="size-10 min-w-[2.5rem] text-blue-500" />
+            <Icon icon={EnvelopeIcon} className="size-10 min-w-10 text-blue-500" />
             <Paragraph variant="base/bright">
               How can we help? We read every message and will respond as quickly as we can.
             </Paragraph>
diff --git a/apps/webapp/app/components/GitMetadata.tsx b/apps/webapp/app/components/GitMetadata.tsx
index fb53ee6bf..3057de104 100644
--- a/apps/webapp/app/components/GitMetadata.tsx
+++ b/apps/webapp/app/components/GitMetadata.tsx
@@ -28,7 +28,7 @@ export function GitMetadataBranch({
           leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
           to={git.branchUrl}
-          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
+          className="pl-1 duration-0 [&_span]:duration-0 group-hover/table-row:[&_span]:text-text-bright"
         >
           {git.branchName}
         </LinkButton>
@@ -52,7 +52,7 @@ export function GitMetadataCommit({
           LeadingIcon={<GitCommitIcon className="size-4" />}
           leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
+          className="pl-1 duration-0 [&_span]:duration-0 group-hover/table-row:[&_span]:text-text-bright"
         >
           {`${git.shortSha} / ${git.commitMessage}`}
         </LinkButton>
@@ -78,7 +78,7 @@ export function GitMetadataPullRequest({
           LeadingIcon={<GitPullRequestIcon className="size-4" />}
           leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
+          className="pl-1 duration-0 [&_span]:duration-0 group-hover/table-row:[&_span]:text-text-bright"
         >
           #{git.pullRequestNumber} {git.pullRequestTitle}
         </LinkButton>
diff --git a/apps/webapp/app/components/ListPagination.tsx b/apps/webapp/app/components/ListPagination.tsx
index 6e2633067..32d73d683 100644
--- a/apps/webapp/app/components/ListPagination.tsx
+++ b/apps/webapp/app/components/ListPagination.tsx
@@ -23,7 +23,7 @@ export function ListPagination({ list, className }: { list: List; className?: st
       <NextButton cursor={list.pagination.next} />
       <div
         className={cn(
-          "order-2 h-6 w-px bg-charcoal-600 transition-colors peer-hover/next:bg-charcoal-550 peer-hover/prev:bg-charcoal-550",
+          "order-2 h-6 w-px bg-surface-control transition-colors peer-hover/next:bg-surface-control-hover peer-hover/prev:bg-surface-control-hover",
           bothDisabled && "opacity-30"
         )}
       />
@@ -41,7 +41,7 @@ function PreviousButton({ cursor }: { cursor?: string }) {
         variant={"secondary/small"}
         LeadingIcon={ChevronLeftIcon}
         className={cn(
-          "flex items-center rounded-r-none border-r-0 pl-2 pr-[0.5625rem]",
+          "flex items-center rounded-r-none border-r-0 pl-2 pr-2.25",
           !path && "cursor-not-allowed opacity-50"
         )}
         onClick={(e) => !path && e.preventDefault()}
@@ -63,7 +63,7 @@ function NextButton({ cursor }: { cursor?: string }) {
         variant={"secondary/small"}
         TrailingIcon={ChevronRightIcon}
         className={cn(
-          "flex items-center rounded-l-none border-l-0 pl-[0.5625rem] pr-2",
+          "flex items-center rounded-l-none border-l-0 pl-2.25 pr-2",
           !path && "cursor-not-allowed opacity-50"
         )}
         onClick={(e) => !path && e.preventDefault()}
diff --git a/apps/webapp/app/components/LoginPageLayout.tsx b/apps/webapp/app/components/LoginPageLayout.tsx
index 7c4a39b15..e48489fd9 100644
--- a/apps/webapp/app/components/LoginPageLayout.tsx
+++ b/apps/webapp/app/components/LoginPageLayout.tsx
@@ -68,7 +68,7 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
         </div>
         <div className="flex flex-col items-center gap-4 px-8">
           <Paragraph>Trusted by developers at</Paragraph>
-          <div className="flex w-full flex-wrap items-center justify-center gap-x-6 gap-y-3 text-charcoal-500 xl:justify-between xl:gap-0">
+          <div className="flex w-full flex-wrap items-center justify-center gap-x-6 gap-y-3 text-text-faint xl:justify-between xl:gap-0">
             <LyftLogo className="w-11" />
             <UnkeyLogo />
             <MiddayLogo />
diff --git a/apps/webapp/app/components/ProductHuntBanner.tsx b/apps/webapp/app/components/ProductHuntBanner.tsx
index b85893836..abb5a1463 100644
--- a/apps/webapp/app/components/ProductHuntBanner.tsx
+++ b/apps/webapp/app/components/ProductHuntBanner.tsx
@@ -14,7 +14,7 @@ export function ProductHuntBanner() {
       <LinkButton
         to="https://www.producthunt.com/posts/trigger-dev"
         target="_blank"
-        className="!text-white underline underline-offset-2 transition hover:decoration-charcoal-100 hover:decoration-2"
+        className="text-white! underline underline-offset-2 transition hover:decoration-text-bright hover:decoration-2"
         variant="tertiary/small"
       >
         Vote for us today only!
diff --git a/apps/webapp/app/components/UserProfilePhoto.tsx b/apps/webapp/app/components/UserProfilePhoto.tsx
index 99febd1c2..4676594db 100644
--- a/apps/webapp/app/components/UserProfilePhoto.tsx
+++ b/apps/webapp/app/components/UserProfilePhoto.tsx
@@ -26,6 +26,6 @@ export function UserAvatar({
       />
     </div>
   ) : (
-    <UserCircleIcon className={cn("aspect-square text-charcoal-400", className)} />
+    <UserCircleIcon className={cn("aspect-square text-text-dimmed", className)} />
   );
 }
diff --git a/apps/webapp/app/components/WarmStarts.tsx b/apps/webapp/app/components/WarmStarts.tsx
index 07a894b9e..50ffeee79 100644
--- a/apps/webapp/app/components/WarmStarts.tsx
+++ b/apps/webapp/app/components/WarmStarts.tsx
@@ -30,7 +30,7 @@ export function WarmStartIconWithTooltip({
 }) {
   return (
     <SimpleTooltip
-      className="relative z-[9999]"
+      className="relative z-9999"
       button={<WarmStartIcon isWarmStart={isWarmStart} className={className} />}
       content={<WarmStartTooltipContent />}
     />
@@ -42,14 +42,14 @@ function WarmStartTooltipContent() {
     <div className="flex max-w-xs flex-col gap-4 p-1">
       <div>
         <WarmStartCombo isWarmStart={false} className="mb-0.5 text-text-bright" />
-        <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+        <Paragraph variant="small" className="text-wrap! text-text-dimmed">
           A cold start happens when we need to boot up a new machine for your run to execute. This
           takes longer than a warm start.
         </Paragraph>
       </div>
       <div>
         <WarmStartCombo isWarmStart={true} className="mb-0.5 text-text-bright" />
-        <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+        <Paragraph variant="small" className="text-wrap! text-text-dimmed">
           A warm start happens when we can reuse a machine from a run that recently finished. This
           takes less time than a cold start.
         </Paragraph>
diff --git a/apps/webapp/app/components/admin/FeatureFlagsDialog.tsx b/apps/webapp/app/components/admin/FeatureFlagsDialog.tsx
index b1050e60f..887103700 100644
--- a/apps/webapp/app/components/admin/FeatureFlagsDialog.tsx
+++ b/apps/webapp/app/components/admin/FeatureFlagsDialog.tsx
@@ -166,14 +166,14 @@ export function FeatureFlagsDialog({
                   return (
                     <div
                       key={key}
-                      className="flex items-center justify-between rounded-md border border-transparent bg-charcoal-750 px-3 py-2.5"
+                      className="flex items-center justify-between rounded-md border border-transparent bg-background-hover px-3 py-2.5"
                       title="Global-level setting - not editable per org"
                     >
                       <div className="min-w-0 flex-1">
                         <div className="truncate text-sm text-text-dimmed">{key}</div>
-                        <div className="text-xs text-charcoal-400">global: {globalDisplay}</div>
+                        <div className="text-xs text-text-dimmed">global: {globalDisplay}</div>
                       </div>
-                      <LockClosedIcon className="size-4 text-charcoal-500" />
+                      <LockClosedIcon className="size-4 text-text-faint" />
                     </div>
                   );
                 }
@@ -187,7 +187,7 @@ export function FeatureFlagsDialog({
                       "flex items-center justify-between rounded-md border px-3 py-2.5",
                       isOverridden
                         ? "border-indigo-500/20 bg-indigo-500/5"
-                        : "border-transparent bg-charcoal-750"
+                        : "border-transparent bg-background-hover"
                     )}
                   >
                     <div className="min-w-0 flex-1">
@@ -199,7 +199,7 @@ export function FeatureFlagsDialog({
                       >
                         {key}
                       </div>
-                      <div className="text-xs text-charcoal-400">global: {globalDisplay}</div>
+                      <div className="text-xs text-text-dimmed">global: {globalDisplay}</div>
                     </div>
 
                     <div className="flex items-center gap-2">
@@ -283,7 +283,7 @@ export function FeatureFlagsDialog({
             <summary className="cursor-pointer text-xs text-text-dimmed hover:text-text-bright">
               Preview JSON
             </summary>
-            <pre className="mt-1 max-h-40 overflow-auto rounded bg-charcoal-800 p-2 text-xs text-text-dimmed">
+            <pre className="mt-1 max-h-40 overflow-auto rounded bg-background-bright p-2 text-xs text-text-dimmed">
               {jsonPreview}
             </pre>
           </details>
diff --git a/apps/webapp/app/components/admin/backOffice/MaxProjectsSection.tsx b/apps/webapp/app/components/admin/backOffice/MaxProjectsSection.tsx
index 8aa4b5c93..6b0185e33 100644
--- a/apps/webapp/app/components/admin/backOffice/MaxProjectsSection.tsx
+++ b/apps/webapp/app/components/admin/backOffice/MaxProjectsSection.tsx
@@ -42,7 +42,7 @@ export function MaxProjectsSection({
   }, [savedJustNow, hasFieldErrors]);
 
   return (
-    <section className="flex flex-col gap-3 rounded-md border border-charcoal-700 bg-charcoal-800 p-4">
+    <section className="flex flex-col gap-3 rounded-md border border-grid-bright bg-background-bright p-4">
       <div className="flex items-center justify-between">
         <Header2>Maximum projects</Header2>
         {!isEditing && (
diff --git a/apps/webapp/app/components/admin/backOffice/RateLimitSection.tsx b/apps/webapp/app/components/admin/backOffice/RateLimitSection.tsx
index efbd162df..09d51e69f 100644
--- a/apps/webapp/app/components/admin/backOffice/RateLimitSection.tsx
+++ b/apps/webapp/app/components/admin/backOffice/RateLimitSection.tsx
@@ -94,7 +94,7 @@ export function RateLimitSection({
   };
 
   return (
-    <section className="flex flex-col gap-3 rounded-md border border-charcoal-700 bg-charcoal-800 p-4">
+    <section className="flex flex-col gap-3 rounded-md border border-grid-bright bg-background-bright p-4">
       <div className="flex items-center justify-between">
         <Header2>{title}</Header2>
         {!isEditing && (
diff --git a/apps/webapp/app/components/billing/FreePlanUsage.tsx b/apps/webapp/app/components/billing/FreePlanUsage.tsx
index 9f51754a1..4add40087 100644
--- a/apps/webapp/app/components/billing/FreePlanUsage.tsx
+++ b/apps/webapp/app/components/billing/FreePlanUsage.tsx
@@ -1,15 +1,20 @@
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { Link } from "@remix-run/react";
 import { motion, useMotionValue, useTransform } from "framer-motion";
+import { useThemeColor } from "~/hooks/useThemeColor";
 import { cn } from "~/utils/cn";
 
 export function FreePlanUsage({ to, percentage }: { to: string; percentage: number }) {
   const cappedPercentage = Math.min(percentage, 1);
   const widthProgress = useMotionValue(cappedPercentage * 100);
+  // Resolved to concrete colors - framer-motion can't interpolate var() strings
+  const successColor = useThemeColor("--color-success", "#28bf5c");
+  const warningColor = useThemeColor("--color-warning", "#f59e0b");
+  const errorColor = useThemeColor("--color-error", "#e11d48");
   const color = useTransform(
     widthProgress,
     [0, 74, 75, 95, 100],
-    ["#22C55E", "#22C55E", "#F59E0B", "#F43F5E", "#F43F5E"]
+    [successColor, successColor, warningColor, errorColor, errorColor]
   );
 
   const hasHitLimit = cappedPercentage >= 1;
@@ -17,7 +22,7 @@ export function FreePlanUsage({ to, percentage }: { to: string; percentage: numb
   return (
     <div
       className={cn(
-        "rounded border border-charcoal-700 bg-charcoal-750 p-2.5",
+        "rounded border border-grid-bright bg-background-hover p-2.5",
         hasHitLimit && "border-error/40"
       )}
     >
diff --git a/apps/webapp/app/components/billing/UsageBar.tsx b/apps/webapp/app/components/billing/UsageBar.tsx
index e570a029e..493464922 100644
--- a/apps/webapp/app/components/billing/UsageBar.tsx
+++ b/apps/webapp/app/components/billing/UsageBar.tsx
@@ -110,7 +110,7 @@ function Legend({ text, value, position, percentage, tooltipContent }: LegendPro
   return (
     <div
       className={cn(
-        "absolute left-full z-10 flex border-charcoal-500",
+        "absolute left-full z-10 flex border-border-brightest",
         positions[position],
         flipLegendPosition === true ? "-translate-x-full border-r" : "border-l"
       )}
diff --git a/apps/webapp/app/components/code/AIQueryInput.tsx b/apps/webapp/app/components/code/AIQueryInput.tsx
index 8e804958d..f9ceb3384 100644
--- a/apps/webapp/app/components/code/AIQueryInput.tsx
+++ b/apps/webapp/app/components/code/AIQueryInput.tsx
@@ -257,7 +257,7 @@ export function AIQueryInput({
               onChange={(e) => setPrompt(e.target.value)}
               disabled={isLoading}
               rows={8}
-              className="m-0 min-h-10 w-full resize-none border-0 bg-background-bright px-3 py-2.5 text-sm text-text-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-text-dimmed focus:border-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
+              className="m-0 min-h-10 w-full resize-none border-0 bg-background-bright px-3 py-2.5 text-sm text-text-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-text-dimmed focus:border-0 focus:outline-hidden focus:ring-0 focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
               onKeyDown={(e) => {
                 if (e.key === "Enter" && !e.shiftKey && prompt.trim() && !isLoading) {
                   e.preventDefault();
@@ -342,7 +342,7 @@ export function AIQueryInput({
             className="overflow-hidden"
           >
             <div className="px-1">
-              <div className="rounded-b-lg border-x border-b border-grid-dimmed bg-charcoal-850 p-3 pb-1">
+              <div className="rounded-b-lg border-x border-b border-grid-dimmed bg-background-dimmed p-3 pb-1">
                 <div className="mb-1 flex items-center justify-between">
                   <div className="flex items-center gap-1">
                     {isLoading ? (
@@ -390,7 +390,7 @@ export function AIQueryInput({
                     </Button>
                   )}
                 </div>
-                <div className="streamdown-container max-h-96 overflow-y-auto text-xs text-text-dimmed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                <div className="streamdown-container max-h-96 overflow-y-auto text-xs text-text-dimmed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
                   <Suspense fallback={<p className="whitespace-pre-wrap">{thinking}</p>}>
                     <StreamdownRenderer isAnimating={isLoading}>{thinking}</StreamdownRenderer>
                   </Suspense>
diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index 1b61e46a7..1c915c2a4 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -381,7 +381,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
                         }
                         updateConfig(updates);
                       }}
-                      className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                      className="rounded p-1 text-text-dimmed hover:bg-background-raised hover:text-text-bright"
                       title="Remove series"
                     >
                       <XIcon className="h-3.5 w-3.5" />
@@ -406,7 +406,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
                         });
                       }
                     }}
-                    className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                    className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-background-raised hover:text-text-bright"
                   >
                     <Plus className="h-3 w-3" />
                     Add series
@@ -568,7 +568,7 @@ function SeriesColorPicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="flex-shrink-0 rounded p-0.5 hover:bg-charcoal-700"
+          className="shrink-0 rounded p-0.5 hover:bg-background-raised"
           title="Change series color"
         >
           <span
@@ -616,7 +616,7 @@ function TypeBadge({ type }: { type: string }) {
   }
 
   return (
-    <span className="rounded bg-charcoal-750 px-1 py-0.5 font-mono text-xxs text-text-dimmed">
+    <span className="rounded bg-background-hover px-1 py-0.5 font-mono text-xxs text-text-dimmed">
       {displayType}
     </span>
   );
diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index 4cab68edc..1eb2828c9 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -79,68 +79,68 @@ const extraLinesWhenClipping = 0.35;
 
 const defaultTheme: PrismTheme = {
   plain: {
-    color: "#9C9AF2",
+    color: "var(--color-code-constant)",
     backgroundColor: "rgba(0, 0, 0, 0)",
   },
   styles: [
     {
       types: ["comment", "prolog", "doctype", "cdata"],
       style: {
-        color: "#5F6570",
+        color: "var(--color-code-muted)",
       },
     },
     {
       types: ["punctuation"],
       style: {
-        color: "#878C99",
+        color: "var(--color-code-foreground)",
       },
     },
     {
       types: ["property", "tag", "constant", "symbol", "deleted"],
       style: {
-        color: "#9B99FF",
+        color: "var(--color-code-language)",
       },
     },
     {
       types: ["boolean", "number"],
       style: {
-        color: "#E5C07B",
+        color: "var(--color-code-builtin)",
       },
     },
     {
       types: ["selector", "attr-name", "string", "char", "builtin", "inserted"],
       style: {
-        color: "#AFEC73",
+        color: "var(--color-code-string)",
       },
     },
     {
       types: ["operator", "entity", "url"],
       style: {
-        color: "#D4D4D4",
+        color: "var(--color-code-plain)",
       },
     },
     {
       types: ["variable"],
       style: {
-        color: "#CCCBFF",
+        color: "var(--color-code-variable)",
       },
     },
     {
       types: ["atrule", "attr-value", "keyword"],
       style: {
-        color: "#E888F8",
+        color: "var(--color-code-keyword)",
       },
     },
     {
       types: ["function", "class-name"],
       style: {
-        color: "#D9F07C",
+        color: "var(--color-code-function)",
       },
     },
     {
       types: ["regex"],
       style: {
-        color: "#d16969",
+        color: "var(--color-code-regexp)",
       },
     },
     {
@@ -164,31 +164,31 @@ const defaultTheme: PrismTheme = {
     {
       types: ["deleted"],
       style: {
-        color: "#F85149",
+        color: "var(--color-code-deleted)",
       },
     },
     {
       types: ["char"],
       style: {
-        color: "#b5cea8",
+        color: "var(--color-code-number)",
       },
     },
     {
       types: ["tag"],
       style: {
-        color: "#D7BA7D",
+        color: "var(--color-code-escape)",
       },
     },
     {
       types: ["keyword.operator"],
       style: {
-        color: "#8271ED",
+        color: "var(--color-code-storage)",
       },
     },
     {
       types: ["meta.template.expression"],
       style: {
-        color: "#d4d4d4",
+        color: "var(--color-code-plain)",
       },
     },
   ],
@@ -359,7 +359,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
             <div
               dir="ltr"
               className={cn(
-                "min-h-0 flex-1 px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+                "min-h-0 flex-1 px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",
                 "overflow-auto"
               )}
               style={{
@@ -369,7 +369,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
               <pre
                 className={cn(
                   "relative mr-2 p-2 font-mono text-xs leading-relaxed",
-                  isWrapped && "[&_span]:whitespace-pre-wrap [&_span]:break-words"
+                  isWrapped && "[&_span]:whitespace-pre-wrap [&_span]:wrap-break-word"
                 )}
                 dir="ltr"
               >
@@ -412,7 +412,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
             ) : (
               <div
                 dir="ltr"
-                className="overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+                className="overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
               >
                 <pre className="relative mr-2 p-2 font-mono text-base leading-relaxed" dir="ltr">
                   {highlightSearchText(code, searchTerm)}
@@ -430,14 +430,14 @@ CodeBlock.displayName = "CodeBlock";
 
 function Chrome({ title }: { title?: string }) {
   return (
-    <div className="grid h-7 grid-cols-[100px_auto_100px] border-b border-charcoal-800 bg-charcoal-900">
+    <div className="grid h-7 grid-cols-[100px_auto_100px] border-b border-background-bright bg-background-deep">
       <div className="ml-2 flex items-center gap-2">
-        <div className="h-3 w-3 rounded-full bg-charcoal-700" />
-        <div className="h-3 w-3 rounded-full bg-charcoal-700" />
-        <div className="h-3 w-3 rounded-full bg-charcoal-700" />
+        <div className="h-3 w-3 rounded-full bg-background-raised" />
+        <div className="h-3 w-3 rounded-full bg-background-raised" />
+        <div className="h-3 w-3 rounded-full bg-background-raised" />
       </div>
       <div className="flex items-center justify-center">
-        <div className={cn("rounded-sm px-3 py-0.5 text-xs text-charcoal-500")}>{title}</div>
+        <div className={cn("rounded-sm px-3 py-0.5 text-xs text-text-faint")}>{title}</div>
       </div>
       <div></div>
     </div>
@@ -493,7 +493,7 @@ function HighlightCode({
   }, []);
 
   const containerClasses = cn(
-    "min-h-0 flex-1 px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+    "min-h-0 flex-1 px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",
     !isWrapped && "overflow-auto",
     isWrapped && "overflow-auto",
     className
@@ -502,7 +502,7 @@ function HighlightCode({
   const preClasses = cn(
     "relative mr-2 font-mono leading-relaxed",
     preClassName,
-    isWrapped && "[&_span]:whitespace-pre-wrap [&_span]:break-words"
+    isWrapped && "[&_span]:whitespace-pre-wrap [&_span]:wrap-break-word"
   );
 
   if (!isLoaded) {
@@ -531,7 +531,7 @@ function HighlightCode({
                 }
 
                 const lineNumber = index + 1;
-                const lineProps = getLineProps({ line, key: index });
+                const lineProps = getLineProps({ line });
 
                 let hasAnyHighlights = highlightLines ? highlightLines.length > 0 : false;
 
@@ -557,7 +557,7 @@ function HighlightCode({
                     {showLineNumbers && (
                       <div
                         className={cn(
-                          "mr-2 flex-none select-none text-right text-charcoal-500 transition-opacity duration-500",
+                          "mr-2 flex-none select-none text-right text-text-faint transition-opacity duration-500",
                           isWrapped && "sticky left-0"
                         )}
                         style={{
@@ -570,7 +570,7 @@ function HighlightCode({
 
                     <div className="flex-1">
                       {line.map((token, key) => {
-                        const tokenProps = getTokenProps({ token, key });
+                        const tokenProps = getTokenProps({ token });
 
                         // Highlight search term matches in token
                         const content = highlightSearchText(token.content, searchTerm);
diff --git a/apps/webapp/app/components/code/InlineCode.tsx b/apps/webapp/app/components/code/InlineCode.tsx
index 120e86425..1150e8d5b 100644
--- a/apps/webapp/app/components/code/InlineCode.tsx
+++ b/apps/webapp/app/components/code/InlineCode.tsx
@@ -1,7 +1,7 @@
 import { cn } from "~/utils/cn";
 
 const inlineCode =
-  "px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono text-wrap";
+  "px-1 py-0.5 rounded border border-grid-bright bg-background-bright text-text-bright font-mono text-wrap";
 
 const variants = {
   "extra-extra-small": "text-xxs",
diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index fd7b3c32f..48b2d8f9f 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -12,7 +12,7 @@ import { ChartBlankState } from "../primitives/charts/ChartBlankState";
 import { Callout } from "../primitives/Callout";
 import type { AggregationType, ChartConfiguration } from "../metrics/QueryWidget";
 import { aggregateValues } from "../primitives/charts/aggregation";
-import { getRunStatusHexColor } from "~/components/runs/v3/TaskRunStatus";
+import { getRunStatusChartColor } from "~/components/runs/v3/TaskRunStatus";
 import { getSeriesColor } from "./chartColors";
 
 const MAX_SERIES = 50;
@@ -936,7 +936,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   const chartConfig = useMemo(() => {
     const cfg: ChartConfig = {};
     sortedSeries.forEach((s, i) => {
-      const statusColor = groupByIsRunStatus ? getRunStatusHexColor(s) : undefined;
+      const statusColor = groupByIsRunStatus ? getRunStatusChartColor(s) : undefined;
       const originalIndex = config.yAxisColumns.indexOf(s);
       const colorIndex = originalIndex >= 0 ? originalIndex : i;
       cfg[s] = {
@@ -1039,14 +1039,14 @@ export const QueryResultsChart = memo(function QueryResultsChart({
               y1={axisY}
               x2={x as number}
               y2={axisY - 3}
-              stroke="#878C99"
+              stroke="var(--color-text-dimmed)"
               strokeWidth={1}
             />
             <text
               x={x}
               y={axisY}
               dy={10}
-              fill="#878C99"
+              fill="var(--color-text-dimmed)"
               fontSize={11}
               textAnchor={xAxisAngle !== 0 ? "end" : "middle"}
               style={{ fontVariantNumeric: "tabular-nums" }}
@@ -1066,7 +1066,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
           y1={axisY}
           x2={x as number}
           y2={axisY - 3}
-          stroke="#272A2E"
+          stroke="var(--color-grid-bright)"
           strokeWidth={1}
         />
       );
diff --git a/apps/webapp/app/components/code/TSQLEditor.tsx b/apps/webapp/app/components/code/TSQLEditor.tsx
index f59c2a746..3b4bf2029 100644
--- a/apps/webapp/app/components/code/TSQLEditor.tsx
+++ b/apps/webapp/app/components/code/TSQLEditor.tsx
@@ -271,7 +271,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
     >
       <div
         className={cn(
-          "min-h-0 flex-1 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          "min-h-0 flex-1 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         )}
         ref={editor}
         onClick={() => {
@@ -284,7 +284,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
         }}
       />
       {showButtons && (
-        <div className="absolute right-0 top-0 z-10 flex items-center justify-end bg-charcoal-900/80 p-1.5">
+        <div className="absolute right-0 top-0 z-10 flex items-center justify-end bg-background-deep/80 p-1.5">
           {additionalActions && additionalActions}
           {showFormatButton && (
             <Button
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 8e10f8e6f..87d2003d3 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -833,9 +833,9 @@ function CopyableCell({
     <div
       className={cn(
         "relative flex h-full w-full items-center overflow-hidden px-2",
-        "bg-background-bright group-hover/row:bg-charcoal-750",
+        "bg-background-bright group-hover/row:bg-background-hover",
         "font-mono text-xs text-text-dimmed group-hover/row:text-text-bright",
-        "[&_a:focus-visible]:underline [&_a:focus-visible]:underline-offset-[3px] [&_a:focus-visible]:outline-none",
+        "[&_a:focus-visible]:underline [&_a:focus-visible]:underline-offset-[3px] [&_a:focus-visible]:outline-hidden",
         alignment === "right" && "justify-end"
       )}
       onMouseEnter={() => setIsHovered(true)}
@@ -855,10 +855,10 @@ function CopyableCell({
             button={
               <span
                 className={cn(
-                  "flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+                  "flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
                   copied
                     ? "text-green-500"
-                    : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+                    : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
                 )}
               >
                 {copied ? (
@@ -925,7 +925,7 @@ function HeaderCellContent({
           })}
         >
           <span className="truncate text-left">{children}</span>
-          <span className="flex flex-shrink-0">
+          <span className="flex shrink-0">
             <InfoIconTooltip
               content={tooltip}
               contentClassName="normal-case tracking-normal"
@@ -941,7 +941,7 @@ function HeaderCellContent({
       {canSort && (
         <span
           className={cn(
-            "flex-shrink-0 transition-colors",
+            "shrink-0 transition-colors",
             sortHighlighted ? "text-text-bright" : "text-text-dimmed"
           )}
         >
@@ -962,7 +962,7 @@ function HeaderCellContent({
           }}
           onMouseEnter={() => setIsFilterHovered(true)}
           onMouseLeave={() => setIsFilterHovered(false)}
-          className="flex-shrink-0 rounded text-text-dimmed transition-colors focus-custom hover:text-text-bright"
+          className="shrink-0 rounded text-text-dimmed transition-colors focus-custom hover:text-text-bright"
           title="Toggle column filters"
         >
           {showFilters ? <IconFilter2X className="size-4" /> : <IconFilter2 className="size-4" />}
@@ -1004,9 +1004,9 @@ function FilterCell({
         onChange={(value) => column.setFilterValue(value)}
         placeholder="Filter..."
         className={cn(
-          "w-full rounded border border-charcoal-700 bg-charcoal-800 px-2 py-1",
+          "w-full rounded border border-grid-bright bg-background-bright px-2 py-1",
           "text-xs text-text-bright placeholder:text-text-dimmed",
-          "focus:border-indigo-500/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50"
+          "focus:border-indigo-500/50 focus:outline-hidden focus:ring-1 focus:ring-indigo-500/50"
         )}
       />
     </div>
@@ -1110,7 +1110,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
 
     return (
       <div
-        className="h-full min-h-0 w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="h-full min-h-0 w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         style={{ position: "relative" }}
       >
         <table style={{ display: "grid" }}>
@@ -1165,7 +1165,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   return (
     <div
       ref={tableContainerRef}
-      className="h-full min-h-0 w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+      className="h-full min-h-0 w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
       style={{ position: "relative" }}
     >
       <table style={{ display: "grid" }}>
@@ -1219,7 +1219,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                       className={cn(
                         "absolute right-0 top-0 h-full w-0.5 cursor-col-resize touch-none select-none",
                         "opacity-0 group-hover/header:opacity-100",
-                        "bg-charcoal-600 hover:bg-indigo-500",
+                        "bg-surface-control hover:bg-indigo-500",
                         header.column.getIsResizing() && "bg-indigo-500 opacity-100"
                       )}
                     />
@@ -1249,7 +1249,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
             height: `${rowVirtualizer.getTotalSize()}px`,
             position: "relative",
           }}
-          className="divide-y divide-charcoal-700 bg-background-bright after:absolute after:bottom-0 after:left-0 after:right-0 after:z-[1] after:h-px after:bg-grid-bright"
+          className="divide-y divide-grid-bright bg-background-bright after:absolute after:bottom-0 after:left-0 after:right-0 after:z-1 after:h-px after:bg-grid-bright"
         >
           {rowVirtualizer.getVirtualItems().map((virtualRow) => {
             const row = tableRows[virtualRow.index];
@@ -1257,7 +1257,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
               <tr
                 key={row.id}
                 data-index={virtualRow.index}
-                className="group/row hover:bg-charcoal-750"
+                className="group/row hover:bg-background-hover"
                 style={{
                   display: "flex",
                   position: "absolute",
diff --git a/apps/webapp/app/components/code/codeMirrorTheme.ts b/apps/webapp/app/components/code/codeMirrorTheme.ts
index c9dd2f12e..f32ea560b 100644
--- a/apps/webapp/app/components/code/codeMirrorTheme.ts
+++ b/apps/webapp/app/components/code/codeMirrorTheme.ts
@@ -4,27 +4,28 @@ import { EditorView } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 
 export function darkTheme(): Extension {
-  const chalky = "#e5c07b",
-    coral = "#e06c75",
-    cyan = "#56b6c2",
-    invalid = "#ffffff",
-    ivory = "#abb2bf",
-    stone = "#7d8799",
-    malibu = "#61afef",
-    sage = "#afec73",
-    whiskey = "#d19a66",
-    violet = "#c678dd",
-    lilac = "#9b99ff",
-    darkBackground = "#21252b",
-    highlightBackground = "rgba(71,85,105,0.2)",
-    background = "#121317",
-    tooltipBackground = "#353a42",
-    selection = "rgb(71 85 105)",
-    cursor = "#528bff",
+  // Values come from the --color-editor-* theme palette in tailwind.css.
+  const chalky = "var(--color-editor-type)",
+    coral = "var(--color-editor-heading)",
+    cyan = "var(--color-editor-operator)",
+    invalid = "var(--color-editor-invalid)",
+    ivory = "var(--color-editor-foreground)",
+    stone = "var(--color-editor-comment)",
+    malibu = "var(--color-editor-function)",
+    sage = "var(--color-editor-string)",
+    whiskey = "var(--color-editor-constant)",
+    violet = "var(--color-editor-keyword)",
+    lilac = "var(--color-editor-name)",
+    darkBackground = "var(--color-editor-panel-background)",
+    highlightBackground = "var(--color-editor-highlight-background)",
+    background = "var(--color-editor-background)",
+    tooltipBackground = "var(--color-editor-tooltip-background)",
+    selection = "var(--color-editor-selection)",
+    cursor = "var(--color-editor-cursor)",
     scrollbarTrack = "rgba(0,0,0,0)",
-    scrollbarTrackActive = "#131B2B",
-    scrollbarThumb = "#293649",
-    scrollbarThumbActive = "#3C4B62",
+    scrollbarTrackActive = "var(--color-editor-scrollbar-track-active)",
+    scrollbarThumb = "var(--color-editor-scrollbar-thumb)",
+    scrollbarThumbActive = "var(--color-editor-scrollbar-thumb-active)",
     scrollbarBg = "rgba(0,0,0,0)";
 
   const jsonHeroEditorTheme = EditorView.theme(
@@ -52,18 +53,18 @@ export function darkTheme(): Extension {
       },
 
       ".cm-diagnostic-error": {
-        borderLeft: "2px solid #e11d48",
+        borderLeft: "2px solid var(--color-error)",
       },
 
       ".cm-lint-marker-error": {
         content: "none",
-        backgroundColor: "#e11d48",
+        backgroundColor: "var(--color-error)",
         height: "100%",
         width: "2px",
       },
 
       ".cm-lintPoint:after": {
-        borderBottom: "4px solid #e11d48",
+        borderBottom: "4px solid var(--color-error)",
       },
 
       ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
@@ -76,19 +77,19 @@ export function darkTheme(): Extension {
       ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
 
       ".cm-searchMatch": {
-        backgroundColor: "#72a1ff59",
-        outline: "1px solid #457dff",
+        backgroundColor: "var(--color-editor-search-match)",
+        outline: "1px solid var(--color-editor-search-match-outline)",
       },
       ".cm-searchMatch.cm-searchMatch-selected": {
-        backgroundColor: "#6199ff2f",
+        backgroundColor: "var(--color-editor-search-match-selected)",
       },
 
       ".cm-activeLine": { backgroundColor: highlightBackground },
-      ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+      ".cm-selectionMatch": { backgroundColor: "var(--color-editor-selection-match)" },
 
       "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-        backgroundColor: "rgba(18, 19, 23, 0.9)",
-        outline: "1px solid rgba(81, 90, 107, 0.5)",
+        backgroundColor: "var(--color-editor-matching-bracket)",
+        outline: "1px solid var(--color-editor-matching-bracket-outline)",
       },
 
       ".cm-gutters": {
@@ -104,7 +105,7 @@ export function darkTheme(): Extension {
       ".cm-foldPlaceholder": {
         backgroundColor: "transparent",
         border: "none",
-        color: "#ddd",
+        color: "var(--color-editor-fold-placeholder)",
       },
 
       ".cm-tooltip": {
diff --git a/apps/webapp/app/components/code/shikiTheme.ts b/apps/webapp/app/components/code/shikiTheme.ts
index 5d47155b9..e9d45c9fb 100644
--- a/apps/webapp/app/components/code/shikiTheme.ts
+++ b/apps/webapp/app/components/code/shikiTheme.ts
@@ -6,9 +6,9 @@ export const triggerDarkTheme: ThemeRegistrationAny = {
   name: "trigger-dark",
   type: "dark",
   colors: {
-    "editor.background": "#212327",
-    "editor.foreground": "#878C99",
-    "editorLineNumber.foreground": "#484c54",
+    "editor.background": "var(--color-code-background)",
+    "editor.foreground": "var(--color-code-foreground)",
+    "editorLineNumber.foreground": "var(--color-code-line-number)",
   },
   tokenColors: [
     // Control flow keywords: pink-purple
@@ -20,17 +20,17 @@ export const triggerDarkTheme: ThemeRegistrationAny = {
         "keyword.other.operator",
         "entity.name.operator",
       ],
-      settings: { foreground: "#E888F8" },
+      settings: { foreground: "var(--color-code-keyword)" },
     },
     // Storage type (const, let, var, function, class): purple
     {
       scope: "storage.type",
-      settings: { foreground: "#8271ED" },
+      settings: { foreground: "var(--color-code-storage)" },
     },
     // Storage modifiers (async, export, etc.): purple
     {
       scope: ["storage.modifier", "keyword.operator.noexcept"],
-      settings: { foreground: "#8271ED" },
+      settings: { foreground: "var(--color-code-storage)" },
     },
     // Keyword operator expressions (new, typeof, instanceof, etc.): purple
     {
@@ -43,7 +43,7 @@ export const triggerDarkTheme: ThemeRegistrationAny = {
         "keyword.operator.logical.python",
         "keyword.operator.wordlike",
       ],
-      settings: { foreground: "#8271ED" },
+      settings: { foreground: "var(--color-code-storage)" },
     },
     // Types and namespaces: hot pink
     {
@@ -56,12 +56,12 @@ export const triggerDarkTheme: ThemeRegistrationAny = {
         "entity.name.class",
         "entity.other.inherited-class",
       ],
-      settings: { foreground: "#F770C6" },
+      settings: { foreground: "var(--color-code-type)" },
     },
     // Functions: lime/yellow-green
     {
       scope: ["entity.name.function", "support.function"],
-      settings: { foreground: "#D9F07C" },
+      settings: { foreground: "var(--color-code-function)" },
     },
     // Variables and parameters: light lavender
     {
@@ -72,27 +72,27 @@ export const triggerDarkTheme: ThemeRegistrationAny = {
         "entity.name.variable",
         "constant.other.placeholder",
       ],
-      settings: { foreground: "#CCCBFF" },
+      settings: { foreground: "var(--color-code-variable)" },
     },
     // Constants and enums: medium purple
     {
       scope: ["variable.other.constant", "variable.other.enummember"],
-      settings: { foreground: "#9C9AF2" },
+      settings: { foreground: "var(--color-code-constant)" },
     },
     // this/self: purple-blue
     {
       scope: "variable.language",
-      settings: { foreground: "#9B99FF" },
+      settings: { foreground: "var(--color-code-language)" },
     },
     // Object literal keys: medium purple-blue
     {
       scope: "meta.object-literal.key",
-      settings: { foreground: "#8B89FF" },
+      settings: { foreground: "var(--color-code-object-key)" },
     },
     // Strings: sage green
     {
       scope: ["string", "meta.embedded.assembly"],
-      settings: { foreground: "#AFEC73" },
+      settings: { foreground: "var(--color-code-string)" },
     },
     // String interpolation punctuation: blue-purple
     {
@@ -101,27 +101,27 @@ export const triggerDarkTheme: ThemeRegistrationAny = {
         "punctuation.definition.template-expression.end",
         "punctuation.section.embedded",
       ],
-      settings: { foreground: "#7A78EA" },
+      settings: { foreground: "var(--color-code-template-punctuation)" },
     },
     // Template expression reset
     {
       scope: "meta.template.expression",
-      settings: { foreground: "#d4d4d4" },
+      settings: { foreground: "var(--color-code-plain)" },
     },
     // Operators: gray (same as foreground)
     {
       scope: "keyword.operator",
-      settings: { foreground: "#878C99" },
+      settings: { foreground: "var(--color-code-foreground)" },
     },
     // Comments: olive gray
     {
       scope: "comment",
-      settings: { foreground: "#6f736d" },
+      settings: { foreground: "var(--color-code-comment)" },
     },
     // Language constants (true, false, null, undefined): purple-blue
     {
       scope: "constant.language",
-      settings: { foreground: "#9B99FF" },
+      settings: { foreground: "var(--color-code-language)" },
     },
     // Numeric constants: light green
     {
@@ -130,42 +130,42 @@ export const triggerDarkTheme: ThemeRegistrationAny = {
         "keyword.operator.plus.exponent",
         "keyword.operator.minus.exponent",
       ],
-      settings: { foreground: "#b5cea8" },
+      settings: { foreground: "var(--color-code-number)" },
     },
     // Regex: dark red
     {
       scope: "constant.regexp",
-      settings: { foreground: "#646695" },
+      settings: { foreground: "var(--color-code-regexp-constant)" },
     },
     // HTML/JSX tags: purple-blue
     {
       scope: "entity.name.tag",
-      settings: { foreground: "#9B99FF" },
+      settings: { foreground: "var(--color-code-language)" },
     },
     // Tag brackets: dark gray
     {
       scope: "punctuation.definition.tag",
-      settings: { foreground: "#5F6570" },
+      settings: { foreground: "var(--color-code-muted)" },
     },
     // HTML/JSX attributes: light purple
     {
       scope: "entity.other.attribute-name",
-      settings: { foreground: "#C39EFF" },
+      settings: { foreground: "var(--color-code-attribute)" },
     },
     // Escape characters: gold
     {
       scope: "constant.character.escape",
-      settings: { foreground: "#d7ba7d" },
+      settings: { foreground: "var(--color-code-escape)" },
     },
     // Regex string: dark red
     {
       scope: "string.regexp",
-      settings: { foreground: "#d16969" },
+      settings: { foreground: "var(--color-code-regexp)" },
     },
     // Storage: purple-blue
     {
       scope: "storage",
-      settings: { foreground: "#9B99FF" },
+      settings: { foreground: "var(--color-code-language)" },
     },
     // TS-specific: type casts, math/dom/json constants
     {
@@ -176,47 +176,47 @@ export const triggerDarkTheme: ThemeRegistrationAny = {
         "support.constant.dom",
         "support.constant.json",
       ],
-      settings: { foreground: "#9B99FF" },
+      settings: { foreground: "var(--color-code-language)" },
     },
     // Markdown headings: purple-blue bold
     {
       scope: "markup.heading",
-      settings: { foreground: "#9B99FF", fontStyle: "bold" },
+      settings: { foreground: "var(--color-code-language)", fontStyle: "bold" },
     },
     // Markup bold: purple-blue
     {
       scope: "markup.bold",
-      settings: { foreground: "#9B99FF", fontStyle: "bold" },
+      settings: { foreground: "var(--color-code-language)", fontStyle: "bold" },
     },
     // Markup inline raw: sage green
     {
       scope: "markup.inline.raw",
-      settings: { foreground: "#AFEC73" },
+      settings: { foreground: "var(--color-code-string)" },
     },
     // Markup inserted: light green
     {
       scope: "markup.inserted",
-      settings: { foreground: "#b5cea8" },
+      settings: { foreground: "var(--color-code-number)" },
     },
     // Markup deleted: sage green
     {
       scope: "markup.deleted",
-      settings: { foreground: "#AFEC73" },
+      settings: { foreground: "var(--color-code-string)" },
     },
     // Markup changed: purple-blue
     {
       scope: "markup.changed",
-      settings: { foreground: "#9B99FF" },
+      settings: { foreground: "var(--color-code-language)" },
     },
     // Invalid: red
     {
       scope: "invalid",
-      settings: { foreground: "#f44747" },
+      settings: { foreground: "var(--color-code-invalid)" },
     },
     // JSX text content
     {
       scope: ["meta.jsx.children"],
-      settings: { foreground: "#D7D9DD" },
+      settings: { foreground: "var(--color-code-jsx-text)" },
     },
   ],
 };
diff --git a/apps/webapp/app/components/dashboard-agent/AgentChart.tsx b/apps/webapp/app/components/dashboard-agent/AgentChart.tsx
index c9810071f..6e082231e 100644
--- a/apps/webapp/app/components/dashboard-agent/AgentChart.tsx
+++ b/apps/webapp/app/components/dashboard-agent/AgentChart.tsx
@@ -103,9 +103,9 @@ export function AgentChart({ block }: { block: ChartBlock }) {
   };
 
   return (
-    <div className="overflow-hidden rounded-lg border border-charcoal-600 bg-charcoal-850">
+    <div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
       {block.title ? (
-        <div className="border-b border-charcoal-700 bg-charcoal-800 px-3 py-2 text-xs font-medium text-text-dimmed">
+        <div className="border-b border-grid-bright bg-background-bright px-3 py-2 text-xs font-medium text-text-dimmed">
           {block.title}
         </div>
       ) : null}
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
index 6f6813461..308a87eba 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
@@ -20,7 +20,7 @@ export function DashboardAgentComposer({
 
   return (
     <div className="border-t border-grid-bright p-3">
-      <div className="rounded-2xl border border-charcoal-650 bg-background-bright p-2 transition focus-within:border-charcoal-550">
+      <div className="rounded-2xl border border-border-bright bg-background-bright p-2 transition focus-within:border-border-brighter">
         <div className="flex items-end gap-2">
           <textarea
             ref={ref}
@@ -34,7 +34,7 @@ export function DashboardAgentComposer({
             }}
             placeholder="Type a message…"
             className={cn(
-              "max-h-[40vh] min-h-[40px] flex-1 resize-none border-0 bg-transparent px-2 py-1.5 text-sm text-text-bright placeholder-text-dimmed outline-none ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 [field-sizing:content] focus:outline-none focus:ring-0"
+              "max-h-[40vh] min-h-[40px] flex-1 resize-none border-0 bg-transparent px-2 py-1.5 text-sm text-text-bright placeholder-text-dimmed outline-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control field-sizing-content focus:outline-hidden focus:ring-0"
             )}
           />
           {isStreaming ? (
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentContextBanner.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentContextBanner.tsx
index bbe16a5d7..d7a48af85 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentContextBanner.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentContextBanner.tsx
@@ -8,7 +8,7 @@ export function DashboardAgentContextBanner({
   currentPage: string;
 }) {
   return (
-    <div className="flex items-center gap-1.5 border-b border-grid-bright bg-charcoal-800/30 px-3 py-1.5 text-xs text-text-dimmed">
+    <div className="flex items-center gap-1.5 border-b border-grid-bright bg-background-bright/30 px-3 py-1.5 text-xs text-text-dimmed">
       <span className="shrink-0">Context:</span>
       <span className="truncate font-medium text-text-bright">{projectSlug}</span>
       <span>/</span>
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
index 8b96dd06c..11d486bc1 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
@@ -47,8 +47,8 @@ function IconButton({
       aria-label={label}
       onClick={onClick}
       className={cn(
-        "rounded p-1.5 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright",
-        active && "bg-charcoal-700 text-text-bright"
+        "rounded p-1.5 text-text-dimmed transition hover:bg-background-raised hover:text-text-bright",
+        active && "bg-background-raised text-text-bright"
       )}
     >
       <Icon className="size-4" />
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
index af19d0d69..bc4032744 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
@@ -25,12 +25,12 @@ export function DashboardAgentHistory({
   onDelete: (chatId: string) => void;
 }) {
   return (
-    <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+    <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       <div className="p-2">
         <button
           type="button"
           onClick={onNewChat}
-          className="mb-1 flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-text-bright transition hover:bg-charcoal-800"
+          className="mb-1 flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-text-bright transition hover:bg-background-bright"
         >
           <PlusIcon className="size-4 text-green-500" />
           New chat
@@ -46,14 +46,14 @@ export function DashboardAgentHistory({
               <li key={chat.id}>
                 <div
                   className={cn(
-                    "group flex items-center gap-2 rounded-sm px-2 py-1.5 transition-colors hover:bg-charcoal-800",
-                    chat.id === currentChatId && "bg-charcoal-750 hover:bg-charcoal-750"
+                    "group flex items-center gap-2 rounded-sm px-2 py-1.5 transition-colors hover:bg-background-bright",
+                    chat.id === currentChatId && "bg-background-hover hover:bg-background-hover"
                   )}
                 >
                   <button
                     type="button"
                     onClick={() => onSelect(chat.id)}
-                    className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left outline-none focus-custom"
+                    className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left outline-hidden focus-custom"
                   >
                     <span className="line-clamp-1 text-sm text-text-bright">{chat.title}</span>
                     {chat.lastMessageAt && (
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx
index f5475d863..1d02bf466 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx
@@ -62,7 +62,7 @@ export function DashboardAgentMessages({
   const rootRef = useAutoScrollToBottom([messages, isThinking]);
 
   return (
-    <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+    <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       <div ref={rootRef} className="space-y-4 p-4">
         {messages.map((message) => (
           <DashboardAgentMessageBubble key={message.id} message={stripStepParts(message)} />
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx
index 912081a39..f78bc5a66 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx
@@ -28,7 +28,7 @@ export function DashboardAgentSuggestedPrompts({
             key={prompt}
             type="button"
             onClick={() => onSelect(prompt)}
-            className="rounded-md border border-charcoal-700 bg-charcoal-800/40 px-3 py-2 text-left text-sm text-text-dimmed transition hover:border-charcoal-600 hover:text-text-bright"
+            className="rounded-md border border-grid-bright bg-background-bright/40 px-3 py-2 text-left text-sm text-text-dimmed transition hover:border-border-bright hover:text-text-bright"
           >
             {prompt}
           </button>
diff --git a/apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx b/apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx
index 2fef1f3de..77aea4806 100644
--- a/apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx
+++ b/apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx
@@ -30,7 +30,7 @@ const CATEGORY_LABELS: Record<DiagnosisBlock["category"], string> = {
 const CONFIDENCE_STYLES: Record<DiagnosisBlock["confidence"], string> = {
   high: "border-emerald-500/40 text-emerald-400",
   medium: "border-amber-500/40 text-amber-400",
-  low: "border-charcoal-600 text-text-dimmed",
+  low: "border-border-bright text-text-dimmed",
 };
 
 const EVIDENCE_LABELS: Record<DiagnosisBlock["evidence"][number]["type"], string> = {
@@ -91,7 +91,7 @@ function EvidenceReference({ reference }: { reference: string }) {
 
 function DiagnosisActions({ actions }: { actions: NonNullable<DiagnosisBlock["actions"]> }) {
   const buttonClass =
-    "inline-flex items-center rounded border border-charcoal-600 bg-charcoal-800 px-2.5 py-1 text-xs text-text-bright transition-colors hover:border-charcoal-500 hover:bg-charcoal-750";
+    "inline-flex items-center rounded border border-border-bright bg-background-bright px-2.5 py-1 text-xs text-text-bright transition-colors hover:border-border-brightest hover:bg-background-hover";
   return (
     <div className="flex flex-wrap gap-2 pt-1">
       {actions.map((action, i) => {
@@ -150,8 +150,8 @@ export function RunDiagnosisCard({ block }: { block: DiagnosisBlock }) {
   const actions = block.actions ?? [];
 
   return (
-    <div className="overflow-hidden rounded-lg border border-charcoal-600 bg-charcoal-850">
-      <div className="flex flex-wrap items-center gap-2 border-b border-charcoal-700 bg-charcoal-800 px-3 py-2">
+    <div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
+      <div className="flex flex-wrap items-center gap-2 border-b border-grid-bright bg-background-bright px-3 py-2">
         <span className="text-xs font-medium text-text-dimmed">Run diagnosis</span>
         <Badge variant="small" className="border-rose-500/40 text-rose-400">
           {CATEGORY_LABELS[block.category] ?? block.category}
@@ -174,7 +174,7 @@ export function RunDiagnosisCard({ block }: { block: DiagnosisBlock }) {
             <ul className="space-y-1.5">
               {evidence.map((item, i) => (
                 <li key={i} className="text-xs text-text-dimmed">
-                  <span className="mr-1.5 rounded-sm bg-charcoal-700 px-1 py-0.5 text-[10px] uppercase tracking-wide text-text-dimmed">
+                  <span className="mr-1.5 rounded-sm bg-background-raised px-1 py-0.5 text-[10px] uppercase tracking-wide text-text-dimmed">
                     {EVIDENCE_LABELS[item.type] ?? item.type}
                   </span>
                   <span className="text-text-bright">{item.detail}</span>
diff --git a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
index 90d5a60eb..41b87ae3b 100644
--- a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
+++ b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
@@ -33,8 +33,8 @@ export function DashboardAgentLauncher() {
       className={cn(
         "flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs text-text-bright transition",
         open
-          ? "border-charcoal-550 bg-charcoal-750"
-          : "border-charcoal-650 bg-background-bright hover:border-charcoal-550"
+          ? "border-border-brighter bg-background-hover"
+          : "border-border-bright bg-background-bright hover:border-border-brighter"
       )}
     >
       {open ? (
diff --git a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx
index 52e1f499c..34ef4a6eb 100644
--- a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx
+++ b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx
@@ -89,7 +89,7 @@ const RegenerateApiKeyModalContent = ({
             <Paragraph variant="small/bright">Enter this text below to confirm:</Paragraph>
             <Paragraph
               variant="small"
-              className="select-all rounded-md border border-grid-bright bg-charcoal-900 px-2 py-1 font-mono"
+              className="select-all rounded-md border border-grid-bright bg-background-deep px-2 py-1 font-mono"
             >
               {randomWord}
             </Paragraph>
diff --git a/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx b/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
index 587dffb29..d6affafd3 100644
--- a/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
+++ b/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
@@ -136,7 +136,7 @@ export function ConfigureErrorAlerts({
       </div>
 
       <fetcher.Form method="post" action={formAction} {...getFormProps(form)} className="contents">
-        <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <Fieldset className="flex flex-col gap-4 p-4">
             <div className="flex flex-col">
               <Header3>Receive alerts when</Header3>
diff --git a/apps/webapp/app/components/integrations/VercelBuildSettings.tsx b/apps/webapp/app/components/integrations/VercelBuildSettings.tsx
index 8449d342f..1abd54b01 100644
--- a/apps/webapp/app/components/integrations/VercelBuildSettings.tsx
+++ b/apps/webapp/app/components/integrations/VercelBuildSettings.tsx
@@ -82,7 +82,7 @@ export function BuildSettingsFields({
             )}
           </Hint>
         </div>
-        <div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
+        <div className="flex flex-col gap-2 rounded border bg-background-bright p-3">
           {availableEnvSlugs.map((slug) => {
             const envType = envSlugToType(slug);
             const disabled = isSlugDisabled(slug);
@@ -149,7 +149,7 @@ export function BuildSettingsFields({
             variables from Vercel during builds.
           </Hint>
         </div>
-        <div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
+        <div className="flex flex-col gap-2 rounded border bg-background-bright p-3">
           {availableEnvSlugs.map((slug) => {
             const envType = envSlugToType(slug);
             const disabled = isSlugDisabled(slug);
diff --git a/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx b/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
index ec608d710..85c7816b7 100644
--- a/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
+++ b/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
@@ -837,7 +837,7 @@ export function VercelOnboardingModal({
 
               <Hint>
                 Once connected, your{" "}
-                <code className="text-xs rounded bg-charcoal-700 px-1 py-0.5 text-text-bright">
+                <code className="text-xs rounded bg-background-raised px-1 py-0.5 text-text-bright">
                   TRIGGER_SECRET_KEY
                 </code>{" "}
                 will be automatically synced to Vercel for each environment.
@@ -881,7 +881,7 @@ export function VercelOnboardingModal({
                 Select which custom Vercel environment should map to Trigger.dev's Staging
                 environment. Production and Preview environments are mapped automatically. If you
                 skip this step, the{" "}
-                <code className="rounded bg-charcoal-700 px-1 py-0.5 text-text-bright">
+                <code className="rounded bg-background-raised px-1 py-0.5 text-text-bright">
                   TRIGGER_SECRET_KEY
                 </code>{" "}
                 will not be installed for the staging environment in Vercel. You can configure this
@@ -958,7 +958,7 @@ export function VercelOnboardingModal({
                   for the recommended setup.
                 </Paragraph>
               </div>
-              <div className="flex items-center justify-between rounded border bg-charcoal-800 p-3">
+              <div className="flex items-center justify-between rounded border bg-background-bright p-3">
                 <div>
                   <Label>Pull all environment variables now</Label>
                   <Hint>Select all variables to pull from Vercel.</Hint>
diff --git a/apps/webapp/app/components/layout/AppLayout.tsx b/apps/webapp/app/components/layout/AppLayout.tsx
index 41b95450d..e0bb94179 100644
--- a/apps/webapp/app/components/layout/AppLayout.tsx
+++ b/apps/webapp/app/components/layout/AppLayout.tsx
@@ -48,7 +48,7 @@ export const PageBody = forwardRef<
       ref={ref}
       className={cn(
         scrollable
-          ? "overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          ? "overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
           : "overflow-hidden",
         className
       )}
@@ -70,7 +70,7 @@ export function MainCenteredContainer({
   return (
     <div
       className={cn(
-        "h-full w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+        "h-full w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",
         variant === "onboarding" && "flex flex-col p-4 lg:p-0"
       )}
     >
@@ -95,10 +95,10 @@ export function MainHorizontallyCenteredContainer({
   className?: string;
 }) {
   return (
-    <div className="w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+    <div className="w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       <div
         className={cn(
-          "mx-auto mt-6 max-w-lg overflow-y-auto p-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 md:mt-14",
+          "mx-auto mt-6 max-w-lg overflow-y-auto p-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control md:mt-14",
           className
         )}
       >
diff --git a/apps/webapp/app/components/logs/LogDetailView.tsx b/apps/webapp/app/components/logs/LogDetailView.tsx
index 01db46483..c0f52b76a 100644
--- a/apps/webapp/app/components/logs/LogDetailView.tsx
+++ b/apps/webapp/app/components/logs/LogDetailView.tsx
@@ -143,7 +143,7 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
           className="pl-1"
         />
       </div>
-      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <DetailsTab log={log} runPath={runPath} runStatus={runStatus} searchTerm={searchTerm} />
       </div>
     </div>
diff --git a/apps/webapp/app/components/logs/LogsLevelFilter.tsx b/apps/webapp/app/components/logs/LogsLevelFilter.tsx
index c61da4d30..fdd96ad03 100644
--- a/apps/webapp/app/components/logs/LogsLevelFilter.tsx
+++ b/apps/webapp/app/components/logs/LogsLevelFilter.tsx
@@ -20,7 +20,7 @@ const allLogLevels: { level: LogLevel; label: string; color: string }[] = [
   { level: "INFO", label: "Info", color: "text-blue-400" },
   { level: "WARN", label: "Warning", color: "text-warning" },
   { level: "ERROR", label: "Error", color: "text-error" },
-  { level: "DEBUG", label: "Debug", color: "text-charcoal-400" },
+  { level: "DEBUG", label: "Debug", color: "text-text-dimmed" },
 ];
 
 // In the future we might add other levels or change which are available
@@ -37,11 +37,11 @@ function getLevelBadgeColor(level: LogLevel): string {
     case "TRACE":
       return "text-purple-400 bg-purple-500/10 border-purple-500/20";
     case "DEBUG":
-      return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
+      return "text-text-dimmed bg-background-raised border-border-bright";
     case "INFO":
       return "text-blue-400 bg-blue-500/10 border-blue-500/20";
     default:
-      return "text-text-dimmed bg-charcoal-750 border-charcoal-700";
+      return "text-text-dimmed bg-background-hover border-grid-bright";
   }
 }
 
diff --git a/apps/webapp/app/components/logs/LogsTable.tsx b/apps/webapp/app/components/logs/LogsTable.tsx
index 8593670f8..9034ce906 100644
--- a/apps/webapp/app/components/logs/LogsTable.tsx
+++ b/apps/webapp/app/components/logs/LogsTable.tsx
@@ -113,7 +113,7 @@ export function LogsTable({
   }, [hasMore, isLoadingMore, onLoadMore]);
 
   return (
-    <div className="relative h-full overflow-auto border-t scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+    <div className="relative h-full overflow-auto border-t scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       <Table variant="compact/mono" containerClassName="overflow-visible" showTopBorder={false}>
         <TableHeader className="sticky top-0 z-10">
           <TableRow>
@@ -151,7 +151,7 @@ export function LogsTable({
                   key={log.id}
                   className={cn(
                     "cursor-pointer transition-colors",
-                    isSelected ? "bg-charcoal-750" : "hover:bg-charcoal-850"
+                    isSelected ? "bg-background-hover" : "hover:bg-background-dimmed"
                   )}
                   isSelected={isSelected}
                 >
@@ -187,7 +187,7 @@ export function LogsTable({
                         variant="minimal/small"
                         TrailingIcon={RunsIcon}
                         trailingIconClassName="text-text-bright"
-                        className="h-[1.375rem] pl-1.5 pr-2"
+                        className="h-5.5 pl-1.5 pr-2"
                       >
                         <span className="text-[0.6875rem] text-text-bright">View run</span>
                       </LinkButton>
diff --git a/apps/webapp/app/components/metrics/BigNumber.tsx b/apps/webapp/app/components/metrics/BigNumber.tsx
index df3fa9e0a..db98668e2 100644
--- a/apps/webapp/app/components/metrics/BigNumber.tsx
+++ b/apps/webapp/app/components/metrics/BigNumber.tsx
@@ -40,7 +40,7 @@ export function BigNumber({
     <div className="flex flex-col justify-between gap-4 rounded-sm border border-grid-dimmed bg-background-bright p-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
         <Header3 className="leading-6">{title}</Header3>
-        {accessory && <div className="flex-shrink-0">{accessory}</div>}
+        {accessory && <div className="shrink-0">{accessory}</div>}
       </div>
       <div
         className={cn(
diff --git a/apps/webapp/app/components/metrics/QueryWidget.tsx b/apps/webapp/app/components/metrics/QueryWidget.tsx
index cde546572..9f8218160 100644
--- a/apps/webapp/app/components/metrics/QueryWidget.tsx
+++ b/apps/webapp/app/components/metrics/QueryWidget.tsx
@@ -227,7 +227,7 @@ export function QueryWidget({
                     LeadingIcon={Maximize2}
                     leadingIconClassName="text-text-dimmed group-hover/button:text-text-bright"
                     onClick={() => setIsFullscreen(true)}
-                    className="!px-1"
+                    className="px-1!"
                   />
                 </span>
               }
@@ -321,7 +321,7 @@ export function QueryWidget({
                       icon={TrashIcon}
                       title="Delete chart"
                       leadingIconClassName="text-error"
-                      className="text-error hover:!bg-error/10"
+                      className="text-error hover:bg-error/10!"
                       onClick={() => {
                         onDelete();
                         setIsMenuOpen(false);
diff --git a/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx b/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
index 8f525a227..19f50436d 100644
--- a/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
+++ b/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
@@ -97,7 +97,7 @@ export function SaveToDashboardDialog({
       <Dialog open={isOpen} onOpenChange={onOpenChange}>
         <DialogContent className="sm:max-w-sm">
           <DialogHeader>Add to dashboard</DialogHeader>
-          <div className="!mt-1 space-y-4">
+          <div className="mt-1! space-y-4">
             <Paragraph variant="small" className="text-text-dimmed">
               You don't have any custom dashboards yet. Create one first from the sidebar menu.
             </Paragraph>
@@ -125,7 +125,7 @@ export function SaveToDashboardDialog({
           <input type="hidden" name="query" value={query} />
           <input type="hidden" name="config" value={JSON.stringify(config)} />
 
-          <div className="!mt-1 space-y-2">
+          <div className="mt-1! space-y-2">
             <Paragraph variant="small" className="text-text-dimmed">
               Select a dashboard to add this chart to:
             </Paragraph>
@@ -143,8 +143,8 @@ export function SaveToDashboardDialog({
                       isAtLimit
                         ? "cursor-not-allowed opacity-50"
                         : selectedDashboardId === dashboard.friendlyId
-                          ? "bg-charcoal-700 text-text-bright"
-                          : "text-text-dimmed hover:bg-charcoal-750 hover:text-text-bright"
+                          ? "bg-background-raised text-text-bright"
+                          : "text-text-dimmed hover:bg-background-hover hover:text-text-bright"
                     )}
                   >
                     {selectedDashboardId === dashboard.friendlyId ? (
diff --git a/apps/webapp/app/components/metrics/ScopeFilter.tsx b/apps/webapp/app/components/metrics/ScopeFilter.tsx
index 0cdaa4adb..846591d44 100644
--- a/apps/webapp/app/components/metrics/ScopeFilter.tsx
+++ b/apps/webapp/app/components/metrics/ScopeFilter.tsx
@@ -72,7 +72,7 @@ export function ScopeFilter({ shortcut, value, onValueChange }: ScopeFilterProps
           />
         </Ariakit.TooltipAnchor>
         {shortcut && (
-          <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright py-1.5 pl-2.5 pr-2 text-xs text-text-dimmed">
+          <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright py-1.5 pl-2.5 pr-2 text-xs text-text-dimmed">
             <div className="flex items-center gap-1.5">
               <span>Change scope</span>
               <ShortcutKey className="size-4 flex-none" shortcut={shortcut} variant="small" />
diff --git a/apps/webapp/app/components/metrics/TitleWidget.tsx b/apps/webapp/app/components/metrics/TitleWidget.tsx
index 0a5a7590e..23662db8e 100644
--- a/apps/webapp/app/components/metrics/TitleWidget.tsx
+++ b/apps/webapp/app/components/metrics/TitleWidget.tsx
@@ -49,7 +49,7 @@ export function TitleWidget({
           {title}
         </span>
         {hasMenu && (
-          <div className="flex-shrink-0 opacity-0 transition-opacity group-hover:opacity-100">
+          <div className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100">
             <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
               <PopoverVerticalEllipseTrigger isOpen={isMenuOpen} />
               <PopoverContent align="end" className="p-0">
@@ -70,7 +70,7 @@ export function TitleWidget({
                       icon={TrashIcon}
                       title="Delete"
                       leadingIconClassName="text-error"
-                      className="text-error hover:!bg-error/10"
+                      className="text-error hover:bg-error/10!"
                       onClick={() => {
                         onDelete();
                         setIsMenuOpen(false);
diff --git a/apps/webapp/app/components/navigation/AccountSideMenu.tsx b/apps/webapp/app/components/navigation/AccountSideMenu.tsx
index 10c7a8868..ba7938add 100644
--- a/apps/webapp/app/components/navigation/AccountSideMenu.tsx
+++ b/apps/webapp/app/components/navigation/AccountSideMenu.tsx
@@ -34,7 +34,7 @@ export function AccountSideMenu({ user }: { user: User }) {
           <span className="text-text-bright">Back to app</span>
         </LinkButton>
       </div>
-      <div className="mb-6 flex grow flex-col overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="mb-6 flex grow flex-col overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <SideMenuHeader title="Account" />
         <SideMenuItem
           name="Profile"
diff --git a/apps/webapp/app/components/navigation/DashboardDialogs.tsx b/apps/webapp/app/components/navigation/DashboardDialogs.tsx
index e676bab07..85fcf4c42 100644
--- a/apps/webapp/app/components/navigation/DashboardDialogs.tsx
+++ b/apps/webapp/app/components/navigation/DashboardDialogs.tsx
@@ -24,6 +24,7 @@ import { Label } from "../primitives/Label";
 import { Paragraph } from "../primitives/Paragraph";
 import { TextLink } from "../primitives/TextLink";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
+import { useThemeColor } from "~/hooks/useThemeColor";
 import { v3BillingPath } from "~/utils/pathBuilder";
 import { type SideMenuEnvironment, type SideMenuProject } from "./SideMenu";
 
@@ -90,7 +91,7 @@ export function CreateDashboardButton({
             <DialogTrigger asChild>
               <button
                 type="button"
-                className="flex h-full w-full items-center justify-center rounded text-text-dimmed focus-custom hover:bg-charcoal-600 hover:text-text-bright"
+                className="flex h-full w-full items-center justify-center rounded text-text-dimmed focus-custom hover:bg-surface-control hover:text-text-bright"
               >
                 <PlusIcon className="size-4" />
               </button>
@@ -161,8 +162,6 @@ export function CreateDashboardPageButton({
 
 const PROGRESS_RING_R = 27.5;
 const PROGRESS_RING_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RING_R;
-const PROGRESS_COLOR_SUCCESS = "#28BF5C"; // mint-500 / success
-const PROGRESS_COLOR_ERROR = "#E11D48"; // rose-600 / error
 
 function CreateDashboardUpgradeDialog({
   limits,
@@ -175,6 +174,11 @@ function CreateDashboardUpgradeDialog({
   isFreePlan: boolean;
   organization: { slug: string };
 }) {
+  // Resolved to concrete colors - framer-motion can't interpolate var() strings.
+  // Must be called before the early return below (rules of hooks).
+  const progressColorSuccess = useThemeColor("--color-success", "#28bf5c");
+  const progressColorError = useThemeColor("--color-error", "#e11d48");
+
   if (isFreePlan) {
     return (
       <DialogContent>
@@ -223,11 +227,11 @@ function CreateDashboardUpgradeDialog({
               strokeLinecap="round"
               initial={{
                 strokeDasharray: `0 ${PROGRESS_RING_CIRCUMFERENCE}`,
-                stroke: PROGRESS_COLOR_SUCCESS,
+                stroke: progressColorSuccess,
               }}
               animate={{
                 strokeDasharray: `${filled} ${PROGRESS_RING_CIRCUMFERENCE}`,
-                stroke: PROGRESS_COLOR_ERROR,
+                stroke: progressColorError,
               }}
               transition={{ duration: 1.2, ease: "easeInOut" }}
             />
diff --git a/apps/webapp/app/components/navigation/DashboardList.tsx b/apps/webapp/app/components/navigation/DashboardList.tsx
index 57ac8aeff..7f3b6e3ba 100644
--- a/apps/webapp/app/components/navigation/DashboardList.tsx
+++ b/apps/webapp/app/components/navigation/DashboardList.tsx
@@ -173,7 +173,7 @@ function DashboardChildMenuItem({
         ? "text-text-bright"
         : undefined;
 
-  const inactiveIconColor = isCollapsed ? "text-text-dimmed" : "text-charcoal-700";
+  const inactiveIconColor = isCollapsed ? "text-text-dimmed" : "text-tertiary";
 
   return (
     <SideMenuItem
diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index 862ea02de..7e2a3efdb 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -73,7 +73,7 @@ export function EnvironmentSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
+              "group flex h-8 items-center rounded pl-1.75 transition-colors hover:bg-background-hover",
               isCollapsed ? "justify-center pr-0.5" : "justify-between pr-1",
               className
             )}
@@ -107,12 +107,12 @@ export function EnvironmentSelector({
         side="right"
         sideOffset={8}
         hidden={!isCollapsed}
-        buttonClassName="!h-8"
+        buttonClassName="h-8!"
         asChild
         disableHoverableContent
       />
       <PopoverContent
-        className="min-w-[14rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="min-w-56 overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         side={isCollapsed ? "right" : "bottom"}
         sideOffset={isCollapsed ? 8 : 4}
         align="start"
@@ -257,7 +257,7 @@ function Branches({
         <PopoverTrigger className="w-full justify-between overflow-hidden focus-custom">
           <ButtonContent
             variant="small-menu-item"
-            className="hover:bg-charcoal-750"
+            className="hover:bg-background-hover"
             TrailingIcon={ChevronRightIcon}
             trailingIconClassName="text-text-dimmed"
             textAlignLeft
@@ -267,7 +267,7 @@ function Branches({
           </ButtonContent>
         </PopoverTrigger>
         <PopoverContent
-          className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-w-64 overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
           align="start"
           style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
           side="right"
@@ -339,7 +339,7 @@ function Branches({
               </div>
             )}
           </div>
-          <div className="border-t border-charcoal-700 p-1">
+          <div className="border-t border-grid-bright p-1">
             {parentEnvironment.type === "DEVELOPMENT" ? (
               <PopoverMenuItem
                 to={branchesDevPath(organization, project, environment)}
diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index 4264906d2..2159fa5fe 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -55,7 +55,7 @@ export function HelpAndFeedback({
           button={
             <PopoverTrigger
               className={cn(
-                "group flex h-8 items-center gap-1.5 rounded pl-[0.4375rem] pr-2 transition-colors hover:bg-charcoal-750 focus-custom",
+                "group flex h-8 items-center gap-1.5 rounded pl-1.75 pr-2 transition-colors hover:bg-background-hover focus-custom",
                 isCollapsed ? "w-full" : "w-full justify-between"
               )}
             >
@@ -89,12 +89,12 @@ export function HelpAndFeedback({
           side="right"
           sideOffset={8}
           hidden={!isCollapsed}
-          buttonClassName="!h-8 w-full"
+          buttonClassName="h-8! w-full"
           asChild
           disableHoverableContent
         />
         <PopoverContent
-          className="min-w-[14rem] divide-y divide-grid-bright overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-w-56 divide-y divide-grid-bright overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
           side={isCollapsed ? "right" : "top"}
           sideOffset={isCollapsed ? 8 : 4}
           align="start"
diff --git a/apps/webapp/app/components/navigation/NotificationCard.tsx b/apps/webapp/app/components/navigation/NotificationCard.tsx
index 8b03c27ff..e9ad1e07e 100644
--- a/apps/webapp/app/components/navigation/NotificationCard.tsx
+++ b/apps/webapp/app/components/navigation/NotificationCard.tsx
@@ -52,7 +52,7 @@ export function NotificationCard({
   const safeImage = sanitizeUrl(image);
 
   return (
-    <div className="group/card relative overflow-hidden rounded border border-charcoal-650 bg-charcoal-700/50 shadow-lg">
+    <div className="group/card relative overflow-hidden rounded border border-border-bright bg-background-raised/50 shadow-lg">
       {safeActionUrl && (
         <a
           href={safeActionUrl}
@@ -71,7 +71,7 @@ export function NotificationCard({
           onClick={handleDismiss}
           aria-label="Dismiss notification"
           title="Dismiss notification"
-          className="relative z-20 -mr-1 shrink-0 rounded p-0.5 text-text-dimmed opacity-0 transition group-hover/card:opacity-100 hover:bg-charcoal-700 hover:text-text-bright focus-visible:opacity-100"
+          className="relative z-20 -mr-1 shrink-0 rounded p-0.5 text-text-dimmed opacity-0 transition group-hover/card:opacity-100 hover:bg-background-raised hover:text-text-bright focus-visible:opacity-100"
         >
           <XMarkIcon className="size-3.5" />
         </button>
@@ -123,7 +123,7 @@ function getMarkdownComponents(onLinkClick?: () => void) {
     ),
     em: ({ children }: { children?: React.ReactNode }) => <em>{children}</em>,
     code: ({ children }: { children?: React.ReactNode }) => (
-      <code className="rounded bg-charcoal-700 px-1 py-0.5 text-[11px]">{children}</code>
+      <code className="rounded bg-background-raised px-1 py-0.5 text-[11px]">{children}</code>
     ),
   };
 }
diff --git a/apps/webapp/app/components/navigation/NotificationPanel.tsx b/apps/webapp/app/components/navigation/NotificationPanel.tsx
index c9dfbcc43..bb07b54da 100644
--- a/apps/webapp/app/components/navigation/NotificationPanel.tsx
+++ b/apps/webapp/app/components/navigation/NotificationPanel.tsx
@@ -128,7 +128,7 @@ export function NotificationPanel({
             button={
               <div className="relative">
                 <PopoverTrigger asChild>
-                  <Button variant="small-menu-item" className="h-8 w-[2.1875rem] justify-center">
+                  <Button variant="small-menu-item" className="h-8 w-8.75 justify-center">
                     <NotificationIcon className="size-5 text-success" />
                   </Button>
                 </PopoverTrigger>
@@ -143,7 +143,7 @@ export function NotificationPanel({
           card
         )}
       </div>
-      <PopoverContent side="right" sideOffset={8} align="end" className="w-56 !min-w-0 p-0">
+      <PopoverContent side="right" sideOffset={8} align="end" className="w-56 min-w-0! p-0">
         {card}
       </PopoverContent>
     </Popover>
diff --git a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
index ada3aac5e..dc59cc720 100644
--- a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
+++ b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
@@ -79,7 +79,7 @@ export function OrganizationSettingsSideMenu({
           <span className="text-text-bright">Back to app</span>
         </LinkButton>
       </div>
-      <div className="mb-6 flex grow flex-col gap-4 overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="mb-6 flex grow flex-col gap-4 overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="flex flex-col">
           <div className="mb-1">
             <SideMenuHeader title="Organization" />
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 395932f39..6ddb54135 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -283,7 +283,7 @@ export function SideMenu({
     <div
       className={cn(
         "relative h-full border-r border-grid-bright bg-background-bright transition-all duration-200",
-        isCollapsed ? "w-[2.75rem]" : "w-56"
+        isCollapsed ? "w-11" : "w-56"
       )}
     >
       <CollapseToggle isCollapsed={isCollapsed} onToggle={handleToggleCollapsed} />
@@ -333,7 +333,7 @@ export function SideMenu({
             "min-h-0 overflow-y-auto pt-2",
             isCollapsed
               ? "scrollbar-none"
-              : "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+              : "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
           )}
           ref={borderRef}
         >
@@ -762,7 +762,7 @@ function V3DeprecationPanel({
         >
           <SimpleTooltip
             button={
-              <PopoverTrigger className="flex !h-8 w-full items-center justify-center rounded border border-amber-500/30 bg-amber-500/15 transition-colors hover:border-amber-500/50 hover:bg-amber-500/25">
+              <PopoverTrigger className="flex h-8! w-full items-center justify-center rounded border border-amber-500/30 bg-amber-500/15 transition-colors hover:border-amber-500/50 hover:bg-amber-500/25">
                 <ExclamationTriangleIcon className="size-5 text-amber-400" />
               </PopoverTrigger>
             }
@@ -774,7 +774,7 @@ function V3DeprecationPanel({
           />
         </motion.div>
       </div>
-      <PopoverContent side="right" sideOffset={8} align="start" className="w-52 !min-w-0 p-0">
+      <PopoverContent side="right" sideOffset={8} align="start" className="w-52 min-w-0! p-0">
         <V3DeprecationContent />
       </PopoverContent>
     </Popover>
@@ -801,7 +801,7 @@ function V3DeprecationContent() {
         fullWidth
         TrailingIcon={ArrowTopRightOnSquareIcon}
         trailingIconClassName="text-amber-300"
-        className="border-amber-500/30 bg-amber-500/15 hover:!border-amber-500/50 hover:!bg-amber-500/25"
+        className="border-amber-500/30 bg-amber-500/15 hover:border-amber-500/50! hover:bg-amber-500/25!"
       >
         <span className="text-amber-300">View migration guide</span>
       </LinkButton>
@@ -844,7 +844,7 @@ function ProjectSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
+              "group flex h-8 items-center rounded pl-1.75 transition-colors hover:bg-background-hover",
               isCollapsed ? "justify-center pr-0.5" : "w-full justify-between pr-1"
             )}
           >
@@ -876,22 +876,22 @@ function ProjectSelector({
         side="right"
         sideOffset={8}
         hidden={!isCollapsed}
-        buttonClassName="!h-8"
+        buttonClassName="h-8!"
         asChild
         disableHoverableContent
       />
       <PopoverContent
-        className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="min-w-64 overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         side={isCollapsed ? "right" : "bottom"}
         sideOffset={isCollapsed ? 8 : 4}
         align="start"
         style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
       >
-        <div className="flex flex-col gap-2 bg-charcoal-750 p-2">
+        <div className="flex flex-col gap-2 bg-background-hover p-2">
           <div className="flex items-center gap-2.5">
             <Link
               to={organizationSettingsPath(organization)}
-              className="group relative box-content size-10 overflow-clip rounded-sm bg-charcoal-800"
+              className="group relative box-content size-10 overflow-clip rounded-sm bg-background-bright"
             >
               <Avatar avatar={organization.avatar} size={2.5} orgName={organization.title} />
               <div className="absolute inset-0 z-10 grid h-full w-full place-items-center bg-black/50 opacity-0 transition group-hover:opacity-100">
@@ -924,7 +924,7 @@ function ProjectSelector({
               to={organizationSettingsPath(organization)}
               fullWidth
               iconSpacing="gap-1.5"
-              className="group-hover/button:border-charcoal-500"
+              className="group-hover/button:border-border-brightest"
             >
               <SlidersIcon className="size-4 text-text-dimmed" />
               <span className="text-text-bright">Settings</span>
@@ -935,7 +935,7 @@ function ProjectSelector({
                 to={v3UsagePath(organization)}
                 fullWidth
                 iconSpacing="gap-1.5"
-                className="group-hover/button:border-charcoal-500"
+                className="group-hover/button:border-border-brightest"
               >
                 <UsageIcon className="size-4 text-text-dimmed" />
                 <span className="text-text-bright">Usage</span>
@@ -963,7 +963,7 @@ function ProjectSelector({
           })}
           <PopoverMenuItem to={newProjectPath(organization)} title="New project" icon={PlusIcon} />
         </div>
-        <div className="border-t border-charcoal-700 p-1">
+        <div className="border-t border-grid-bright p-1">
           {organizations.length > 1 ? (
             <SwitchOrganizations organizations={organizations} organization={organization} />
           ) : (
@@ -975,7 +975,7 @@ function ProjectSelector({
             />
           )}
         </div>
-        <div className="border-t border-charcoal-700 p-1">
+        <div className="border-t border-grid-bright p-1">
           <PopoverMenuItem
             to={accountPath()}
             title="Account"
@@ -983,7 +983,7 @@ function ProjectSelector({
             leadingIconClassName="text-text-dimmed"
           />
         </div>
-        <div className="border-t border-charcoal-700 p-1">
+        <div className="border-t border-grid-bright p-1">
           <PopoverMenuItem
             to={logoutPath()}
             title="Logout"
@@ -1041,7 +1041,7 @@ function SwitchOrganizations({
         <PopoverTrigger className="w-full justify-between overflow-hidden focus-custom">
           <ButtonContent
             variant="small-menu-item"
-            className="hover:bg-charcoal-750"
+            className="hover:bg-background-hover"
             LeadingIcon={ArrowLeftRightIcon}
             leadingIconClassName="text-text-dimmed"
             TrailingIcon={ChevronRightIcon}
@@ -1053,7 +1053,7 @@ function SwitchOrganizations({
           </ButtonContent>
         </PopoverTrigger>
         <PopoverContent
-          className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-w-64 overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
           align="start"
           style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
           side="right"
@@ -1074,7 +1074,7 @@ function SwitchOrganizations({
               />
             ))}
           </div>
-          <div className="border-t border-charcoal-700 p-1">
+          <div className="border-t border-grid-bright p-1">
             <PopoverMenuItem
               to={newOrganizationPath()}
               title="New organization"
@@ -1096,7 +1096,7 @@ function SelectorDivider() {
         y1="0.606339"
         x2="0.606339"
         y2="19.6362"
-        stroke="#3B3E45"
+        stroke="var(--color-border-bright)"
         strokeLinecap="round"
       />
     </svg>
@@ -1269,7 +1269,7 @@ function CollapseToggle({ isCollapsed, onToggle }: { isCollapsed: boolean; onTog
       <div
         className={cn(
           "pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 transition-colors duration-200",
-          isHovering ? "bg-charcoal-750" : "bg-background-bright"
+          isHovering ? "bg-background-hover" : "bg-background-bright"
         )}
       />
       <TooltipProvider disableHoverableContent>
@@ -1284,7 +1284,7 @@ function CollapseToggle({ isCollapsed, onToggle }: { isCollapsed: boolean; onTog
               className={cn(
                 "group flex h-12 w-6 items-center justify-center rounded-md text-text-dimmed transition-all duration-200 focus-custom",
                 isHovering
-                  ? "border border-grid-bright bg-background-bright shadow-md hover:bg-charcoal-750 hover:text-text-bright"
+                  ? "border border-grid-bright bg-background-bright shadow-md hover:bg-background-hover hover:text-text-bright"
                   : "border border-transparent bg-transparent"
               )}
             >
diff --git a/apps/webapp/app/components/navigation/SideMenuHeader.tsx b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
index 8d975cba4..80143e9e0 100644
--- a/apps/webapp/app/components/navigation/SideMenuHeader.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
@@ -54,10 +54,10 @@ export function SideMenuHeader({
       {children !== undefined ? (
         <Popover onOpenChange={(open) => setHeaderMenuOpen(open)} open={isHeaderMenuOpen}>
           <PopoverCustomTrigger className="p-1">
-            <EllipsisHorizontalIcon className="h-4 w-4 text-charcoal-500 transition group-hover:text-text-bright" />
+            <EllipsisHorizontalIcon className="h-4 w-4 text-text-faint transition group-hover:text-text-bright" />
           </PopoverCustomTrigger>
           <PopoverContent
-            className="min-w-max overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+            className="min-w-max overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
             align="start"
           >
             <div className="flex flex-col gap-1 p-1">{children}</div>
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index f2349fc1e..c47f949ab 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -56,11 +56,11 @@ export function SideMenuItem({
       target={target}
       data-action={dataAction}
       className={cn(
-        "group/menulink flex h-8 items-center gap-2 overflow-hidden rounded pl-[0.4375rem] pr-2",
+        "group/menulink flex h-8 items-center gap-2 overflow-hidden rounded pl-1.75 pr-2",
         isIndented ? "min-w-0 flex-1" : "w-full",
         isActive
           ? "bg-tertiary text-text-bright"
-          : "text-text-dimmed group-hover/menuitem:bg-charcoal-750 group-hover/menuitem:text-text-bright hover:bg-charcoal-750 hover:text-text-bright"
+          : "text-text-dimmed group-hover/menuitem:bg-background-hover group-hover/menuitem:text-text-bright hover:bg-background-hover hover:text-text-bright"
       )}
     >
       <Icon
@@ -122,7 +122,7 @@ export function SideMenuItem({
           content={name}
           side="right"
           sideOffset={8}
-          buttonClassName="!h-8 block w-full"
+          buttonClassName="h-8! block w-full"
           hidden={!isCollapsed}
           asChild
           disableHoverableContent
@@ -131,7 +131,9 @@ export function SideMenuItem({
           <div
             className={cn(
               "absolute bottom-1 right-1 top-1 flex aspect-square items-center justify-center rounded",
-              isActive ? "group-hover/menuitem:bg-tertiary" : "group-hover/menuitem:bg-charcoal-750"
+              isActive
+                ? "group-hover/menuitem:bg-tertiary"
+                : "group-hover/menuitem:bg-background-hover"
             )}
           >
             {action}
@@ -147,7 +149,7 @@ export function SideMenuItem({
       content={name}
       side="right"
       sideOffset={8}
-      buttonClassName="!h-8 block w-full"
+      buttonClassName="h-8! block w-full"
       hidden={!isCollapsed}
       asChild
       disableHoverableContent
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index 156471651..70b5e0995 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -40,7 +40,7 @@ export function SideMenuSection({
       <div className="relative w-full">
         {/* Header - fades out when sidebar is collapsed */}
         <motion.div
-          className="group/section flex cursor-pointer items-center justify-between overflow-hidden rounded-sm py-1 pl-1.5 pr-1 transition hover:bg-charcoal-750"
+          className="group/section flex cursor-pointer items-center justify-between overflow-hidden rounded-sm py-1 pl-1.5 pr-1 transition hover:bg-background-hover"
           initial={false}
           animate={{
             opacity: isSideMenuCollapsed ? 0 : 1,
@@ -63,7 +63,7 @@ export function SideMenuSection({
         </motion.div>
         {/* Divider - absolutely positioned, visible when sidebar is collapsed but section is expanded */}
         <motion.div
-          className="absolute left-2 right-2 top-1 h-px bg-charcoal-600"
+          className="absolute left-2 right-2 top-1 h-px bg-surface-control"
           initial={false}
           animate={{
             opacity: isSideMenuCollapsed && !isCollapsed ? 1 : 0,
diff --git a/apps/webapp/app/components/onboarding/TechnologyPicker.tsx b/apps/webapp/app/components/onboarding/TechnologyPicker.tsx
index 9c9f9a6b2..7236f9fa8 100644
--- a/apps/webapp/app/components/onboarding/TechnologyPicker.tsx
+++ b/apps/webapp/app/components/onboarding/TechnologyPicker.tsx
@@ -281,7 +281,7 @@ export function TechnologyPicker({
           }}
           virtualFocus
         >
-          <Ariakit.Select className="group flex h-8 w-full items-center rounded bg-charcoal-750 pl-2 pr-2.5 text-sm text-text-dimmed ring-charcoal-600 transition focus-custom hover:bg-charcoal-650 hover:ring-1">
+          <Ariakit.Select className="group flex h-8 w-full items-center rounded bg-background-hover pl-2 pr-2.5 text-sm text-text-dimmed ring-border-bright transition focus-custom hover:bg-secondary hover:ring-1">
             <div className="flex grow items-center">
               <CubeIcon className="mr-1.5 size-4 flex-none text-text-dimmed" />
               <span>Select your technologies…</span>
@@ -293,22 +293,22 @@ export function TechnologyPicker({
             gutter={5}
             unmountOnHide
             className={cn(
-              "z-50 flex flex-col overflow-clip rounded border border-charcoal-700 bg-background-bright shadow-md outline-none animate-in fade-in-40",
+              "z-50 flex flex-col overflow-clip rounded border border-grid-bright bg-background-bright shadow-md outline-hidden animate-in fade-in-40",
               "min-w-[max(180px,var(--popover-anchor-width))]",
               "max-w-[min(480px,var(--popover-available-width))]",
               "max-h-[min(400px,var(--popover-available-height))]"
             )}
           >
-            <div className="flex h-9 w-full flex-none items-center gap-2 border-b border-grid-dimmed bg-transparent px-3 text-xs text-text-dimmed outline-none">
+            <div className="flex h-9 w-full flex-none items-center gap-2 border-b border-grid-dimmed bg-transparent px-3 text-xs text-text-dimmed outline-hidden">
               <MagnifyingGlassIcon className="size-3.5 flex-none text-text-dimmed" />
               <Ariakit.Combobox
                 autoSelect
                 placeholder="Search technologies…"
-                className="flex-1 bg-transparent text-xs text-text-dimmed outline-none"
+                className="flex-1 bg-transparent text-xs text-text-dimmed outline-hidden"
               />
             </div>
 
-            <Ariakit.ComboboxList className="overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 focus-custom">
+            <Ariakit.ComboboxList className="overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control focus-custom">
               {filteredOptions.map((option) => (
                 <Ariakit.ComboboxItem
                   key={option}
@@ -332,9 +332,9 @@ export function TechnologyPicker({
               )}
             </Ariakit.ComboboxList>
 
-            <div className="sticky bottom-0 border-t border-charcoal-700 bg-background-bright px-1 py-1">
+            <div className="sticky bottom-0 border-t border-grid-bright bg-background-bright px-1 py-1">
               {showOtherInput ? (
-                <div className="flex h-8 w-full items-center rounded-sm bg-tertiary pl-0 pr-2 ring-1 ring-charcoal-650">
+                <div className="flex h-8 w-full items-center rounded-sm bg-tertiary pl-0 pr-2 ring-1 ring-border-bright">
                   <input
                     ref={otherInputRef}
                     type="text"
@@ -342,7 +342,7 @@ export function TechnologyPicker({
                     onChange={(e) => setOtherInputValue(e.target.value)}
                     onKeyDown={handleOtherKeyDown}
                     placeholder="Type and press Enter to add"
-                    className="flex-1 border-none bg-transparent pl-2 text-2sm text-text-bright shadow-none outline-none ring-0 placeholder:text-text-dimmed focus:border-none focus:outline-none focus:ring-0"
+                    className="flex-1 border-none bg-transparent pl-2 text-2sm text-text-bright shadow-none outline-hidden ring-0 placeholder:text-text-dimmed focus:border-none focus:outline-hidden focus:ring-0"
                     autoFocus
                   />
                   <ShortcutKey
diff --git a/apps/webapp/app/components/primitives/AnimatingArrow.tsx b/apps/webapp/app/components/primitives/AnimatingArrow.tsx
index 68dbf5c4d..7f9a28343 100644
--- a/apps/webapp/app/components/primitives/AnimatingArrow.tsx
+++ b/apps/webapp/app/components/primitives/AnimatingArrow.tsx
@@ -3,13 +3,13 @@ import { cn } from "~/utils/cn";
 
 const variants = {
   small: {
-    size: "size-[1rem]",
+    size: "size-4",
     arrowHeadRight: "group-hover:translate-x-[3px]",
     arrowLineRight: "h-[1.5px] w-[7px] translate-x-1 top-[calc(50%-0.5px)]",
     arrowHeadLeft: "group-hover:translate-x-[3px]",
     arrowLineLeft: "h-[1.5px] w-[7px] translate-x-1 top-[calc(50%-0.5px)]",
     arrowHeadTopRight:
-      "-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
+      "translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
   },
   medium: {
     size: "size-[1.1rem]",
@@ -18,7 +18,7 @@ const variants = {
     arrowHeadLeft: "group-hover:translate-x-[-3px]",
     arrowLineLeft: "h-[1.5px] w-[9px] translate-x-1 top-[calc(50%-1px)]",
     arrowHeadTopRight:
-      "-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
+      "translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
   },
   large: {
     size: "size-6",
@@ -27,7 +27,7 @@ const variants = {
     arrowHeadLeft: "group-hover:translate-x-1",
     arrowLineLeft: "h-[2.3px] w-[12px] translate-x-[6px] top-[calc(50%-1px)]",
     arrowHeadTopRight:
-      "-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
+      "translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
   },
   "extra-large": {
     size: "size-8",
@@ -36,7 +36,7 @@ const variants = {
     arrowHeadLeft: "group-hover:translate-x-1",
     arrowLineLeft: "h-[3px] w-[16px] translate-x-[8px] top-[calc(50%-1.5px)]",
     arrowHeadTopRight:
-      "-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
+      "translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
   },
 };
 
diff --git a/apps/webapp/app/components/primitives/AppliedFilter.tsx b/apps/webapp/app/components/primitives/AppliedFilter.tsx
index 2eab4b772..c8fbc4d3a 100644
--- a/apps/webapp/app/components/primitives/AppliedFilter.tsx
+++ b/apps/webapp/app/components/primitives/AppliedFilter.tsx
@@ -4,11 +4,11 @@ import { cn } from "~/utils/cn";
 
 const variants = {
   "secondary/small": {
-    box: "h-6 bg-secondary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-charcoal-600 group-hover:border-charcoal-550 text-text-bright border border-charcoal-600",
+    box: "h-6 bg-secondary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-surface-control group-hover:border-border-brighter text-text-bright border border-border-bright",
     clear: "size-6 text-text-bright hover:text-text-bright transition-colors",
   },
   "tertiary/small": {
-    box: "h-6 bg-tertiary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-charcoal-600",
+    box: "h-6 bg-tertiary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-surface-control",
     clear: "size-6 text-text-dimmed hover:text-text-bright transition-colors",
   },
   "minimal/medium": {
@@ -53,7 +53,7 @@ export function AppliedFilter({
       <div
         className={cn("flex items-start leading-4", label === undefined ? "gap-1.5" : "gap-0.5")}
       >
-        <div className="-mt-[0.5px] flex items-center gap-1.5">
+        <div className="mt-[-0.5px] flex items-center gap-1.5">
           {icon}
           {label && (
             <div className="text-text-bright">
diff --git a/apps/webapp/app/components/primitives/Avatar.tsx b/apps/webapp/app/components/primitives/Avatar.tsx
index 9bc95d55b..0d000a9a3 100644
--- a/apps/webapp/app/components/primitives/Avatar.tsx
+++ b/apps/webapp/app/components/primitives/Avatar.tsx
@@ -146,7 +146,7 @@ function AvatarLetters({
       <span
         className={cn(
           "relative grid place-items-center overflow-hidden rounded-[10%] font-semibold",
-          includePadding ? "size-[80%]" : "size-[100%]"
+          includePadding ? "size-[80%]" : "size-full"
         )}
         style={style}
       >
@@ -177,7 +177,7 @@ function AvatarIcon({
   const IconComponent = avatarIcons[avatar.name];
   return (
     <span className="grid aspect-square place-items-center" style={styleFromSize(size)}>
-      <IconComponent className={includePadding ? "size-[80%]" : "size-[100%]"} style={style} />
+      <IconComponent className={includePadding ? "size-[80%]" : "size-full"} style={style} />
     </span>
   );
 }
diff --git a/apps/webapp/app/components/primitives/Badge.tsx b/apps/webapp/app/components/primitives/Badge.tsx
index a92957e26..f21a544a4 100644
--- a/apps/webapp/app/components/primitives/Badge.tsx
+++ b/apps/webapp/app/components/primitives/Badge.tsx
@@ -3,11 +3,11 @@ import { cn } from "~/utils/cn";
 
 const variants = {
   default:
-    "grid place-items-center rounded-full px-2 h-5 tracking-wider text-xxs bg-charcoal-750 text-text-bright uppercase whitespace-nowrap",
+    "grid place-items-center rounded-full px-2 h-5 tracking-wider text-xxs bg-background-hover text-text-bright uppercase whitespace-nowrap",
   "extra-small":
-    "grid place-items-center border border-charcoal-650 rounded-sm px-1 h-4 text-xxs bg-background-bright text-blue-500 whitespace-nowrap",
+    "grid place-items-center border border-border-bright rounded-sm px-1 h-4 text-xxs bg-background-bright text-blue-500 whitespace-nowrap",
   small:
-    "grid place-items-center border border-charcoal-650 rounded-sm px-1 h-5 text-xs bg-background-bright text-blue-500 whitespace-nowrap",
+    "grid place-items-center border border-border-bright rounded-sm px-1 h-5 text-xs bg-background-bright text-blue-500 whitespace-nowrap",
   "outline-rounded":
     "grid place-items-center rounded-full px-1 h-4 tracking-wider text-xxs border border-blue-500 text-blue-500 uppercase whitespace-nowrap",
   rounded:
diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx
index 38ebafdf1..323f37438 100644
--- a/apps/webapp/app/components/primitives/Buttons.tsx
+++ b/apps/webapp/app/components/primitives/Buttons.tsx
@@ -60,7 +60,7 @@ const theme = {
   secondary: {
     textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-secondary group-hover/button:bg-charcoal-600 group-hover/button:border-charcoal-550 border border-charcoal-600 group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
+      "bg-secondary group-hover/button:bg-surface-control group-hover/button:border-border-brighter border border-border-bright group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
       "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
     icon: "text-text-bright",
@@ -68,7 +68,7 @@ const theme = {
   tertiary: {
     textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-tertiary group-hover/button:bg-charcoal-600 group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
+      "bg-tertiary group-hover/button:bg-surface-control group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
       "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
     icon: "text-text-bright",
@@ -86,13 +86,13 @@ const theme = {
       "text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-bright/80",
     button:
       "bg-error group-hover/button:bg-rose-500 disabled:opacity-50 group-disabled/button:bg-error group-disabled/button:pointer-events-none",
-    shortcut: "border-text-bright text-text-bright group-hover/button:border-bright/60",
+    shortcut: "border-text-bright text-text-bright group-hover/button:border-text-bright/60",
     icon: "text-text-bright",
   },
   docs: {
     textColor: "text-blue-200/70 transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-charcoal-700 border border-charcoal-600/50 shadow group-hover/button:bg-charcoal-650 group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
+      "bg-background-raised border border-border-bright/50 shadow-sm group-hover/button:bg-secondary group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
       "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
     icon: "text-blue-500",
@@ -140,7 +140,7 @@ const variant = {
   "menu-item": {
     textColor: "text-text-bright px-1",
     button:
-      "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover/button:bg-charcoal-750",
+      "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover/button:bg-background-hover",
     icon: "h-5",
     iconSpacing: "gap-x-0.5",
     shortcutVariant: undefined,
@@ -149,7 +149,7 @@ const variant = {
   "small-menu-item": {
     textColor: "text-text-bright",
     button:
-      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750",
+      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-background-hover",
     icon: "h-[1.125rem]",
     iconSpacing: "gap-x-1.5",
     shortcutVariant: undefined,
@@ -158,7 +158,7 @@ const variant = {
   "small-menu-sub-item": {
     textColor: "text-text-dimmed",
     button:
-      "h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750 focus-custom",
+      "h-[1.8rem] px-2 ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-background-hover focus-custom",
     icon: undefined,
     iconSpacing: undefined,
     shortcutVariant: undefined,
@@ -167,7 +167,7 @@ const variant = {
 };
 
 const allVariants = {
-  $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus/button:outline-none group-disabled/button:opacity-75 group-disabled/button:pointer-events-none focus-custom",
+  $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus/button:outline-hidden group-disabled/button:opacity-75 group-disabled/button:pointer-events-none focus-custom",
   variant: variant,
 };
 
@@ -343,7 +343,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
 
     const buttonElement = (
       <button
-        className={cn("group/button outline-none focus-custom", props.fullWidth ? "w-full" : "")}
+        className={cn("group/button outline-hidden focus-custom", props.fullWidth ? "w-full" : "")}
         type={type}
         disabled={isDisabled}
         onClick={onClick}
@@ -415,7 +415,7 @@ export const LinkButton = ({
     return (
       <div
         className={cn(
-          "group/button pointer-events-none cursor-default opacity-40 outline-none",
+          "group/button pointer-events-none cursor-default opacity-40 outline-hidden",
           props.fullWidth ? "w-full" : ""
         )}
       >
@@ -466,7 +466,7 @@ export const NavLinkButton = ({ to, className, target, ...props }: NavLinkPropsT
   return (
     <NavLink
       to={to}
-      className={cn("group/button outline-none block", props.fullWidth ? "w-full" : "")}
+      className={cn("group/button outline-hidden block", props.fullWidth ? "w-full" : "")}
       target={target}
     >
       {({ isActive, isPending }) => (
diff --git a/apps/webapp/app/components/primitives/Calendar.tsx b/apps/webapp/app/components/primitives/Calendar.tsx
index 5b72bd1c9..22ddc7d41 100644
--- a/apps/webapp/app/components/primitives/Calendar.tsx
+++ b/apps/webapp/app/components/primitives/Calendar.tsx
@@ -9,7 +9,7 @@ import { cn } from "~/utils/cn";
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 const navButtonClass =
-  "size-7 rounded-[3px] bg-secondary border border-charcoal-600 text-text-bright hover:bg-charcoal-600 hover:border-charcoal-550 transition inline-flex items-center justify-center";
+  "size-7 rounded-[3px] bg-secondary border border-border-bright text-text-bright hover:bg-surface-control hover:border-border-brighter transition inline-flex items-center justify-center";
 
 function CustomMonthCaption({ calendarMonth }: { calendarMonth: { date: Date } }) {
   const { goToMonth, nextMonth, previousMonth } = useDayPicker();
@@ -27,7 +27,7 @@ function CustomMonthCaption({ calendarMonth }: { calendarMonth: { date: Date } }
       </button>
       <div className="flex items-center gap-2">
         <select
-          className="rounded border border-charcoal-600 bg-charcoal-750 px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
+          className="rounded border border-border-bright bg-background-hover px-2 py-1 text-sm text-text-bright focus:border-border-brightest focus:outline-hidden"
           value={calendarMonth.date.getMonth()}
           onChange={(e) => {
             const newDate = new Date(calendarMonth.date);
@@ -42,7 +42,7 @@ function CustomMonthCaption({ calendarMonth }: { calendarMonth: { date: Date } }
           ))}
         </select>
         <select
-          className="rounded border border-charcoal-600 bg-charcoal-750 px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
+          className="rounded border border-border-bright bg-background-hover px-2 py-1 text-sm text-text-bright focus:border-border-brightest focus:outline-hidden"
           value={calendarMonth.date.getFullYear()}
           onChange={(e) => {
             const newDate = new Date(calendarMonth.date);
@@ -94,26 +94,26 @@ export function Calendar({
         weekdays: "flex",
         weekday: "text-text-dimmed rounded-md w-8 font-normal text-[0.8rem]",
         week: "flex w-full mt-2",
-        day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-charcoal-700 [&:has([aria-selected].day-outside)]:bg-charcoal-700/50 [&:has([aria-selected].day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
+        day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 has-aria-[selected]:bg-background-raised [&:has([aria-selected].day-outside)]:bg-background-raised/50 [&:has([aria-selected].day-range-end)]:rounded-r-md first:has-aria-[selected]:rounded-l-md last:has-aria-[selected]:rounded-r-md",
         day_button: cn(
           "size-8 p-0 font-normal text-text-bright rounded-md",
-          "hover:bg-charcoal-700 hover:text-text-bright",
-          "focus:bg-charcoal-700 focus:text-text-bright focus:outline-none",
+          "hover:bg-background-raised hover:text-text-bright",
+          "focus:bg-background-raised focus:text-text-bright focus:outline-hidden",
           "aria-selected:opacity-100"
         ),
         range_start: "day-range-start rounded-l-md",
         range_end: "day-range-end rounded-r-md",
         selected:
           "bg-indigo-600 text-text-bright hover:bg-indigo-600 hover:text-text-bright focus:bg-indigo-600 focus:text-text-bright rounded-md",
-        today: "bg-charcoal-700 text-text-bright rounded-md",
+        today: "bg-background-raised text-text-bright rounded-md",
         outside:
-          "day-outside text-text-dimmed opacity-50 aria-selected:bg-charcoal-700/50 aria-selected:text-text-dimmed aria-selected:opacity-30",
+          "day-outside text-text-dimmed opacity-50 aria-selected:bg-background-raised/50 aria-selected:text-text-dimmed aria-selected:opacity-30",
         disabled: "text-text-dimmed opacity-50",
-        range_middle: "aria-selected:bg-charcoal-700 aria-selected:text-text-bright",
+        range_middle: "aria-selected:bg-background-raised aria-selected:text-text-bright",
         hidden: "invisible",
         dropdowns: "flex gap-2 items-center justify-center",
         dropdown:
-          "bg-charcoal-750 border border-charcoal-600 rounded px-2 py-1 text-sm text-text-bright focus:outline-none focus:border-charcoal-500",
+          "bg-background-hover border border-border-bright rounded px-2 py-1 text-sm text-text-bright focus:outline-hidden focus:border-border-brightest",
         ...classNames,
       }}
       components={{
diff --git a/apps/webapp/app/components/primitives/Callout.tsx b/apps/webapp/app/components/primitives/Callout.tsx
index d3b7a0892..6c772fb6e 100644
--- a/apps/webapp/app/components/primitives/Callout.tsx
+++ b/apps/webapp/app/components/primitives/Callout.tsx
@@ -18,52 +18,52 @@ import { Spinner } from "./Spinner";
 
 export const variantClasses = {
   info: {
-    className: "border-charcoal-700 bg-charcoal-800",
+    className: "border-grid-bright bg-background-bright",
     icon: <InformationCircleIcon className="h-5 w-5 shrink-0 text-text-dimmed" />,
     textColor: "text-text-bright",
-    linkClassName: "transition hover:bg-charcoal-750",
+    linkClassName: "transition hover:bg-background-hover",
   },
   warning: {
     className: "border-warning/20 bg-warning/10",
     icon: <ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-warning" />,
-    textColor: "text-yellow-200",
+    textColor: "text-callout-warning-text",
     linkClassName: "transition hover:bg-warning/20",
   },
   error: {
     className: "border-error/20 bg-error/10",
     icon: <ExclamationCircleIcon className="h-5 w-5 shrink-0 text-error" />,
-    textColor: "text-rose-200",
+    textColor: "text-callout-error-text",
     linkClassName: "transition hover:bg-error/20",
   },
   idea: {
     className: "border-success/20 bg-success/10",
     icon: <LightBulbIcon className="h-5 w-5 shrink-0 text-success" />,
-    textColor: "text-green-200",
+    textColor: "text-callout-success-text",
     linkClassName: "transition hover:bg-success/20",
   },
   success: {
     className: "border-success/20 bg-success/10",
     icon: <CheckCircleIcon className="h-5 w-5 shrink-0 text-success" />,
-    textColor: "text-green-200",
+    textColor: "text-callout-success-text",
     linkClassName: "transition hover:bg-success/20",
   },
   docs: {
-    className: "border-blue-400/20 bg-blue-400/10",
-    icon: <BookOpenIcon className="mt-0.5 h-5 w-5 shrink-0 text-blue-400" />,
-    textColor: "text-blue-200",
-    linkClassName: "transition hover:bg-blue-400/20",
+    className: "border-callout-docs/20 bg-callout-docs/10",
+    icon: <BookOpenIcon className="mt-0.5 h-5 w-5 shrink-0 text-callout-docs" />,
+    textColor: "text-callout-docs-text",
+    linkClassName: "transition hover:bg-callout-docs/20",
   },
   pending: {
-    className: "border-blue-400/20 bg-blue-800/30",
+    className: "border-callout-pending/20 bg-callout-pending-bg/30",
     icon: <Spinner className="h-5 w-5 shrink-0 " />,
-    textColor: "text-blue-300",
-    linkClassName: "transition hover:bg-blue-400/20",
+    textColor: "text-callout-pending-text",
+    linkClassName: "transition hover:bg-callout-pending/20",
   },
   pricing: {
-    className: "border-indigo-400/20 bg-indigo-800/30",
-    icon: <CreditCardIcon className="h-5 w-5 shrink-0 text-indigo-400" />,
-    textColor: "text-indigo-300",
-    linkClassName: "transition hover:bg-indigo-400/20",
+    className: "border-callout-pricing/20 bg-callout-pricing-bg/30",
+    icon: <CreditCardIcon className="h-5 w-5 shrink-0 text-callout-pricing" />,
+    textColor: "text-callout-pricing-text",
+    linkClassName: "transition hover:bg-callout-pricing/20",
   },
 } as const;
 
@@ -93,7 +93,7 @@ export function Callout({
           href={to}
           target="_blank"
           className={cn(
-            `flex w-full items-start justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
+            `flex w-full items-start justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-xs`,
             variantDefinition.className,
             variantDefinition.linkClassName,
             className
@@ -118,7 +118,7 @@ export function Callout({
         <Link
           to={to}
           className={cn(
-            `flex w-full items-start justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
+            `flex w-full items-start justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-xs`,
             variantDefinition.className,
             variantDefinition.linkClassName,
             className
@@ -146,7 +146,7 @@ export function Callout({
   return (
     <div
       className={cn(
-        "flex w-full items-start gap-2 rounded-md border pl-2 pr-2 shadow-md backdrop-blur-sm",
+        "flex w-full items-start gap-2 rounded-md border pl-2 pr-2 shadow-md backdrop-blur-xs",
         cta ? "py-2" : "py-2.5",
         variantDefinition.className,
         className
diff --git a/apps/webapp/app/components/primitives/Checkbox.tsx b/apps/webapp/app/components/primitives/Checkbox.tsx
index 51486062f..75850b304 100644
--- a/apps/webapp/app/components/primitives/Checkbox.tsx
+++ b/apps/webapp/app/components/primitives/Checkbox.tsx
@@ -23,28 +23,28 @@ const variants = {
   },
   "button/small": {
     button:
-      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
+      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-border-bright hover:bg-background-dimmed hover:border-border-brightest transition",
     label: "text-sm text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-0",
-    isChecked: "bg-charcoal-850 border-charcoal-750 hover:!bg-charcoal-850",
+    isChecked: "bg-background-dimmed border-grid-dimmed hover:bg-background-dimmed!",
     isDisabled: "opacity-70 hover:bg-transparent",
   },
   button: {
     button:
-      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
+      "w-fit py-2 pl-3 pr-4 rounded border border-border-bright hover:bg-background-dimmed hover:border-border-brightest transition",
     label: "text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
-    isChecked: "bg-charcoal-850 border-charcoal-750 hover:!bg-charcoal-850",
+    isChecked: "bg-background-dimmed border-grid-dimmed hover:bg-background-dimmed!",
     isDisabled: "opacity-70 hover:bg-transparent",
   },
   description: {
-    button: "w-full py-2 pl-3 pr-4 checked:hover:bg-charcoal-850 transition",
+    button: "w-full py-2 pl-3 pr-4 checked:hover:bg-background-dimmed transition",
     label: "text-text-bright font-semibold",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
-    isChecked: "bg-charcoal-850",
+    isChecked: "bg-background-dimmed",
     isDisabled: "opacity-70",
   },
 };
@@ -139,7 +139,7 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
           className={cn(
             inputPositionClasses,
             props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
-            "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
+            "read-only:border-border-bright disabled:border-border-bright rounded-sm border border-border-bright bg-transparent transition checked:bg-indigo-500! read-only:bg-background-raised! group-hover:bg-background-deep checked:group-hover:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-hidden  focus-visible:ring-indigo-500 disabled:bg-background-raised!"
           )}
           id={id}
           ref={ref}
@@ -189,7 +189,7 @@ export const Checkbox = forwardRef<HTMLInputElement, SimpleCheckboxProps>(
             : props.readOnly
               ? "cursor-default"
               : "cursor-pointer",
-          "read-only:border-charcoal-650 disabled:border-charcoal-650 disabled:opacity-50 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
+          "read-only:border-border-bright disabled:border-border-bright disabled:opacity-50 rounded-sm border border-border-bright bg-transparent transition checked:bg-indigo-500! read-only:bg-background-raised! group-hover:bg-background-deep checked:group-hover:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-hidden focus-visible:ring-indigo-500 disabled:bg-background-raised!"
         )}
         {...props}
         ref={ref}
diff --git a/apps/webapp/app/components/primitives/CheckboxIndicator.tsx b/apps/webapp/app/components/primitives/CheckboxIndicator.tsx
index 0fe0f83b9..1d4c59e25 100644
--- a/apps/webapp/app/components/primitives/CheckboxIndicator.tsx
+++ b/apps/webapp/app/components/primitives/CheckboxIndicator.tsx
@@ -5,7 +5,7 @@ export function CheckboxIndicator({ checked }: { checked: boolean }) {
     <div
       className={cn(
         "flex size-4 flex-none items-center justify-center rounded border",
-        checked ? "border-indigo-500 bg-indigo-600" : "border-charcoal-600 bg-charcoal-700"
+        checked ? "border-indigo-500 bg-indigo-600" : "border-border-bright bg-background-raised"
       )}
     >
       {checked && (
diff --git a/apps/webapp/app/components/primitives/ClientTabs.tsx b/apps/webapp/app/components/primitives/ClientTabs.tsx
index c992c25e7..533a09c84 100644
--- a/apps/webapp/app/components/primitives/ClientTabs.tsx
+++ b/apps/webapp/app/components/primitives/ClientTabs.tsx
@@ -70,7 +70,7 @@ const ClientTabsList = React.forwardRef<
   const variantClassName = (() => {
     switch (variant) {
       case "segmented":
-        return "relative flex h-10 w-full items-center rounded bg-charcoal-700/50 p-1";
+        return "relative flex h-10 w-full items-center rounded bg-background-raised/50 p-1";
       case "underline":
         return "flex gap-x-6 border-b border-grid-bright";
       default:
@@ -122,10 +122,10 @@ const ClientTabsTrigger = React.forwardRef<
             <motion.div
               layoutId={layoutId}
               transition={{ duration: 0.4, type: "spring" }}
-              className="absolute inset-0 rounded-[2px] border border-charcoal-500/50 bg-charcoal-600"
+              className="absolute inset-0 rounded-[2px] border border-border-brightest/50 bg-surface-control"
             />
           ) : (
-            <div className="absolute inset-0 rounded-[2px] border border-charcoal-500/50 bg-charcoal-600" />
+            <div className="absolute inset-0 rounded-[2px] border border-border-brightest/50 bg-surface-control" />
           )
         ) : null}
       </TabsPrimitive.Trigger>
@@ -159,12 +159,12 @@ const ClientTabsTrigger = React.forwardRef<
               className="mt-1 h-0.5 w-full bg-indigo-500"
             />
           ) : (
-            <div className="mt-1 h-0.5 w-full bg-charcoal-500 opacity-0 transition duration-200 group-hover:opacity-100" />
+            <div className="mt-1 h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100" />
           )
         ) : isActive ? (
           <div className="mt-1 h-0.5 w-full bg-indigo-500" />
         ) : (
-          <div className="mt-1 h-0.5 w-full bg-charcoal-500 opacity-0 transition duration-200 group-hover:opacity-100" />
+          <div className="mt-1 h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100" />
         )}
       </TabsPrimitive.Trigger>
     );
@@ -175,7 +175,7 @@ const ClientTabsTrigger = React.forwardRef<
       ref={ref}
       tabIndex={0}
       className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap border-r border-charcoal-700 px-2 text-sm transition-all first:pl-0 last:border-none focus-custom data-[state=active]:text-indigo-500 data-[state=inactive]:text-text-dimmed data-[state=inactive]:hover:text-text-bright disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex items-center justify-center whitespace-nowrap border-r border-grid-bright px-2 text-sm transition-all first:pl-0 last:border-none focus-custom data-[state=active]:text-indigo-500 data-[state=inactive]:text-text-dimmed data-[state=inactive]:hover:text-text-bright disabled:pointer-events-none disabled:opacity-50",
         className
       )}
       {...props}
@@ -193,7 +193,7 @@ const ClientTabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     tabIndex={-1}
-    className={cn("mt-1 outline-none", className, "data-[state=inactive]:hidden")}
+    className={cn("mt-1 outline-hidden", className, "data-[state=inactive]:hidden")}
     {...props}
   />
 ));
diff --git a/apps/webapp/app/components/primitives/ClipboardField.tsx b/apps/webapp/app/components/primitives/ClipboardField.tsx
index 3d4028d92..0304e5bca 100644
--- a/apps/webapp/app/components/primitives/ClipboardField.tsx
+++ b/apps/webapp/app/components/primitives/ClipboardField.tsx
@@ -5,7 +5,7 @@ import { CopyButton } from "./CopyButton";
 const variants = {
   "primary/small": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded border bg-charcoal-750 text-xs transition hover:bg-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border bg-background-hover text-xs transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
     buttonVariant: "primary" as const,
@@ -14,26 +14,26 @@ const variants = {
   },
   "secondary/small": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded border bg-charcoal-750 text-xs transition hover:bg-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border bg-background-hover text-xs transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
     buttonVariant: "tertiary" as const,
     size: "small" as const,
-    button: "rounded-l-none border-l border-charcoal-750",
+    button: "rounded-l-none border-l border-grid-dimmed",
   },
   "tertiary/small": {
     container:
-      "group/clipboard flex items-center text-text-dimmed font-mono rounded bg-transparent border border-transparent text-xs transition duration-150 hover:border-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "group/clipboard flex items-center text-text-dimmed font-mono rounded bg-transparent border border-transparent text-xs transition duration-150 hover:border-grid-bright focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
     buttonVariant: "minimal" as const,
     size: "small" as const,
     button:
-      "rounded-l-none border-l border-transparent transition group-hover/clipboard:border-charcoal-700",
+      "rounded-l-none border-l border-transparent transition group-hover/clipboard:border-grid-bright",
   },
   "primary/medium": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded border bg-charcoal-750 text-sm transition hover:bg-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border bg-background-hover text-sm transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "primary" as const,
@@ -42,21 +42,21 @@ const variants = {
   },
   "secondary/medium": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded bg-charcoal-750 text-sm transition hover:bg-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded bg-background-hover text-sm transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "tertiary" as const,
     size: "medium" as const,
-    button: "rounded-l-none border-l border-charcoal-750",
+    button: "rounded-l-none border-l border-grid-dimmed",
   },
   "tertiary/medium": {
     container:
-      "group flex items-center text-text-dimmed font-mono rounded bg-transparent border border-transparent text-sm transition hover:border-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "group flex items-center text-text-dimmed font-mono rounded bg-transparent border border-transparent text-sm transition hover:border-grid-bright focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "minimal" as const,
     size: "medium" as const,
-    button: "rounded-l-none border-l border-transparent transition group-hover:border-charcoal-700",
+    button: "rounded-l-none border-l border-transparent transition group-hover:border-grid-bright",
   },
 };
 
diff --git a/apps/webapp/app/components/primitives/CopyButton.tsx b/apps/webapp/app/components/primitives/CopyButton.tsx
index 2a93cb2c7..91d47c296 100644
--- a/apps/webapp/app/components/primitives/CopyButton.tsx
+++ b/apps/webapp/app/components/primitives/CopyButton.tsx
@@ -50,10 +50,10 @@ export function CopyButton({
         onClick={copy}
         className={cn(
           buttonSize,
-          "flex items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+          "flex items-center justify-center rounded border border-border-bright bg-background-hover",
           copied
             ? "text-green-500"
-            : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright",
+            : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright",
           buttonClassName
         )}
       >
diff --git a/apps/webapp/app/components/primitives/CopyableText.tsx b/apps/webapp/app/components/primitives/CopyableText.tsx
index 9be81d4d6..f8e19402a 100644
--- a/apps/webapp/app/components/primitives/CopyableText.tsx
+++ b/apps/webapp/app/components/primitives/CopyableText.tsx
@@ -42,11 +42,11 @@ export function CopyableText({
             button={
               <span
                 className={cn(
-                  "ml-1 flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+                  "ml-1 flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
                   asChild && "p-1",
                   copied
                     ? "text-green-500"
-                    : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+                    : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
                 )}
               >
                 {copied ? (
diff --git a/apps/webapp/app/components/primitives/DateField.tsx b/apps/webapp/app/components/primitives/DateField.tsx
index a30ce91b6..56cf50864 100644
--- a/apps/webapp/app/components/primitives/DateField.tsx
+++ b/apps/webapp/app/components/primitives/DateField.tsx
@@ -120,7 +120,7 @@ export function DateField({
           {...fieldProps}
           ref={ref}
           className={cn(
-            "flex rounded-sm border bg-charcoal-700 p-0.5 transition focus-within:border-charcoal-600 hover:border-charcoal-600",
+            "flex rounded-sm border bg-background-raised p-0.5 transition focus-within:border-border-bright hover:border-border-bright",
             fieldClassName
           )}
         >
@@ -227,15 +227,15 @@ function DateSegment({ segment, state, variant }: DateSegmentProps) {
         minWidth: minWidthForSegment(segment),
       }}
       className={cn(
-        "group box-content text-center tabular-nums outline-none focus:bg-charcoal-600 focus:text-text-bright",
+        "group box-content text-center tabular-nums outline-hidden focus:bg-surface-control focus:text-text-bright",
         sizeVariant.fieldStyles,
-        !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
+        !segment.isEditable ? "text-text-faint" : "text-text-bright"
       )}
     >
       {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}
       <span
         aria-hidden="true"
-        className="flex h-full items-center justify-center text-center text-charcoal-500 group-focus:text-text-bright"
+        className="flex h-full items-center justify-center text-center text-text-faint group-focus:text-text-bright"
         style={{
           visibility: segment.isPlaceholder ? undefined : "hidden",
           height: segment.isPlaceholder ? undefined : 0,
@@ -275,11 +275,11 @@ function DateSegmentGuide({ segment }: { segment: DateSegment }) {
       style={{
         minWidth: minWidthForSegment(segment),
       }}
-      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums text-rose-500 outline-none ${
-        !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
+      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums text-rose-500 outline-hidden ${
+        !segment.isEditable ? "text-text-faint" : "text-text-bright"
       }`}
     >
-      <span className="block text-center italic text-charcoal-500">
+      <span className="block text-center italic text-text-faint">
         {segment.type !== "literal" ? segment.placeholder : segment.text}
       </span>
     </div>
diff --git a/apps/webapp/app/components/primitives/DateTimePicker.tsx b/apps/webapp/app/components/primitives/DateTimePicker.tsx
index 20e62caf0..ec2e3375d 100644
--- a/apps/webapp/app/components/primitives/DateTimePicker.tsx
+++ b/apps/webapp/app/components/primitives/DateTimePicker.tsx
@@ -77,14 +77,14 @@ export function DateTimePicker({
   return (
     <div className={cn("flex items-center gap-2", className)}>
       {showInlineLabel && (
-        <span className="w-6 shrink-0 text-right text-xxs text-charcoal-500">{label}</span>
+        <span className="w-6 shrink-0 text-right text-xxs text-text-faint">{label}</span>
       )}
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <button
             type="button"
             className={cn(
-              "flex h-[1.8rem] w-full items-center justify-between gap-2 whitespace-nowrap rounded border border-charcoal-650 bg-charcoal-750 px-2 text-xs tabular-nums transition hover:border-charcoal-600",
+              "flex h-[1.8rem] w-full items-center justify-between gap-2 whitespace-nowrap rounded border border-border-bright bg-background-hover px-2 text-xs tabular-nums transition hover:border-border-bright",
               value ? "text-text-bright" : "text-text-dimmed"
             )}
           >
@@ -107,9 +107,9 @@ export function DateTimePicker({
         value={value ? timeValue : ""}
         onChange={handleTimeChange}
         className={cn(
-          "h-[1.8rem] rounded border border-charcoal-650 bg-charcoal-750 px-2 text-xs tabular-nums transition hover:border-charcoal-600",
+          "h-[1.8rem] rounded border border-border-bright bg-background-hover px-2 text-xs tabular-nums transition hover:border-border-bright",
           value ? "text-text-bright" : "text-text-dimmed",
-          "focus:border-charcoal-500 focus:outline-none",
+          "focus:border-border-brightest focus:outline-hidden",
           "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
         )}
         aria-label={`${label} time`}
diff --git a/apps/webapp/app/components/primitives/DetailCell.tsx b/apps/webapp/app/components/primitives/DetailCell.tsx
index 59b9bb8fa..90b1410a4 100644
--- a/apps/webapp/app/components/primitives/DetailCell.tsx
+++ b/apps/webapp/app/components/primitives/DetailCell.tsx
@@ -55,7 +55,7 @@ export function DetailCell({
     <div className={cn("group flex h-11 w-full items-center gap-3 rounded-md p-1 pr-3", className)}>
       <IconInBox
         icon={leadingIcon}
-        className={cn("flex-none transition group-hover:border-charcoal-750", leadingIconClassName)}
+        className={cn("flex-none transition group-hover:border-grid-dimmed", leadingIconClassName)}
         boxClassName={boxClassName}
       />
       <div className="flex flex-1 flex-col">
@@ -78,7 +78,7 @@ export function DetailCell({
         <Icon
           icon={trailingIcon}
           className={cn(
-            "h-6 w-6 flex-none transition group-hover:border-charcoal-750",
+            "h-6 w-6 flex-none transition group-hover:border-grid-dimmed",
             trailingIconClassName
           )}
         />
diff --git a/apps/webapp/app/components/primitives/Dialog.tsx b/apps/webapp/app/components/primitives/Dialog.tsx
index bf485bbf1..3a7666eb8 100644
--- a/apps/webapp/app/components/primitives/Dialog.tsx
+++ b/apps/webapp/app/components/primitives/Dialog.tsx
@@ -26,7 +26,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background-dimmed/90 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-background-dimmed/90 backdrop-blur-xs transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}
@@ -49,7 +49,7 @@ const DialogContent = React.forwardRef<
         "fixed z-50 grid gap-4 border bg-background-dimmed shadow-lg animate-in data-[state=open]:fade-in-90",
         fullscreen
           ? "inset-6 rounded-lg pt-2.5 px-4 pb-4"
-          : "w-full rounded-b-lg px-4 pb-4 pt-2.5 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+          : "w-full rounded-b-lg px-4 pb-4 pt-2.5 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:data-[state=open]:slide-in-from-bottom-0",
         className
       )}
       {...props}
@@ -57,7 +57,7 @@ const DialogContent = React.forwardRef<
       <hr className="absolute left-0 top-11 w-full" />
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground group absolute right-2 top-[0.5625rem] flex items-center gap-1 rounded-sm p-1 py-1 pl-0 pr-1 opacity-70 transition focus-custom hover:bg-charcoal-750 hover:opacity-100 focus-visible:focus-custom disabled:pointer-events-none">
+        <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground group absolute right-2 top-2.25 flex items-center gap-1 rounded-sm p-1 py-1 pl-0 pr-1 opacity-70 transition focus-custom hover:bg-background-hover hover:opacity-100 focus-visible:focus-custom disabled:pointer-events-none">
           <ShortcutKey
             shortcut={{
               key: "esc",
diff --git a/apps/webapp/app/components/primitives/Icon.tsx b/apps/webapp/app/components/primitives/Icon.tsx
index ecb3cf7bf..4b8197f93 100644
--- a/apps/webapp/app/components/primitives/Icon.tsx
+++ b/apps/webapp/app/components/primitives/Icon.tsx
@@ -40,7 +40,7 @@ export function IconInBox({ boxClassName, ...props }: IconProps & { boxClassName
   return (
     <div
       className={cn(
-        "grid h-9 w-9 place-content-center rounded-sm border border-charcoal-750 bg-charcoal-850",
+        "grid h-9 w-9 place-content-center rounded-sm border border-grid-dimmed bg-background-dimmed",
         boxClassName
       )}
     >
diff --git a/apps/webapp/app/components/primitives/Input.tsx b/apps/webapp/app/components/primitives/Input.tsx
index 15a7592c3..4f20c0c11 100644
--- a/apps/webapp/app/components/primitives/Input.tsx
+++ b/apps/webapp/app/components/primitives/Input.tsx
@@ -4,60 +4,60 @@ import { cn } from "~/utils/cn";
 import { Icon, type RenderIcon } from "./Icon";
 
 const containerBase =
-  "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-charcoal-650 has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-1 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";
+  "has-focus-visible:outline-hidden has-focus-visible:ring-1 has-focus-visible:ring-border-bright has-focus-visible:ring-offset-0 has-[:focus]:border-ring has-focus:outline-hidden has-focus:ring-1 has-[:focus]:ring-ring has-disabled:cursor-not-allowed has-disabled:opacity-50 ring-offset-background transition cursor-text";
 
 const inputBase =
-  "h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:m-0 [&]:[-moz-appearance:textfield]";
+  "h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-0 disabled:cursor-not-allowed outline-hidden ring-0 border-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:m-0 [&]:[-moz-appearance:textfield]";
 
 const variants = {
   large: {
     container:
-      "px-1 w-full h-10 rounded-[3px] border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
+      "px-1 w-full h-10 rounded-[3px] border border-background-bright bg-background-hover hover:border-border-bright hover:bg-secondary",
     input: "px-2 text-sm",
     iconSize: "size-4 ml-1",
     accessory: "pr-1",
   },
   medium: {
     container:
-      "px-1 h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
+      "px-1 h-8 w-full rounded border border-background-bright bg-background-hover hover:border-border-bright hover:bg-secondary",
     input: "px-1.5 rounded text-sm",
     iconSize: "size-4 ml-0.5",
     accessory: "pr-1",
   },
   small: {
     container:
-      "px-1 h-6 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
+      "px-1 h-6 w-full rounded border border-background-bright bg-background-hover hover:border-border-bright hover:bg-secondary",
     input: "px-1 rounded text-xs",
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
   },
   tertiary: {
-    container: "px-1 h-6 w-full rounded hover:bg-charcoal-750",
+    container: "px-1 h-6 w-full rounded hover:bg-background-hover",
     input: "px-1 rounded text-xs",
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
   },
   "secondary-small": {
     container:
-      "px-1 h-6 w-full rounded border border-charcoal-600 hover:border-charcoal-550 bg-grid-dimmed hover:bg-charcoal-650",
+      "px-1 h-6 w-full rounded border border-border-bright hover:border-border-brighter bg-grid-dimmed hover:bg-secondary",
     input: "px-1 rounded text-xs",
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
   },
   "outline/large": {
-    container: "px-1 h-10 w-full rounded border border-grid-bright hover:border-charcoal-550",
+    container: "px-1 h-10 w-full rounded border border-grid-bright hover:border-border-brighter",
     input: "px-2 rounded text-sm",
     iconSize: "size-4 ml-1",
     accessory: "pr-1",
   },
   "outline/medium": {
-    container: "px-1 h-8 w-full rounded border border-grid-bright hover:border-charcoal-550",
+    container: "px-1 h-8 w-full rounded border border-grid-bright hover:border-border-brighter",
     input: "px-1 rounded text-sm",
     iconSize: "size-4 ml-0.5",
     accessory: "pr-1",
   },
   "outline/small": {
-    container: "px-1 h-6 w-full rounded border border-grid-bright hover:border-charcoal-550",
+    container: "px-1 h-6 w-full rounded border border-grid-bright hover:border-border-brighter",
     input: "px-1 rounded text-xs",
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
diff --git a/apps/webapp/app/components/primitives/InputNumberStepper.tsx b/apps/webapp/app/components/primitives/InputNumberStepper.tsx
index b434bb1d3..6869b4424 100644
--- a/apps/webapp/app/components/primitives/InputNumberStepper.tsx
+++ b/apps/webapp/app/components/primitives/InputNumberStepper.tsx
@@ -119,7 +119,7 @@ export function InputNumberStepper({
       input: "text-base px-3.5",
       button: "size-8",
       icon: "size-5",
-      gap: "gap-[0.3125rem] pr-[0.3125rem]",
+      gap: "gap-1.25 pr-1.25",
     },
   } as const;
 
@@ -128,9 +128,9 @@ export function InputNumberStepper({
   return (
     <div
       className={cn(
-        "flex items-center rounded border border-charcoal-600 bg-tertiary transition hover:border-charcoal-550/80 hover:bg-charcoal-600/80",
+        "flex items-center rounded border border-border-bright bg-tertiary transition hover:border-border-brighter/80 hover:bg-surface-control/80",
         size.container,
-        "has-[:focus-visible]:outline has-[:focus-visible]:outline-1 has-[:focus-visible]:outline-offset-0 has-[:focus-visible]:outline-text-link",
+        "has-focus-visible:outline-solid has-focus-visible:outline-1 has-focus-visible:outline-offset-0 has-focus-visible:outline-text-link",
         disabled && "cursor-not-allowed opacity-50",
         className
       )}
@@ -172,10 +172,10 @@ export function InputNumberStepper({
         disabled={disabled}
         readOnly={readOnly}
         className={cn(
-          "placeholder:text-muted-foreground h-full grow border-0 bg-transparent text-left text-text-bright outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 disabled:cursor-not-allowed",
+          "placeholder:text-muted-foreground h-full grow border-0 bg-transparent text-left text-text-bright outline-hidden ring-0 focus:border-0 focus:outline-hidden focus:ring-0 disabled:cursor-not-allowed",
           size.input,
           // Hide number input arrows
-          "[type=number]:border-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+          "[&[type=number]]:border-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         )}
         {...props}
       />
@@ -192,7 +192,7 @@ export function InputNumberStepper({
             size.button,
             "hover:border-error/50 hover:bg-error/30",
             "disabled:cursor-not-allowed disabled:opacity-40",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-link"
+            "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-text-link"
           )}
         >
           <MinusIcon className={cn("text-error", size.icon)} />
@@ -209,7 +209,7 @@ export function InputNumberStepper({
             size.button,
             "hover:border-success/40 hover:bg-success/20",
             "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-link"
+            "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-text-link"
           )}
         >
           <PlusIcon className={cn("text-success", size.icon)} />
diff --git a/apps/webapp/app/components/primitives/InputOTP.tsx b/apps/webapp/app/components/primitives/InputOTP.tsx
index 54ca070ac..50b14f43c 100644
--- a/apps/webapp/app/components/primitives/InputOTP.tsx
+++ b/apps/webapp/app/components/primitives/InputOTP.tsx
@@ -10,17 +10,17 @@ const variants = {
   default: {
     container: "flex items-center gap-2 has-disabled:opacity-50",
     group: "flex items-center",
-    slot: "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex size-9 items-center justify-center border-y border-r text-sm outline-none transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+    slot: "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex size-9 items-center justify-center border-y border-r text-sm outline-hidden transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
   },
   large: {
     container: "flex items-center gap-3 has-disabled:opacity-50",
     group: "flex items-center gap-1",
-    slot: "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive bg-charcoal-750 border-charcoal-700 hover:border-charcoal-600 hover:bg-charcoal-650 relative flex h-12 w-12 items-center justify-center border text-base outline-none transition-all rounded-md data-[active=true]:z-10 data-[active=true]:ring-[3px] data-[active=true]:border-indigo-500",
+    slot: "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive bg-background-hover border-grid-bright hover:border-border-bright hover:bg-secondary relative flex h-12 w-12 items-center justify-center border text-base outline-hidden transition-all rounded-md data-[active=true]:z-10 data-[active=true]:ring-[3px] data-[active=true]:border-indigo-500",
   },
   minimal: {
     container: "flex items-center gap-2 has-disabled:opacity-50",
     group: "flex items-center",
-    slot: "data-[active=true]:border-ring data-[active=true]:ring-ring/50 border-transparent bg-transparent relative flex h-9 w-9 items-center justify-center border-b-2 border-b-charcoal-600 text-sm outline-none transition-all data-[active=true]:border-b-indigo-500 data-[active=true]:z-10",
+    slot: "data-[active=true]:border-ring data-[active=true]:ring-ring/50 border-transparent bg-transparent relative flex h-9 w-9 items-center justify-center border-b-2 border-b-border-bright text-sm outline-hidden transition-all data-[active=true]:border-b-indigo-500 data-[active=true]:z-10",
   },
 };
 
diff --git a/apps/webapp/app/components/primitives/LoadingBarDivider.tsx b/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
index 52b4ff1da..713240177 100644
--- a/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
+++ b/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
@@ -46,7 +46,7 @@ export function AnimationDivider({ isLoading }: LoadingBarDividerProps) {
       {isLoading && (
         <div
           ref={scope}
-          className="width-0 absolute left-0 top-0 h-full bg-gradient-to-r from-transparent from-5% via-blue-500 to-transparent to-95%"
+          className="width-0 absolute left-0 top-0 h-full bg-linear-to-r from-transparent from-5% via-blue-500 to-transparent to-95%"
         />
       )}
     </AnimatePresence>
diff --git a/apps/webapp/app/components/primitives/PageHeader.tsx b/apps/webapp/app/components/primitives/PageHeader.tsx
index 08cc068cf..a7c68f059 100644
--- a/apps/webapp/app/components/primitives/PageHeader.tsx
+++ b/apps/webapp/app/components/primitives/PageHeader.tsx
@@ -52,7 +52,7 @@ export function PageTitle({ title, backButton, accessory }: PageTitleProps) {
         <div className="group -ml-1.5 flex items-center gap-0">
           <Link
             to={backButton.to}
-            className="rounded px-1.5 py-1 text-xs text-text-dimmed transition focus-custom group-hover:bg-charcoal-700 group-hover:text-text-bright"
+            className="rounded px-1.5 py-1 text-xs text-text-dimmed transition focus-custom group-hover:bg-background-raised group-hover:text-text-bright"
           >
             {backButton.text}
           </Link>
diff --git a/apps/webapp/app/components/primitives/Pagination.tsx b/apps/webapp/app/components/primitives/Pagination.tsx
index 7354febc2..80fce8bdd 100644
--- a/apps/webapp/app/components/primitives/Pagination.tsx
+++ b/apps/webapp/app/components/primitives/Pagination.tsx
@@ -65,7 +65,7 @@ export function PaginationControls({
               tooltip="Previous"
               disabled={currentPage === 1}
               className={cn(
-                "flex items-center rounded-r-none border-r-0 pl-2 pr-[0.5625rem]",
+                "flex items-center rounded-r-none border-r-0 pl-2 pr-2.25",
                 currentPage === 1 && "cursor-not-allowed opacity-50"
               )}
             />
@@ -73,7 +73,7 @@ export function PaginationControls({
 
           <div
             className={cn(
-              "order-2 h-6 w-px bg-charcoal-600 transition-colors peer-hover/next:bg-charcoal-550 peer-hover/prev:bg-charcoal-550",
+              "order-2 h-6 w-px bg-surface-control transition-colors peer-hover/next:bg-surface-control-hover peer-hover/prev:bg-surface-control-hover",
               currentPage === 1 && nextDisabled && "opacity-30"
             )}
           />
@@ -87,7 +87,7 @@ export function PaginationControls({
               tooltip="Next"
               disabled={nextDisabled}
               className={cn(
-                "flex items-center rounded-l-none border-l-0 pl-[0.5625rem] pr-2",
+                "flex items-center rounded-l-none border-l-0 pl-2.25 pr-2",
                 nextDisabled && "cursor-not-allowed opacity-50"
               )}
             />
@@ -109,7 +109,8 @@ function pageUrl(location: ReturnType<typeof useLocation>, page: number): string
 const baseClass =
   "flex items-center justify-center border border-transparent min-w-6 h-6 px-1 text-xs font-medium transition text-text-dimmed rounded-sm focus-visible:focus-custom";
 const unselectedClass = "hover:bg-tertiary hover:text-text-bright";
-const selectedClass = "border-charcoal-600 bg-tertiary text-text-bright hover:bg-charcoal-600/50";
+const selectedClass =
+  "border-border-bright bg-tertiary text-text-bright hover:bg-surface-control/50";
 
 function PageLinkComponent({
   page,
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index 0d88ad968..21ff5cd90 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -27,7 +27,7 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       avoidCollisions={true}
       className={cn(
-        "z-50 min-w-max rounded border border-charcoal-700 bg-background-bright p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-max rounded border border-grid-bright bg-background-bright p-4 shadow-md outline-hidden animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       style={{
@@ -47,7 +47,7 @@ function PopoverSectionHeader({
   variant?: ParagraphVariant;
 }) {
   return (
-    <Paragraph variant={variant} className="bg-charcoal-750 px-2.5 py-1.5">
+    <Paragraph variant={variant} className="bg-background-hover px-2.5 py-1.5">
       {title}
     </Paragraph>
   );
@@ -102,9 +102,9 @@ const PopoverMenuItem = React.forwardRef<
       TrailingIcon: isSelected ? CheckIcon : undefined,
       className: cn(
         danger
-          ? "transition-colors group-hover/button:bg-error/10 group-hover/button:text-error [&_span]:transition-colors [&_span]:group-hover/button:text-error"
-          : "group-hover:bg-charcoal-700",
-        isSelected ? "bg-charcoal-750 group-hover:bg-charcoal-600/50" : undefined,
+          ? "transition-colors group-hover/button:bg-error/10 group-hover/button:text-error [&_span]:transition-colors group-hover/button:[&_span]:text-error"
+          : "group-hover:bg-background-raised",
+        isSelected ? "bg-background-hover group-hover:bg-surface-control/50" : undefined,
         className
       ),
     } as const;
@@ -130,7 +130,7 @@ const PopoverMenuItem = React.forwardRef<
         onClick={onClick}
         disabled={disabled}
         className={cn(
-          "group/button outline-none focus-custom",
+          "group/button outline-hidden focus-custom",
           contentProps.fullWidth ? "w-full" : ""
         )}
         name={name}
@@ -154,7 +154,7 @@ function PopoverCustomTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex items-center justify-end gap-1 rounded text-text-dimmed transition focus-custom hover:bg-charcoal-850 hover:text-text-bright",
+        "group flex items-center justify-end gap-1 rounded text-text-dimmed transition focus-custom hover:bg-background-dimmed hover:text-text-bright",
         className
       )}
     >
@@ -192,7 +192,7 @@ function PopoverSideMenuTrigger({
       {...props}
       ref={ref}
       className={cn(
-        "flex h-[1.8rem] shrink-0 select-none items-center rounded-sm bg-transparent pl-[0.4rem] pr-2.5 text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
+        "flex h-[1.8rem] shrink-0 select-none items-center rounded-sm bg-transparent pl-[0.4rem] pr-2.5 text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-background-hover",
         shortcut && !hideShortcutKey ? "justify-between gap-x-1.5" : "",
         className
       )}
@@ -207,7 +207,7 @@ function PopoverSideMenuTrigger({
 
 const popoverArrowTriggerVariants = {
   minimal: {
-    trigger: "text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright",
+    trigger: "text-text-dimmed hover:bg-background-raised hover:text-text-bright",
     text: "group-hover:text-text-bright",
     icon: "text-text-dimmed group-hover:text-text-bright",
   },
@@ -219,12 +219,12 @@ const popoverArrowTriggerVariants = {
   },
   secondary: {
     trigger:
-      "bg-secondary border border-charcoal-600 text-text-bright hover:bg-charcoal-600 hover:border-charcoal-550 disabled:opacity-60 disabled:pointer-events-none",
+      "bg-secondary border border-border-bright text-text-bright hover:bg-surface-control hover:border-border-brighter disabled:opacity-60 disabled:pointer-events-none",
     text: "text-text-bright",
     icon: "text-text-bright",
   },
   tertiary: {
-    trigger: "bg-tertiary text-text-bright hover:bg-charcoal-600",
+    trigger: "bg-tertiary text-text-bright hover:bg-surface-control",
     text: "text-text-bright",
     icon: "text-text-bright",
   },
@@ -276,7 +276,7 @@ const popoverVerticalEllipseVariants = {
   },
   secondary: {
     trigger:
-      "size-6 rounded border border-charcoal-600 bg-secondary text-text-bright hover:bg-charcoal-600 hover:border-charcoal-550",
+      "size-6 rounded border border-border-bright bg-secondary text-text-bright hover:bg-surface-control hover:border-border-brighter",
     icon: "size-4",
   },
 } as const;
diff --git a/apps/webapp/app/components/primitives/RadioButton.tsx b/apps/webapp/app/components/primitives/RadioButton.tsx
index 87fb7a59f..c52389f78 100644
--- a/apps/webapp/app/components/primitives/RadioButton.tsx
+++ b/apps/webapp/app/components/primitives/RadioButton.tsx
@@ -7,14 +7,14 @@ import { Paragraph } from "./Paragraph";
 
 const variants = {
   "simple/small": {
-    button: "w-fit pr-4 data-[disabled]:opacity-70",
+    button: "w-fit pr-4 data-disabled:opacity-70",
     label: "text-sm text-text-bright mt-0.5 select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
     icon: "w-8 h-8 mb-2",
   },
   simple: {
-    button: "w-fit pr-4 data-[disabled]:opacity-70",
+    button: "w-fit pr-4 data-disabled:opacity-70",
     label: "text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
@@ -22,7 +22,7 @@ const variants = {
   },
   "button/small": {
     button:
-      "flex items-center w-fit h-8 pl-2 pr-3 rounded-md border hover:data-[state=checked]:border-charcoal-600 border-charcoal-650 hover:border-charcoal-600 transition data-[disabled]:opacity-70 data-[disabled]:hover:bg-transparent hover:data-[state=checked]:bg-white/[4%] data-[state=checked]:bg-white/[4%]",
+      "flex items-center w-fit h-8 pl-2 pr-3 rounded-md border hover:data-[state=checked]:border-border-bright border-border-bright hover:border-border-bright transition data-disabled:opacity-70 data-disabled:hover:bg-transparent hover:data-[state=checked]:bg-white/4 data-[state=checked]:bg-white/4",
     label: "text-sm text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-0",
@@ -30,7 +30,7 @@ const variants = {
   },
   button: {
     button:
-      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition data-[state=checked]:bg-charcoal-850 data-[disabled]:opacity-70",
+      "w-fit py-2 pl-3 pr-4 rounded border border-border-bright hover:bg-background-dimmed hover:border-border-brightest transition data-[state=checked]:bg-background-dimmed data-disabled:opacity-70",
     label: "text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
@@ -38,17 +38,17 @@ const variants = {
   },
   description: {
     button:
-      "w-full p-2.5 hover:data-[state=checked]:bg-white/[4%] data-[state=checked]:bg-white/[4%] transition data-[disabled]:opacity-70 hover:border-charcoal-600 border-charcoal-650 hover:data-[state=checked]:border-charcoal-600 border rounded-md",
+      "w-full p-2.5 hover:data-[state=checked]:bg-white/4 data-[state=checked]:bg-white/4 transition data-disabled:opacity-70 hover:border-border-bright border-border-bright hover:data-[state=checked]:border-border-bright border rounded-md",
     label: "text-text-bright font-semibold -mt-0.5 text-left text-sm",
-    description: "text-text-dimmed -mt-0 text-left",
+    description: "text-text-dimmed mt-0 text-left",
     inputPosition: "mt-0",
     icon: "w-8 h-8 mb-2",
   },
   icon: {
     button:
-      "w-full p-2.5 pb-4 hover:bg-charcoal-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-charcoal-850 border-charcoal-600 border rounded-sm",
+      "w-full p-2.5 pb-4 hover:bg-background-dimmed transition data-disabled:opacity-70 data-[state=checked]:bg-background-dimmed border-border-bright border rounded-sm",
     label: "text-text-bright font-semibold -mt-1 text-left",
-    description: "text-text-dimmed -mt-0 text-left",
+    description: "text-text-dimmed mt-0 text-left",
     inputPosition: "mt-0",
     icon: "mb-3",
   },
@@ -70,7 +70,7 @@ export function RadioButtonCircle({
   return (
     <div
       className={cn(
-        "ring-offset-background aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-charcoal-600 bg-charcoal-700 focus-custom disabled:cursor-not-allowed disabled:opacity-50",
+        "ring-offset-background aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-border-bright bg-background-raised focus-custom disabled:cursor-not-allowed disabled:opacity-50",
         boxClassName
       )}
     >
@@ -131,7 +131,7 @@ export const RadioGroupItem = React.forwardRef<
       >
         <div
           className={cn(
-            "ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-charcoal-600 focus-custom group-data-[state=checked]:border-indigo-500 disabled:cursor-not-allowed disabled:opacity-50",
+            "ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-border-bright focus-custom group-data-[state=checked]:border-indigo-500 disabled:cursor-not-allowed disabled:opacity-50",
             variation.inputPosition
           )}
         >
diff --git a/apps/webapp/app/components/primitives/Resizable.tsx b/apps/webapp/app/components/primitives/Resizable.tsx
index b2964c8e9..59550332c 100644
--- a/apps/webapp/app/components/primitives/Resizable.tsx
+++ b/apps/webapp/app/components/primitives/Resizable.tsx
@@ -53,15 +53,15 @@ const ResizableHandle = ({
     {withHandle && (
       <>
         {/* Horizontal orientation dots (vertical arrangement) */}
-        <div className="relative z-[1] flex h-5 w-0.75 flex-col items-center justify-center gap-[0.1875rem] bg-background-dimmed transition-opacity group-hover:opacity-0 group-data-[handle-orientation=vertical]:hidden">
+        <div className="relative z-1 flex h-5 w-0.75 flex-col items-center justify-center gap-0.75 bg-background-dimmed transition-opacity group-hover:opacity-0 group-data-[handle-orientation=vertical]:hidden">
           {Array.from({ length: 3 }).map((_, index) => (
-            <div key={index} className="h-[0.1875rem] w-0.75 rounded-full bg-charcoal-600" />
+            <div key={index} className="h-[0.1875rem] w-0.75 rounded-full bg-surface-control" />
           ))}
         </div>
         {/* Vertical orientation dots (horizontal arrangement) */}
-        <div className="relative z-[1] hidden h-0.75 w-5 flex-row items-center justify-center gap-[0.1875rem] bg-background-dimmed transition-opacity group-hover:opacity-0 group-data-[handle-orientation=vertical]:flex">
+        <div className="relative z-1 hidden h-0.75 w-5 flex-row items-center justify-center gap-0.75 bg-background-dimmed transition-opacity group-hover:opacity-0 group-data-[handle-orientation=vertical]:flex">
           {Array.from({ length: 3 }).map((_, index) => (
-            <div key={index} className="h-0.75 w-[0.1875rem] rounded-full bg-charcoal-600" />
+            <div key={index} className="h-0.75 w-[0.1875rem] rounded-full bg-surface-control" />
           ))}
         </div>
       </>
diff --git a/apps/webapp/app/components/primitives/SearchInput.tsx b/apps/webapp/app/components/primitives/SearchInput.tsx
index 9d93ff36e..0c46a3d02 100644
--- a/apps/webapp/app/components/primitives/SearchInput.tsx
+++ b/apps/webapp/app/components/primitives/SearchInput.tsx
@@ -154,7 +154,7 @@ export function SearchInput({
                       type="button"
                       onMouseDown={(e) => e.preventDefault()}
                       onClick={() => handleClear()}
-                      className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed transition hover:bg-charcoal-600 hover:text-text-bright"
+                      className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed transition hover:bg-surface-control hover:text-text-bright"
                     >
                       <XMarkIcon className="size-3" />
                     </button>
diff --git a/apps/webapp/app/components/primitives/SegmentedControl.tsx b/apps/webapp/app/components/primitives/SegmentedControl.tsx
index 4001ec6d3..2f749215c 100644
--- a/apps/webapp/app/components/primitives/SegmentedControl.tsx
+++ b/apps/webapp/app/components/primitives/SegmentedControl.tsx
@@ -18,16 +18,16 @@ const sizes = {
 
 const theme = {
   primary: {
-    base: "bg-charcoal-700",
-    active: "text-text-bright hover:bg-charcoal-750/50",
+    base: "bg-background-raised",
+    active: "text-text-bright hover:bg-background-hover/50",
     inactive: "text-text-dimmed transition hover:text-text-bright",
-    selected: "absolute inset-0 rounded-[2px] outline outline-3 outline-primary",
+    selected: "absolute inset-0 rounded-[2px] outline-solid outline-3 outline-primary",
   },
   secondary: {
-    base: "bg-charcoal-700/50",
+    base: "bg-background-raised/50",
     active: "text-text-bright",
     inactive: "text-text-dimmed transition hover:text-text-bright",
-    selected: "absolute inset-0 rounded bg-charcoal-700 border border-charcoal-600",
+    selected: "absolute inset-0 rounded bg-background-raised border border-border-bright",
   },
 };
 
diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx
index 25a646af5..6a5517739 100644
--- a/apps/webapp/app/components/primitives/Select.tsx
+++ b/apps/webapp/app/components/primitives/Select.tsx
@@ -22,7 +22,7 @@ const sizes = {
 const style = {
   tertiary: {
     button:
-      "bg-tertiary focus-custom border border-tertiary hover:text-text-bright hover:border-charcoal-600",
+      "bg-tertiary focus-custom border border-tertiary hover:text-text-bright hover:border-border-bright",
   },
   minimal: {
     button:
@@ -30,7 +30,7 @@ const style = {
   },
   secondary: {
     button:
-      "bg-secondary focus-custom border border-charcoal-600 hover:text-text-bright hover:border-charcoal-550 text-text-bright hover:bg-charcoal-600",
+      "bg-secondary focus-custom border border-border-bright hover:text-text-bright hover:border-border-brighter text-text-bright hover:bg-surface-control",
   },
 };
 
@@ -358,7 +358,7 @@ export function SelectTrigger({
       {showTooltip && (
         <Ariakit.Tooltip
           disabled={!tooltipTitle && !shortcut}
-          className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs"
+          className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs"
         >
           <div className="flex items-center gap-2">
             <span>{tooltipTitle ?? "Open menu"}</span>
@@ -437,7 +437,7 @@ export function SelectList(props: SelectListProps) {
     <Component
       {...props}
       className={cn(
-        "overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 focus-custom",
+        "overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control focus-custom",
         props.className
       )}
     />
@@ -518,7 +518,9 @@ export function SelectItem({
         {checkPosition === "right" && checkIcon}
         {shortcut && (
           <ShortcutKey
-            className={cn("size-4 flex-none transition duration-0 group-hover:border-charcoal-600")}
+            className={cn(
+              "size-4 flex-none transition duration-0 group-hover:border-border-bright"
+            )}
             shortcut={shortcut}
             variant={"small"}
           />
@@ -603,7 +605,7 @@ export function shortcutFromIndex(
 export interface SelectSeparatorProps extends React.ComponentProps<"div"> {}
 
 export function SelectSeparator(props: SelectSeparatorProps) {
-  return <div {...props} className={cn("h-px bg-charcoal-700", props.className)} />;
+  return <div {...props} className={cn("h-px bg-background-raised", props.className)} />;
 }
 
 export interface SelectGroupProps extends Ariakit.SelectGroupProps {}
@@ -619,7 +621,7 @@ export function SelectGroupLabel(props: SelectGroupLabelProps) {
     <Ariakit.SelectGroupLabel
       {...props}
       className={cn(
-        "flex h-[1.375rem] items-center border-b border-charcoal-700 bg-charcoal-750 px-2.5 text-xxs uppercase text-text-bright",
+        "flex h-5.5 items-center border-b border-grid-bright bg-background-hover px-2.5 text-xxs uppercase text-text-bright",
         props.className
       )}
     />
@@ -629,7 +631,7 @@ export function SelectGroupLabel(props: SelectGroupLabelProps) {
 export interface SelectHeadingProps extends Ariakit.SelectHeadingProps {}
 export function SelectHeading({ render, ...props }: SelectHeadingProps) {
   return (
-    <div className="flex h-[1.375rem] flex-none cursor-default items-center gap-2 border-b border-charcoal-700 bg-charcoal-750 px-2.5 text-xxs uppercase text-text-bright">
+    <div className="flex h-5.5 flex-none cursor-default items-center gap-2 border-b border-grid-bright bg-background-hover px-2.5 text-xxs uppercase text-text-bright">
       <Ariakit.SelectHeading render={render} />
     </div>
   );
@@ -649,11 +651,11 @@ export function SelectPopover({
       shift={shift}
       unmountOnHide={unmountOnHide}
       className={cn(
-        "z-50 flex flex-col overflow-clip rounded border border-charcoal-700 bg-background-bright shadow-md outline-none animate-in fade-in-40",
+        "z-50 flex flex-col overflow-clip rounded border border-grid-bright bg-background-bright shadow-md outline-hidden animate-in fade-in-40",
         "min-w-[max(180px,var(--popover-anchor-width))]",
         "max-w-[min(480px,var(--popover-available-width))]",
         "max-h-[min(600px,var(--popover-available-height))]",
-        "origin-[var(--popover-transform-origin)]",
+        "origin-(--popover-transform-origin)",
         className
       )}
       {...props}
@@ -678,11 +680,11 @@ export function ComboBox({
   ...props
 }: ComboBoxProps) {
   return (
-    <div className="flex h-9 w-full flex-none items-center border-b border-grid-dimmed bg-transparent px-3 text-xs text-text-dimmed outline-none">
+    <div className="flex h-9 w-full flex-none items-center border-b border-grid-dimmed bg-transparent px-3 text-xs text-text-dimmed outline-hidden">
       <Ariakit.Combobox
         autoSelect={autoSelect}
         render={<input placeholder={placeholder} />}
-        className="flex-1 bg-transparent text-xs text-text-dimmed outline-none"
+        className="flex-1 bg-transparent text-xs text-text-dimmed outline-hidden"
         {...props}
       />
       {shortcut && (
diff --git a/apps/webapp/app/components/primitives/Sheet.tsx b/apps/webapp/app/components/primitives/Sheet.tsx
index e8f1fc057..b7376245f 100644
--- a/apps/webapp/app/components/primitives/Sheet.tsx
+++ b/apps/webapp/app/components/primitives/Sheet.tsx
@@ -155,7 +155,7 @@ const SheetContent = React.forwardRef<
     >
       <div className="grid max-h-full grid-rows-[2.75rem_1fr] overflow-hidden">
         <div className="flex items-center gap-2 border-b border-grid-bright p-2">
-          <SheetPrimitive.Close className="rounded-sm p-1 transition hover:bg-charcoal-800 disabled:pointer-events-none">
+          <SheetPrimitive.Close className="rounded-sm p-1 transition hover:bg-background-bright disabled:pointer-events-none">
             <XMarkIcon className="size-4 text-text-dimmed" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
@@ -171,7 +171,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 export const SheetBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+      "overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",
       className
     )}
     {...props}
diff --git a/apps/webapp/app/components/primitives/SheetV3.tsx b/apps/webapp/app/components/primitives/SheetV3.tsx
index 1b708af6a..922f28d5b 100644
--- a/apps/webapp/app/components/primitives/SheetV3.tsx
+++ b/apps/webapp/app/components/primitives/SheetV3.tsx
@@ -91,7 +91,7 @@ const SheetTitle = React.forwardRef<
     {...props}
   >
     {children}
-    <SheetPrimitive.Close className="flex items-center gap-1 rounded-sm p-1 pl-0 transition hover:bg-charcoal-750 focus-visible:focus-custom disabled:pointer-events-none">
+    <SheetPrimitive.Close className="flex items-center gap-1 rounded-sm p-1 pl-0 transition hover:bg-background-hover focus-visible:focus-custom disabled:pointer-events-none">
       <ShortcutKey shortcut={{ key: "esc" }} variant="small" />
       <XMarkIcon className="size-4 text-text-dimmed" />
       <span className="sr-only">Close</span>
diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx
index a8a7741c0..c3be54c0b 100644
--- a/apps/webapp/app/components/primitives/ShortcutKey.tsx
+++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx
@@ -9,19 +9,19 @@ import { useOperatingSystem } from "./OperatingSystemProvider";
 import { KeyboardEnterIcon } from "~/assets/icons/KeyboardEnterIcon";
 
 const small =
-  "justify-center text-[0.6rem] font-mono font-medium min-w-[1rem] min-h-[1rem] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border transition uppercase";
+  "justify-center text-[0.6rem] font-mono font-medium min-w-4 min-h-4 rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border transition uppercase";
 
 const medium =
-  "justify-center min-w-[1.25rem] min-h-[1.25rem] text-[0.65rem] font-mono font-medium rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase";
+  "justify-center min-w-5 min-h-5 text-[0.65rem] font-mono font-medium rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase";
 
 export const variants = {
   small: cn(
     small,
     "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-text-dimmed/60"
   ),
-  "small/bright": cn(small, "bg-charcoal-750 text-text-bright border-charcoal-650"),
-  medium: cn(medium, "group-hover:border-charcoal-550"),
-  "medium/bright": cn(medium, "bg-charcoal-750 text-text-bright border-charcoal-650"),
+  "small/bright": cn(small, "bg-background-hover text-text-bright border-border-bright"),
+  medium: cn(medium, "group-hover:border-border-brighter"),
+  "medium/bright": cn(medium, "bg-background-hover text-text-bright border-border-bright"),
 };
 
 export type ShortcutKeyVariant = keyof typeof variants;
diff --git a/apps/webapp/app/components/primitives/SimpleSelect.tsx b/apps/webapp/app/components/primitives/SimpleSelect.tsx
index d7b9e4ccc..60ef1f65d 100644
--- a/apps/webapp/app/components/primitives/SimpleSelect.tsx
+++ b/apps/webapp/app/components/primitives/SimpleSelect.tsx
@@ -7,8 +7,8 @@ import { cn } from "~/utils/cn";
 
 const sizes = {
   "secondary/small":
-    "text-xs h-6 bg-tertiary border border-tertiary group-hover:text-text-bright hover:border-charcoal-600 pr-2 pl-1.5",
-  medium: "text-sm h-8 bg-tertiary border border-tertiary hover:border-charcoal-600 px-2.5",
+    "text-xs h-6 bg-tertiary border border-tertiary group-hover:text-text-bright hover:border-border-bright pr-2 pl-1.5",
+  medium: "text-sm h-8 bg-tertiary border border-tertiary hover:border-border-bright px-2.5",
   minimal: "text-xs h-6 bg-transparent hover:bg-tertiary pl-1.5 pr-2",
 };
 
@@ -57,7 +57,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-max overflow-hidden rounded-md border border-charcoal-700 bg-background-dimmed text-text-bright shadow-md animate-in fade-in-40",
+        "relative z-50 min-w-max overflow-hidden rounded-md border border-grid-bright bg-background-dimmed text-text-bright shadow-md animate-in fade-in-40",
         position === "popper" && "translate-y-1",
         className
       )}
@@ -68,7 +68,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "space-y-0.5 px-1 py-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
         )}
       >
         {children}
@@ -85,7 +85,7 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
-      "-ml-1 -mr-1 mb-1 bg-charcoal-900 py-1.5 pl-2 pr-2 font-sans text-xxs font-normal uppercase leading-normal tracking-wider text-text-dimmed first-of-type:-mt-0",
+      "-ml-1 -mr-1 mb-1 bg-background-deep py-1.5 pl-2 pr-2 font-sans text-xxs font-normal uppercase leading-normal tracking-wider text-text-dimmed first-of-type:mt-0",
       className
     )}
     {...props}
@@ -102,7 +102,7 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
     <SelectPrimitive.Item
       ref={ref}
       className={cn(
-        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-12 text-sm outline-none transition data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-charcoal-750 focus:bg-charcoal-750/50",
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-12 text-sm outline-hidden transition data-disabled:pointer-events-none data-disabled:opacity-50 hover:bg-background-hover focus:bg-background-hover/50",
         className
       )}
       {...props}
diff --git a/apps/webapp/app/components/primitives/Slider.tsx b/apps/webapp/app/components/primitives/Slider.tsx
index fe1129c59..b5af54e2b 100644
--- a/apps/webapp/app/components/primitives/Slider.tsx
+++ b/apps/webapp/app/components/primitives/Slider.tsx
@@ -6,13 +6,13 @@ import { Icon } from "./Icon";
 
 const variants = {
   tertiary: {
-    container: "h-6 gap-1 rounded-sm hover:bg-charcoal-700 px-1",
+    container: "h-6 gap-1 rounded-sm hover:bg-background-raised px-1",
     icons: "h-4 w-4 text-text-bright",
     root: "h-4",
     track: "h-1 bg-grid-bright group-hover:bg-background-dimmed",
     range: "bg-transparent group-hover:bg-secondary",
     thumb:
-      "h-3 w-3 border-2 border-text-dimmed bg-grid-bright shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] hover:border-text-dimmed focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)]",
+      "h-3 w-3 border-2 border-text-dimmed bg-grid-bright shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)] hover:border-text-dimmed focus:shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)]",
   },
 };
 
@@ -42,7 +42,7 @@ export function Slider({ variant, className, LeadingIcon, TrailingIcon, ...props
         </RadixSlider.Track>
         <RadixSlider.Thumb
           className={cn(
-            "block cursor-pointer rounded-full transition focus:outline-none",
+            "block cursor-pointer rounded-full transition focus:outline-hidden",
             variation.thumb
           )}
         />
diff --git a/apps/webapp/app/components/primitives/StepNumber.tsx b/apps/webapp/app/components/primitives/StepNumber.tsx
index a87074fd2..9172019fb 100644
--- a/apps/webapp/app/components/primitives/StepNumber.tsx
+++ b/apps/webapp/app/components/primitives/StepNumber.tsx
@@ -29,7 +29,7 @@ export function StepNumber({
         </div>
       ) : (
         <div className="flex items-center gap-x-3">
-          <span className="flex h-6 w-6 items-center justify-center rounded border border-charcoal-700 bg-charcoal-800 py-1 text-xs font-semibold text-text-dimmed">
+          <span className="flex h-6 w-6 items-center justify-center rounded border border-grid-bright bg-background-bright py-1 text-xs font-semibold text-text-dimmed">
             {complete ? <CheckIcon className="size-4" /> : stepNumber}
           </span>
 
diff --git a/apps/webapp/app/components/primitives/Switch.tsx b/apps/webapp/app/components/primitives/Switch.tsx
index 10fb0bf29..96943e9be 100644
--- a/apps/webapp/app/components/primitives/Switch.tsx
+++ b/apps/webapp/app/components/primitives/Switch.tsx
@@ -7,7 +7,7 @@ import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKey
 
 const small = {
   container:
-    "flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary pr-1 py-[0.1rem] pl-1.5 hover:disabled:bg-charcoal-700 transition focus-custom disabled:opacity-50 text-text-dimmed hover:text-text-bright disabled:hover:cursor-not-allowed hover:cursor-pointer disabled:hover:text-rose-500",
+    "flex items-center h-6 gap-x-1.5 rounded hover:bg-tertiary pr-1 py-[0.1rem] pl-1.5 hover:disabled:bg-background-raised transition focus-custom disabled:opacity-50 text-text-dimmed hover:text-text-bright disabled:hover:cursor-not-allowed hover:cursor-pointer disabled:hover:text-rose-500",
   root: "h-3 w-6",
   thumb: "size-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
   text: "text-xs text-text-dimmed",
@@ -25,25 +25,25 @@ const variations = {
     container: small.container,
     root: cn(
       small.root,
-      "group-data-[state=unchecked]:bg-charcoal-600 group-data-[state=unchecked]:group-hover:bg-charcoal-500/50"
+      "group-data-[state=unchecked]:bg-surface-control group-hover:group-data-[state=unchecked]:bg-surface-control-active/50"
     ),
     thumb: small.thumb,
     text: cn(
       small.text,
-      "transition group-hover:text-text-bright group-disabled:group-hover:text-text-dimmed"
+      "transition group-hover:text-text-bright group-hover:group-disabled:text-text-dimmed"
     ),
   },
   "secondary/small": {
     container: cn(
       small.container,
-      "border border-charcoal-600 hover:border-charcoal-550 bg-secondary hover:bg-charcoal-600"
+      "border border-border-bright hover:border-border-brighter bg-secondary hover:bg-surface-control"
     ),
     root: cn(
       small.root,
-      "group-data-[state=unchecked]:bg-charcoal-550 group-data-[state=unchecked]:group-hover:bg-charcoal-500"
+      "group-data-[state=unchecked]:bg-surface-control-hover group-hover:group-data-[state=unchecked]:bg-surface-control-active"
     ),
     thumb: small.thumb,
-    text: cn(small.text, "transition text-text-bright group-disabled:group-hover:text-text-dimmed"),
+    text: cn(small.text, "transition text-text-bright group-hover:group-disabled:text-text-dimmed"),
   },
   medium: {
     container:
@@ -91,7 +91,7 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
     const switchElement = (
       <div
         className={cn(
-          "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-blue-500 group-data-[state=unchecked]:bg-charcoal-700 group-data-[state=unchecked]:group-hover:bg-charcoal-500/50",
+          "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-blue-500 group-data-[state=unchecked]:bg-background-raised group-hover:group-data-[state=unchecked]:bg-surface-control-active/50",
           root
         )}
       >
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index bf827de5e..2b740fac0 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -11,14 +11,14 @@ const variants = {
   bright: {
     header: "bg-background-bright",
     headerCell: "px-3 py-2.5 pb-3 text-sm",
-    cell: "group-hover/table-row:bg-charcoal-750 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
+    cell: "group-hover/table-row:bg-background-hover group-has-[[tabindex='0']:focus]/table-row:bg-background-hover",
     cellSize: "px-3 py-3",
     cellText: "text-xs group-hover/table-row:text-text-bright",
-    stickyCell: "bg-background-bright group-hover/table-row:bg-charcoal-750",
+    stickyCell: "bg-background-bright group-hover/table-row:bg-background-hover",
     menuButton:
-      "bg-background-bright group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/70 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
-    menuButtonDivider: "group-hover/table-row:border-charcoal-600/70",
-    rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
+      "bg-background-bright group-hover/table-row:bg-background-hover group-hover/table-row:ring-border-bright/70 group-has-[[tabindex='0']:focus]/table-row:bg-background-hover",
+    menuButtonDivider: "group-hover/table-row:border-border-bright/70",
+    rowSelected: "bg-background-hover group-hover/table-row:bg-background-hover",
   },
   "bright/no-hover": {
     header: "bg-transparent",
@@ -29,31 +29,31 @@ const variants = {
     stickyCell: "bg-background-bright",
     menuButton: "bg-background-bright",
     menuButtonDivider: "",
-    rowSelected: "bg-charcoal-750",
+    rowSelected: "bg-background-hover",
   },
   dimmed: {
     header: "bg-background-dimmed",
     headerCell: "px-3 py-2.5 pb-3 text-sm",
-    cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+    cell: "group-hover/table-row:bg-background-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
     cellSize: "px-3 py-3",
     cellText: "text-xs group-hover/table-row:text-text-bright",
-    stickyCell: "group-hover/table-row:bg-charcoal-800",
+    stickyCell: "group-hover/table-row:bg-background-bright",
     menuButton:
-      "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+      "bg-background-dimmed group-hover/table-row:bg-background-bright group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
     menuButtonDivider: "group-hover/table-row:border-grid-bright",
-    rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
+    rowSelected: "bg-background-hover group-hover/table-row:bg-background-hover",
   },
   "compact/mono": {
     header: "bg-background-dimmed",
     headerCell: "px-2 py-1.5 text-sm",
-    cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+    cell: "group-hover/table-row:bg-background-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
     cellSize: "px-2 py-1.5",
     cellText: "text-xs font-mono group-hover/table-row:text-text-bright",
-    stickyCell: "group-hover/table-row:bg-charcoal-800",
+    stickyCell: "group-hover/table-row:bg-background-bright",
     menuButton:
-      "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+      "bg-background-dimmed group-hover/table-row:bg-background-bright group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
     menuButtonDivider: "group-hover/table-row:border-grid-bright",
-    rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
+    rowSelected: "bg-background-hover group-hover/table-row:bg-background-hover",
   },
 } as const;
 
@@ -88,7 +88,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps & { variant?: Table
       <TableContext.Provider value={{ variant }}>
         <div
           className={cn(
-            "whitespace-nowrap scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+            "whitespace-nowrap scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",
             stickyHeader ? "overflow-visible" : "overflow-x-auto",
             showTopBorder && "border-t",
             containerClassName,
@@ -158,7 +158,7 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
         ref={ref}
         {...props}
         className={cn(
-          "group/table-row relative w-full outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
+          "group/table-row relative w-full outline-hidden after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
           isSelected && variants[variant].rowSelected,
           disabled && "opacity-50",
           className
@@ -306,19 +306,18 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       <td
         ref={ref}
         className={cn(
-          "safari-only text-xs text-charcoal-400 has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed",
+          "safari-only text-xs text-text-dimmed has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed",
           variants[variant].cellText,
           variants[variant].cell,
           to || onClick || hasAction
             ? "cursor-pointer"
             : cn("cursor-default align-middle", variants[variant].cellSize),
           !to && !onClick && alignmentClassName,
-          isSticky &&
-            "[&:has(.group-hover/table-row:block)]:w-auto sticky right-0 bg-background-dimmed",
+          isSticky && "[&:has([data-hidden-buttons])]:w-auto sticky right-0 bg-background-dimmed",
           isSticky && variants[variant].stickyCell,
           isSelected && variants[variant].rowSelected,
           !isSelected &&
-            "group-hover/table-row:before:absolute group-hover/table-row:before:left-0 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:after:absolute group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3 group-hover/table-row:after:bg-charcoal-750 group-focus-visible/table-row:bg-background-bright",
+            "group-hover/table-row:before:absolute group-hover/table-row:before:left-0 group-hover/table-row:before:-top-px group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:before:bg-background-hover group-hover/table-row:after:absolute group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3 group-hover/table-row:after:bg-background-hover group-focus-visible/table-row:bg-background-bright",
           className
         )}
         colSpan={colSpan}
@@ -327,7 +326,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         {to ? (
           <Link
             to={to}
-            className={cn("cursor-pointer focus:outline-none", flexClasses, actionClassName)}
+            className={cn("cursor-pointer focus:outline-hidden", flexClasses, actionClassName)}
             tabIndex={isTabbableCell ? 0 : -1}
           >
             {children}
@@ -335,7 +334,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         ) : onClick ? (
           <button
             onClick={onClick}
-            className={cn("cursor-pointer focus:outline-none", flexClasses, actionClassName)}
+            className={cn("cursor-pointer focus:outline-hidden", flexClasses, actionClassName)}
             tabIndex={isTabbableCell ? 0 : -1}
           >
             {children}
@@ -378,10 +377,10 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
                 button={
                   <span
                     className={cn(
-                      "flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+                      "flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
                       copied
                         ? "text-green-500"
-                        : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+                        : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
                     )}
                   >
                     {copied ? (
@@ -480,6 +479,7 @@ export const TableCellMenu = forwardRef<
             {/* Hidden buttons that show on hover */}
             {hiddenButtons && (
               <div
+                data-hidden-buttons
                 className={cn(
                   "hidden group-hover/table-row:block",
                   popoverContent && "pr-0.5 group-hover/table-row:border-r",
@@ -501,7 +501,7 @@ export const TableCellMenu = forwardRef<
                   className="duration-0 group-hover/table-row:text-text-bright"
                 />
                 <PopoverContent
-                  className="min-w-[10rem] max-w-[20rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+                  className="min-w-40 max-w-80 overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
                   align="end"
                 >
                   {typeof popoverContent === "function" ? (
diff --git a/apps/webapp/app/components/primitives/Tabs.tsx b/apps/webapp/app/components/primitives/Tabs.tsx
index 9299baa84..1128a9c26 100644
--- a/apps/webapp/app/components/primitives/Tabs.tsx
+++ b/apps/webapp/app/components/primitives/Tabs.tsx
@@ -48,7 +48,10 @@ export function TabContainer({
   if (variant === "segmented") {
     return (
       <div
-        className={cn("relative flex h-10 items-center rounded bg-charcoal-700/50 p-1", className)}
+        className={cn(
+          "relative flex h-10 items-center rounded bg-background-raised/50 p-1",
+          className
+        )}
       >
         {children}
       </div>
@@ -104,7 +107,7 @@ export function TabLink({
                 <motion.div
                   layoutId={layoutId}
                   transition={{ duration: 0.4, type: "spring" }}
-                  className="absolute inset-0 rounded-[2px] border border-charcoal-500/50 bg-charcoal-600"
+                  className="absolute inset-0 rounded-[2px] border border-border-brightest/50 bg-surface-control"
                 />
               )}
             </>
@@ -118,7 +121,7 @@ export function TabLink({
     return (
       <NavLink
         to={to}
-        className="group flex flex-col items-center border-r border-charcoal-700 px-2 pt-1 focus-custom first:pl-0 last:border-none"
+        className="group flex flex-col items-center border-r border-grid-bright px-2 pt-1 focus-custom first:pl-0 last:border-none"
         end={end}
       >
         {({ isActive, isPending }) => {
@@ -161,7 +164,7 @@ export function TabLink({
                 className="mt-1 h-0.5 w-full bg-indigo-500"
               />
             ) : (
-              <div className="mt-1 h-0.5 w-full bg-charcoal-500 opacity-0 transition duration-200 group-hover:opacity-100" />
+              <div className="mt-1 h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100" />
             )}
           </>
         );
@@ -219,7 +222,7 @@ export function TabButton({
             className="mt-1 h-0.5 w-full bg-indigo-500"
           />
         ) : (
-          <div className="mt-1 h-0.5 w-full bg-charcoal-500 opacity-0 transition duration-200 group-hover:opacity-100" />
+          <div className="mt-1 h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100" />
         )}
       </>
     </button>
diff --git a/apps/webapp/app/components/primitives/TextArea.tsx b/apps/webapp/app/components/primitives/TextArea.tsx
index 06dc84622..8cdb96de3 100644
--- a/apps/webapp/app/components/primitives/TextArea.tsx
+++ b/apps/webapp/app/components/primitives/TextArea.tsx
@@ -8,7 +8,7 @@ export function TextArea({ className, rows, ...props }: TextAreaProps) {
       {...props}
       rows={rows ?? 6}
       className={cn(
-        "placeholder:text-muted-foreground w-full rounded border border-charcoal-800 bg-charcoal-750 px-3 text-sm text-text-bright transition focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 hover:bg-charcoal-650 disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-muted-foreground w-full rounded border border-background-bright bg-background-hover px-3 text-sm text-text-bright transition focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-border-bright hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
     />
diff --git a/apps/webapp/app/components/primitives/Tooltip.tsx b/apps/webapp/app/components/primitives/Tooltip.tsx
index 92f95babc..412337831 100644
--- a/apps/webapp/app/components/primitives/Tooltip.tsx
+++ b/apps/webapp/app/components/primitives/Tooltip.tsx
@@ -42,7 +42,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-none",
+        "z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-hidden",
         variantClasses[variant],
         className
       )}
diff --git a/apps/webapp/app/components/primitives/TreeView/TreeView.tsx b/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
index f6b5ad85d..e19a006df 100644
--- a/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
+++ b/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
@@ -87,7 +87,7 @@ export function TreeView<TData>({
         }
       }}
       className={cn(
-        "w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 focus-within:outline-none",
+        "w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control focus-within:outline-hidden",
         parentClassName
       )}
       layoutScroll
diff --git a/apps/webapp/app/components/primitives/UsageSparkline.tsx b/apps/webapp/app/components/primitives/UsageSparkline.tsx
index 2ffc1936a..5a6b0a5c1 100644
--- a/apps/webapp/app/components/primitives/UsageSparkline.tsx
+++ b/apps/webapp/app/components/primitives/UsageSparkline.tsx
@@ -42,7 +42,7 @@ export function UsageSparkline({
   data,
   bucketStartMs,
   bucketIntervalMs,
-  color = "#3B82F6",
+  color = "var(--color-pending)",
   unitLabel = { singular: "call", plural: "calls" },
   formatTotal,
   totalClassName = "text-blue-400",
@@ -66,7 +66,7 @@ export function UsageSparkline({
 
   return (
     <div className="flex items-start gap-2">
-      <div className="h-6 w-[7rem] rounded-sm">
+      <div className="h-6 w-28 rounded-sm">
         <ResponsiveContainer width="100%" height="100%">
           <BarChart data={chartData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
             <YAxis domain={[0, max || 1]} hide />
@@ -84,9 +84,14 @@ export function UsageSparkline({
               isAnimationActive={false}
               minPointSize={1}
             />
-            <ReferenceLine y={0} stroke="#2C3034" strokeWidth={1} />
+            <ReferenceLine y={0} stroke="var(--color-border-bright)" strokeWidth={1} />
             {max > 0 && (
-              <ReferenceLine y={max} stroke="#4D525B" strokeDasharray="4 4" strokeWidth={1} />
+              <ReferenceLine
+                y={max}
+                stroke="var(--color-border-brighter)"
+                strokeDasharray="4 4"
+                strokeWidth={1}
+              />
             )}
           </BarChart>
         </ResponsiveContainer>
@@ -110,7 +115,7 @@ function UsageSparklineTooltip({
   return (
     <TooltipPortal active={active}>
       <div className="rounded-sm border border-grid-bright bg-background-dimmed px-3 py-2">
-        <Header3 className="border-b border-b-charcoal-650 pb-2">{formattedDate}</Header3>
+        <Header3 className="border-b border-b-border-bright pb-2">{formattedDate}</Header3>
         <div className="mt-2 text-xs text-text-bright">
           <span className="tabular-nums">{entry.count.toLocaleString()}</span>{" "}
           <span className="text-text-dimmed">
diff --git a/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx b/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
index 7ea88b3fe..d36fe5408 100644
--- a/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
+++ b/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
@@ -142,7 +142,7 @@ export function BigNumberCard({ rows, columns, config, isLoading = false }: BigN
 
   if (isLoading) {
     return (
-      <div className="grid h-full place-items-center [container-type:size]">
+      <div className="grid h-full place-items-center @container-size">
         <Spinner className="size-6" />
       </div>
     );
@@ -155,7 +155,7 @@ export function BigNumberCard({ rows, columns, config, isLoading = false }: BigN
   // Use format-aware formatter when available
   if (columnValueFormatter) {
     return (
-      <div className="h-full w-full [container-type:size]">
+      <div className="h-full w-full @container-size">
         <div className="grid h-full w-full place-items-center">
           <div className="flex items-baseline gap-[0.15em] whitespace-nowrap text-[clamp(24px,12cqw,96px)] font-normal tabular-nums leading-none text-text-bright">
             {prefix && <span>{prefix}</span>}
@@ -172,7 +172,7 @@ export function BigNumberCard({ rows, columns, config, isLoading = false }: BigN
     : { displayValue: result, unitSuffix: undefined, decimalPlaces: getDecimalPlaces(result) };
 
   return (
-    <div className="h-full w-full [container-type:size]">
+    <div className="h-full w-full @container-size">
       <div className="grid h-full w-full place-items-center">
         <div className="flex items-baseline gap-[0.15em] whitespace-nowrap text-[clamp(24px,12cqw,96px)] font-normal tabular-nums leading-none text-text-bright">
           {prefix && <span>{prefix}</span>}
diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index 57a2692e6..85d283368 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -5,7 +5,7 @@ import { AnimatedNumber } from "../AnimatedNumber";
 import TooltipPortal from "../TooltipPortal";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
+const THEMES = { light: "", dark: '[data-theme="dark"]' } as const;
 
 export type ChartState = "loading" | "noData" | "invalid" | "loaded" | undefined;
 
@@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -167,7 +167,7 @@ const ChartTooltipContent = React.forwardRef<
         <div
           ref={ref}
           className={cn(
-            "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-grid-bright bg-background-bright px-2.5 py-1.5 text-xs shadow-xl",
+            "grid min-w-32 items-start gap-1.5 rounded-lg border border-grid-bright bg-background-bright px-2.5 py-1.5 text-xs shadow-xl",
             className
           )}
         >
@@ -196,7 +196,7 @@ const ChartTooltipContent = React.forwardRef<
                         !hideIndicator && (
                           <div
                             className={cn(
-                              "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                              "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                               {
                                 "h-2.5 w-2.5": indicator === "dot",
                                 "w-1": indicator === "line",
diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index ef9daeb53..73ffb35c5 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -20,8 +20,8 @@ import { useXAxisTicks } from "./useXAxisTicks";
 import { useChartSync } from "./ChartSyncContext";
 import { ZoomTooltip, useZoomHandlers } from "./ChartZoom";
 
-// charcoal-500: dashed line mirroring the hovered x across synced charts.
-const SYNC_LINE_COLOR = "#5F6570";
+// Dashed line mirroring the hovered x across synced charts.
+const SYNC_LINE_COLOR = "var(--color-text-faint)";
 
 // Shared with ChartLine so bar/line align when toggling. Right margin keeps the
 // centered last x-axis label from clipping; bottom gives angled labels room.
@@ -228,7 +228,7 @@ export function ChartBarRenderer({
       onClick={zoomHandlers.onClick}
       onMouseLeave={handleMouseLeave}
     >
-      <CartesianGrid vertical={false} stroke="#272A2E" />
+      <CartesianGrid vertical={false} stroke="var(--color-grid-bright)" />
       <XAxis
         dataKey={dataKey}
         tickLine={false}
@@ -237,7 +237,7 @@ export function ChartBarRenderer({
         ticks={baseXTicks}
         interval={baseXInterval}
         tick={{
-          fill: "#878C99",
+          fill: "var(--color-text-dimmed)",
           fontSize: 11,
           style: { fontVariantNumeric: "tabular-nums" },
         }}
@@ -249,7 +249,7 @@ export function ChartBarRenderer({
         tickMargin={8}
         width={computedYAxisWidth}
         tick={{
-          fill: "#878C99",
+          fill: "var(--color-text-dimmed)",
           fontSize: 11,
           style: { fontVariantNumeric: "tabular-nums" },
         }}
@@ -288,7 +288,7 @@ export function ChartBarRenderer({
           x1={zoom.refAreaLeft}
           x2={zoom.refAreaRight}
           strokeOpacity={0.4}
-          fill="#3B82F6"
+          fill="var(--color-pending)"
           fillOpacity={0.3}
         />
       )}
@@ -332,9 +332,9 @@ export function ChartBarRenderer({
           x1={syncZoomSelection.start}
           x2={syncZoomSelection.current}
           isFront
-          stroke="#3B82F6"
+          stroke="var(--color-pending)"
           strokeOpacity={0.3}
-          fill="#3B82F6"
+          fill="var(--color-pending)"
           fillOpacity={0.15}
           className="pointer-events-none"
         />
@@ -360,11 +360,11 @@ export function ChartBarRenderer({
           label={{
             position: "top",
             value: referenceLine.label,
-            fill: "#878C99",
+            fill: "var(--color-text-dimmed)",
             fontSize: 11,
           }}
           isFront={true}
-          stroke="#3B3E45"
+          stroke="var(--color-border-bright)"
           strokeDasharray="4 4"
           className="pointer-events-none"
         />
@@ -374,7 +374,7 @@ export function ChartBarRenderer({
       {enableZoom && zoom?.inspectionLine && (
         <ReferenceLine
           x={zoom.inspectionLine}
-          stroke="#D7D9DD"
+          stroke="var(--color-text-bright)"
           strokeWidth={2}
           isFront={true}
           onClick={(e: any) => {
diff --git a/apps/webapp/app/components/primitives/charts/ChartBlankState.tsx b/apps/webapp/app/components/primitives/charts/ChartBlankState.tsx
index 9a093254e..66ba14a92 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBlankState.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBlankState.tsx
@@ -13,7 +13,7 @@ export function ChartBlankState({
   return (
     <div className={cn("flex h-full w-full items-center justify-center", className)}>
       <div className="-mt-3 flex flex-col items-center gap-2">
-        {Icon && <Icon className="size-12 text-charcoal-700" />}
+        {Icon && <Icon className="size-12 text-tertiary" />}
         <Paragraph variant="small" className="text-text-dimmed/70">
           {message}
         </Paragraph>
diff --git a/apps/webapp/app/components/primitives/charts/ChartCard.tsx b/apps/webapp/app/components/primitives/charts/ChartCard.tsx
index 507092e40..367bb703e 100644
--- a/apps/webapp/app/components/primitives/charts/ChartCard.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartCard.tsx
@@ -62,7 +62,7 @@ export function ChartCard({
                       aria-label="Maximize chart"
                       leadingIconClassName="text-text-dimmed group-hover/button:text-text-bright"
                       onClick={() => setIsFullscreen(true)}
-                      className="!px-1"
+                      className="px-1!"
                     />
                   </span>
                 }
diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index 2efb6ac4d..b5c562e0f 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -197,14 +197,14 @@ export function ChartLegendCompound({
       </div>
 
       {/* Separator */}
-      <div className="mx-2 my-1 shrink-0 border-t border-charcoal-750" />
+      <div className="mx-2 my-1 shrink-0 border-t border-grid-dimmed" />
 
       {/* Legend items - scrollable when scrollable prop is true */}
       <div
         className={cn(
           "flex flex-col",
           scrollable &&
-            "min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+            "min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         )}
       >
         {legendItems.visible.map((item) => {
@@ -251,7 +251,7 @@ export function ChartLegendCompound({
                   content={item.label}
                   side="top"
                   disableHoverableContent
-                  className="max-w-xs break-words"
+                  className="max-w-xs wrap-break-word"
                   buttonClassName="cursor-default min-w-0"
                 />
                 <span
@@ -303,7 +303,7 @@ type ViewAllDataRowProps = {
 function ViewAllDataRow({ remainingCount, onViewAll }: ViewAllDataRowProps) {
   return (
     <div
-      className="relative flex w-full cursor-pointer items-center justify-between gap-2 rounded px-2 py-1 transition hover:bg-charcoal-850"
+      className="relative flex w-full cursor-pointer items-center justify-between gap-2 rounded px-2 py-1 transition hover:bg-background-dimmed"
       onClick={onViewAll}
       role="button"
       tabIndex={0}
@@ -316,7 +316,7 @@ function ViewAllDataRow({ remainingCount, onViewAll }: ViewAllDataRowProps) {
     >
       <div className="relative flex w-full items-center justify-between gap-3">
         <div className="flex items-center gap-1.5">
-          <div className="w-1 shrink-0 self-stretch rounded-[2px] border border-charcoal-600" />
+          <div className="w-1 shrink-0 self-stretch rounded-[2px] border border-border-bright" />
           <span className="text-text-dimmed tabular-nums">{remainingCount} more…</span>
         </div>
         <span className="self-start text-indigo-500">View all</span>
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 1edd5a235..58229bc5e 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -114,7 +114,7 @@ export function ChartLineRenderer({
     ticks: xAxisTicks,
     interval: "preserveStartEnd" as const,
     tick: {
-      fill: "#878C99",
+      fill: "var(--color-text-dimmed)",
       fontSize: 11,
       style: { fontVariantNumeric: "tabular-nums" },
     },
@@ -127,7 +127,7 @@ export function ChartLineRenderer({
     tickMargin: 8,
     width: computedYAxisWidth,
     tick: {
-      fill: "#878C99",
+      fill: "var(--color-text-dimmed)",
       fontSize: 11,
       style: { fontVariantNumeric: "tabular-nums" },
     },
@@ -160,7 +160,7 @@ export function ChartLineRenderer({
         }}
         onMouseLeave={handleMouseLeave}
       >
-        <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
+        <CartesianGrid vertical={false} stroke="var(--color-grid-bright)" strokeDasharray="3 3" />
         <XAxis {...xAxisConfig} />
         <YAxis {...yAxisConfig} />
         {/* When legend is shown below, render tooltip with cursor only (no content popup) */}
@@ -210,7 +210,7 @@ export function ChartLineRenderer({
       }}
       onMouseLeave={handleMouseLeave}
     >
-      <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
+      <CartesianGrid vertical={false} stroke="var(--color-grid-bright)" strokeDasharray="3 3" />
       <XAxis {...xAxisConfig} />
       <YAxis {...yAxisConfig} />
       {/* When legend is shown below, render tooltip with cursor only (no content popup) */}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
index 9733801da..8e7ee031f 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -136,7 +136,7 @@ function ChartBarLoadingBackground() {
                 return (
                   <motion.div
                     key={i}
-                    className="flex-1 rounded-sm bg-charcoal-750/50"
+                    className="flex-1 rounded-sm bg-background-hover/50"
                     style={{ height: `${height}%` }}
                     initial={{ height: 0, opacity: 0 }}
                     animate={{ height: `${height}%`, opacity: 1 }}
@@ -175,8 +175,8 @@ function ChartBarLoadingBackground() {
                     delay: 0.3 + i * 0.08,
                   }}
                 >
-                  <div className="h-5 w-2 rounded-sm bg-charcoal-750/50" />
-                  <div className="h-5 w-full rounded-sm bg-charcoal-750/50" />
+                  <div className="h-5 w-2 rounded-sm bg-background-hover/50" />
+                  <div className="h-5 w-full rounded-sm bg-background-hover/50" />
                 </motion.div>
               ))}
             </motion.div>
@@ -263,7 +263,7 @@ function ChartLineLoadingBackground() {
       />
       <motion.path
         d={generateSmoothPath(points)}
-        stroke="#212327"
+        stroke="var(--color-background-hover)"
         strokeWidth="1"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -291,12 +291,12 @@ function ChartLineLoadingBackground() {
         >
           <defs>
             <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#212327" stopOpacity={0.3} />
-              <stop offset="100%" stopColor="#212327" stopOpacity={0} />
+              <stop offset="0%" stopColor="var(--color-background-hover)" stopOpacity={0.3} />
+              <stop offset="100%" stopColor="var(--color-background-hover)" stopOpacity={0} />
             </linearGradient>
             <linearGradient id="secondAreaGradient" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#212327" stopOpacity={0.3} />
-              <stop offset="100%" stopColor="#212327" stopOpacity={0} />
+              <stop offset="0%" stopColor="var(--color-background-hover)" stopOpacity={0.3} />
+              <stop offset="100%" stopColor="var(--color-background-hover)" stopOpacity={0} />
             </linearGradient>
           </defs>
 
@@ -331,8 +331,8 @@ function ChartLineLoadingBackground() {
               delay: 0.3 + i * 0.08,
             }}
           >
-            <div className="h-5 w-2 rounded-sm bg-charcoal-750/50" />
-            <div className="h-5 w-full rounded-sm bg-charcoal-750/50" />
+            <div className="h-5 w-2 rounded-sm bg-background-hover/50" />
+            <div className="h-5 w-full rounded-sm bg-background-hover/50" />
           </motion.div>
         ))}
       </motion.div>
diff --git a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
index 5b2b1b6ce..2b8f630d8 100644
--- a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
@@ -174,7 +174,7 @@ function ChartRootInner({
           config={config}
           className={cn(
             "h-full w-full",
-            fillContainer && "!aspect-auto",
+            fillContainer && "aspect-auto!",
             enableZoom &&
               "[&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
           )}
diff --git a/apps/webapp/app/components/primitives/charts/ChartZoom.tsx b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
index 3f797fc87..375a133f4 100644
--- a/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
@@ -52,7 +52,7 @@ export function ChartZoom({ syncWithDateRange = false, minDataPoints = 3 }: Char
       {inspectionLine && (
         <ReferenceLine
           x={inspectionLine}
-          stroke="#D7D9DD"
+          stroke="var(--color-text-bright)"
           strokeWidth={2}
           isFront={true}
           onClick={(e: any) => {
@@ -68,7 +68,7 @@ export function ChartZoom({ syncWithDateRange = false, minDataPoints = 3 }: Char
           x1={refAreaLeft}
           x2={refAreaRight}
           strokeOpacity={0.4}
-          fill="#3B82F6"
+          fill="var(--color-pending)"
           fillOpacity={0.2}
         />
       )}
@@ -138,7 +138,7 @@ export function ZoomTooltip({
         {message}
         <div
           className={cn(
-            "absolute -top-[5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45",
+            "absolute top-[-5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45",
             invalidSelection
               ? "border-l border-t border-amber-800 bg-amber-950"
               : "border-l border-t border-blue-800 bg-[#1B2334]"
@@ -153,7 +153,7 @@ export function ZoomTooltip({
 
   return (
     <div
-      className="absolute whitespace-nowrap rounded border border-charcoal-600 bg-charcoal-700 px-2 py-1 text-xxs tabular-nums text-text-bright"
+      className="absolute whitespace-nowrap rounded border border-border-bright bg-background-raised px-2 py-1 text-xxs tabular-nums text-text-bright"
       style={{
         left: coordinate?.x,
         top: viewBox?.height ? viewBox.height + 13 : 0,
@@ -161,7 +161,7 @@ export function ZoomTooltip({
       }}
     >
       {label}
-      <div className="absolute -top-[5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 border-l border-t border-charcoal-600 bg-charcoal-700" />
+      <div className="absolute top-[-5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 border-l border-t border-border-bright bg-background-raised" />
     </div>
   );
 }
diff --git a/apps/webapp/app/components/primitives/charts/statusColors.ts b/apps/webapp/app/components/primitives/charts/statusColors.ts
index 2ae7470a2..8439b4d32 100644
--- a/apps/webapp/app/components/primitives/charts/statusColors.ts
+++ b/apps/webapp/app/components/primitives/charts/statusColors.ts
@@ -1,17 +1,18 @@
-/** Shared status → color map for the task/agent activity charts. */
+/** Shared status → color map for the task/agent activity charts.
+ * Values are CSS variables so they follow the theme; CSS contexts only. */
 export const STATUS_COLOR: Record<string, string> = {
   // Run-status groups
-  COMPLETED: "#28BF5C",
-  RUNNING: "#3B82F6",
-  FAILED: "#E11D48",
-  CANCELED: "#878C99",
+  COMPLETED: "var(--color-success)",
+  RUNNING: "var(--color-pending)",
+  FAILED: "var(--color-error)",
+  CANCELED: "var(--color-text-dimmed)",
   // Agent session statuses
-  ACTIVE: "#3B82F6",
-  CLOSED: "#28BF5C",
-  EXPIRED: "#878C99",
+  ACTIVE: "var(--color-pending)",
+  CLOSED: "var(--color-success)",
+  EXPIRED: "var(--color-text-dimmed)",
 };
 
-export const STATUS_COLOR_FALLBACK = "#9CA3AF";
+export const STATUS_COLOR_FALLBACK = "var(--color-text-dimmed)";
 
 export function statusColor(status: string): string {
   return STATUS_COLOR[status] ?? STATUS_COLOR_FALLBACK;
diff --git a/apps/webapp/app/components/query/QueryEditor.tsx b/apps/webapp/app/components/query/QueryEditor.tsx
index 8520d2a7a..37747a77d 100644
--- a/apps/webapp/app/components/query/QueryEditor.tsx
+++ b/apps/webapp/app/components/query/QueryEditor.tsx
@@ -241,7 +241,7 @@ const QueryEditorForm = forwardRef<
   );
 
   return (
-    <div className="flex h-full flex-col gap-2 bg-charcoal-900 pb-2">
+    <div className="flex h-full flex-col gap-2 bg-background-deep pb-2">
       <TSQLEditor
         defaultValue={query}
         onChange={setQuery}
@@ -327,7 +327,7 @@ const QueryEditorForm = forwardRef<
             shortcut={{ modifiers: ["mod"], key: "enter", enabledOnInputElements: true }}
             className={
               isLoading
-                ? "relative !text-transparent [&_*]:!border-transparent [&_*]:!text-transparent"
+                ? "relative text-transparent! **:border-transparent! **:text-transparent!"
                 : undefined
             }
           >
@@ -614,7 +614,10 @@ export function QueryEditor({
     <PageContainer>
       {renderNavBar()}
       <PageBody scrollable={false}>
-        <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full bg-charcoal-800">
+        <ResizablePanelGroup
+          orientation="horizontal"
+          className="h-full max-h-full bg-background-bright"
+        >
           <ResizablePanel id="query-main" className="h-full">
             <ResizablePanelGroup orientation="vertical" className="h-full overflow-hidden">
               {/* Query editor - isolated component to prevent re-renders */}
@@ -644,7 +647,7 @@ export function QueryEditor({
               <ResizablePanel
                 id="query-results"
                 min="200px"
-                className="overflow-hidden bg-charcoal-800"
+                className="overflow-hidden bg-background-bright"
               >
                 <ClientTabs
                   value={resultsView}
@@ -737,7 +740,7 @@ export function QueryEditor({
                         {results.generatedSql && (
                           <div>
                             <Header3 className="mb-2">Generated ClickHouse SQL</Header3>
-                            <div className="overflow-auto rounded border border-grid-dimmed bg-charcoal-900 p-3">
+                            <div className="overflow-auto rounded border border-grid-dimmed bg-background-deep p-3">
                               <pre className="whitespace-pre font-mono text-xs text-text-bright">
                                 {results.generatedSql}
                               </pre>
@@ -746,7 +749,7 @@ export function QueryEditor({
                         )}
                         <div className="flex min-h-0 flex-1 flex-col">
                           <Header3 className="mb-2">Query Execution Plan</Header3>
-                          <div className="min-h-0 flex-1 overflow-auto rounded border border-grid-dimmed bg-charcoal-900 p-3">
+                          <div className="min-h-0 flex-1 overflow-auto rounded border border-grid-dimmed bg-background-deep p-3">
                             <pre className="whitespace-pre font-mono text-xs text-text-bright">
                               {results.explainOutput}
                             </pre>
@@ -804,7 +807,7 @@ export function QueryEditor({
                       </div>
                     ) : (
                       <div className="flex h-full flex-col items-center justify-center gap-3">
-                        <IconChartHistogram className="size-16 text-charcoal-650" />
+                        <IconChartHistogram className="size-16 text-secondary" />
                         <Paragraph className="max-w-48 text-center text-text-dimmed">
                           Run a query to visualize the results.
                         </Paragraph>
@@ -853,7 +856,7 @@ export function QueryEditor({
                       </>
                     ) : (
                       <div className="flex h-full flex-col items-center justify-center gap-3">
-                        <IconChartHistogram className="size-16 text-charcoal-650" />
+                        <IconChartHistogram className="size-16 text-secondary" />
                         <Paragraph className="max-w-48 text-center text-text-dimmed">
                           Run a query to visualize the results.
                         </Paragraph>
@@ -902,7 +905,7 @@ export function QueryEditor({
                       </>
                     ) : (
                       <div className="flex h-full flex-col items-center justify-center gap-3">
-                        <IconChartHistogram className="size-16 text-charcoal-650" />
+                        <IconChartHistogram className="size-16 text-secondary" />
                         <Paragraph className="max-w-48 text-center text-text-dimmed">
                           Run a query to visualize the results.
                         </Paragraph>
@@ -1078,7 +1081,7 @@ function ExportResultsButton({
       <PopoverArrowTrigger variant="minimal" isOpen={isOpen}>
         Export
       </PopoverArrowTrigger>
-      <PopoverContent className="min-w-[10rem] p-1" align="end">
+      <PopoverContent className="min-w-40 p-1" align="end">
         <div className="flex flex-col gap-1">
           <PopoverMenuItem
             icon={Clipboard}
diff --git a/apps/webapp/app/components/run/RunTimeline.tsx b/apps/webapp/app/components/run/RunTimeline.tsx
index 839d94417..53ddb321f 100644
--- a/apps/webapp/app/components/run/RunTimeline.tsx
+++ b/apps/webapp/app/components/run/RunTimeline.tsx
@@ -413,7 +413,7 @@ function EventMarker({
     case "start-cap":
       return (
         <>
-          <div className={cn("h-full w-[0.4375rem] border-b", borderClass)} />
+          <div className={cn("h-full w-1.75 border-b", borderClass)} />
           <div className={cn("relative h-full w-px", bgClass)}>
             {state === "inprogress" && (
               <div
@@ -441,9 +441,7 @@ function EventMarker({
               />
             )}
           </div>
-          <div
-            className={cn("size-[0.3125rem] min-h-[0.3125rem] rounded-full border", borderClass)}
-          />
+          <div className={cn("size-1.25 min-h-1.25 rounded-full border", borderClass)} />
           <div className={cn("relative h-full w-px", bgClass)}>
             {state === "inprogress" && (
               <div
@@ -458,10 +456,10 @@ function EventMarker({
         </>
       );
     case "dot-solid":
-      return <div className={cn("size-[0.3125rem] rounded-full", bgClass)} />;
+      return <div className={cn("size-1.25 rounded-full", bgClass)} />;
     case "start-cap-thick":
       return (
-        <div className={cn("relative h-full w-[0.4375rem] rounded-t-[0.125rem]", bgClass)}>
+        <div className={cn("relative h-full w-1.75 rounded-t-xs", bgClass)}>
           {state === "inprogress" && (
             <div
               className="absolute inset-0 h-full w-full animate-tile-scroll-offset opacity-30"
@@ -474,9 +472,9 @@ function EventMarker({
         </div>
       );
     case "end-cap-thick":
-      return <div className={cn("h-full w-[0.4375rem] rounded-b-[0.125rem]", bgClass)} />;
+      return <div className={cn("h-full w-1.75 rounded-b-xs", bgClass)} />;
     default:
-      return <div className={cn("size-[0.3125rem] rounded-full bg-yellow-500")} />;
+      return <div className={cn("size-1.25 rounded-full bg-yellow-500")} />;
   }
 }
 
@@ -527,16 +525,14 @@ function LineMarker({
       break;
     case "inprogress":
       containerClass =
-        style === "normal"
-          ? "rounded-b-[0.125rem] bg-pending"
-          : "rounded-b-[0.125rem] bg-text-dimmed";
+        style === "normal" ? "rounded-b-xs bg-pending" : "rounded-b-xs bg-text-dimmed";
       break;
   }
 
   switch (variant) {
     case "normal":
       return (
-        <div className={cn("relative w-[0.4375rem]", containerClass)}>
+        <div className={cn("relative w-1.75", containerClass)}>
           {state === "inprogress" && (
             <div
               className="absolute inset-0 h-full w-full animate-tile-scroll opacity-30"
@@ -563,7 +559,7 @@ function LineMarker({
         </div>
       );
     default:
-      return <div className="w-px rounded-[0.125rem] bg-text-dimmed" />;
+      return <div className="w-px rounded-xs bg-text-dimmed" />;
   }
 }
 
diff --git a/apps/webapp/app/components/runs/v3/AIFilterInput.tsx b/apps/webapp/app/components/runs/v3/AIFilterInput.tsx
index f2a01d27c..03b70499e 100644
--- a/apps/webapp/app/components/runs/v3/AIFilterInput.tsx
+++ b/apps/webapp/app/components/runs/v3/AIFilterInput.tsx
@@ -100,7 +100,7 @@ export function AIFilterInput() {
                 "disabled:text-text-dimmed/50",
                 isFocused && "placeholder:text-text-dimmed/70"
               )}
-              containerClassName="has-[:disabled]:opacity-100"
+              containerClassName="has-disabled:opacity-100"
               onKeyDown={(e) => {
                 if (e.key === "Enter" && text.trim() && !isLoading) {
                   e.preventDefault();
@@ -145,7 +145,7 @@ export function AIFilterInput() {
                           type="button"
                           onMouseDown={(e) => e.preventDefault()}
                           onClick={() => setText("")}
-                          className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed transition hover:bg-charcoal-600 hover:text-text-bright"
+                          className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed transition hover:bg-surface-control hover:text-text-bright"
                         >
                           <XMarkIcon className="size-3" />
                         </button>
@@ -206,7 +206,7 @@ function ErrorPopover({
       <PopoverContent
         align="start"
         side="bottom"
-        className="w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)] max-w-[var(--radix-popover-trigger-width)] border border-error/20 bg-[#2F1D24] px-3 py-2 text-xs text-text-dimmed"
+        className="w-(--radix-popover-trigger-width) min-w-(--radix-popover-trigger-width) max-w-(--radix-popover-trigger-width) border border-error/20 bg-[#2F1D24] px-3 py-2 text-xs text-text-dimmed"
       >
         {error}
       </PopoverContent>
diff --git a/apps/webapp/app/components/runs/v3/BatchFilters.tsx b/apps/webapp/app/components/runs/v3/BatchFilters.tsx
index 83766ce2d..3dff30204 100644
--- a/apps/webapp/app/components/runs/v3/BatchFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/BatchFilters.tsx
@@ -198,7 +198,7 @@ function PermanentStatusFilter() {
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     <div className="grid size-4 place-items-center">
                       <div className="size-[75%] rounded-full border-2 border-text-bright" />
                     </div>
@@ -206,7 +206,7 @@ function PermanentStatusFilter() {
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by status</span>
                   <ShortcutKey
@@ -283,13 +283,13 @@ function PermanentBatchIdFilter() {
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1.5 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1.5 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     <Squares2X2Icon className="size-3.5" />
                     <span>Batch ID</span>
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by batch ID</span>
                   <ShortcutKey
diff --git a/apps/webapp/app/components/runs/v3/DeploymentStatus.tsx b/apps/webapp/app/components/runs/v3/DeploymentStatus.tsx
index a2a6d199a..f4142cffc 100644
--- a/apps/webapp/app/components/runs/v3/DeploymentStatus.tsx
+++ b/apps/webapp/app/components/runs/v3/DeploymentStatus.tsx
@@ -78,14 +78,14 @@ export function DeploymentStatusIcon({
 export function deploymentStatusClassNameColor(status: WorkerDeploymentStatus): string {
   switch (status) {
     case "PENDING":
-      return "text-charcoal-500";
+      return "text-text-faint";
     case "INSTALLING":
     case "BUILDING":
     case "DEPLOYING":
       return "text-pending";
     case "TIMED_OUT":
     case "CANCELED":
-      return "text-charcoal-500";
+      return "text-text-faint";
     case "DEPLOYED":
       return "text-success";
     case "FAILED":
diff --git a/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx b/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx
index eba77bec5..bfafaaf91 100644
--- a/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx
@@ -52,7 +52,7 @@ export function PromptSpanDetails({
 
   return (
     <div className="flex h-full flex-col overflow-hidden">
-      <div className="shrink-0 overflow-x-auto px-3 py-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="shrink-0 overflow-x-auto px-3 py-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <TabContainer>
           {availableTabs.map((t) => (
             <TabButton
@@ -70,7 +70,7 @@ export function PromptSpanDetails({
         </TabContainer>
       </div>
 
-      <div className="scrollbar-gutter-stable min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="scrollbar-gutter-stable min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         {tab === "overview" && (
           <div className="flex flex-col px-3">
             {startTime && (
@@ -97,7 +97,7 @@ export function PromptSpanDetails({
             {promptData.text && (
               <div className="flex flex-col gap-1.5 py-2.5">
                 <Header3>Resolved content</Header3>
-                <div className="rounded-md border border-grid-bright bg-charcoal-750/50 px-3.5 py-2">
+                <div className="rounded-md border border-grid-bright bg-background-hover/50 px-3.5 py-2">
                   <div className="font-sans text-sm font-normal text-text-dimmed streamdown-container">
                     <Suspense
                       fallback={
@@ -131,7 +131,7 @@ export function PromptSpanDetails({
 
         {tab === "template" && hasTemplate && (
           <div className="px-3 py-2.5">
-            <div className="rounded-md border border-grid-bright bg-charcoal-750/50 px-3.5 py-2">
+            <div className="rounded-md border border-grid-bright bg-background-hover/50 px-3.5 py-2">
               <div className="font-sans text-sm font-normal text-text-dimmed streamdown-container">
                 <Suspense
                   fallback={<span className="whitespace-pre-wrap">{promptData.template!}</span>}
diff --git a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
index d165afcb0..86747f9e2 100644
--- a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
@@ -236,7 +236,7 @@ function ReplayForm({
         className="-mx-3 mt-3 w-auto flex-1 border-b border-t border-grid-dimmed"
       >
         <ResizablePanel id="payload" min="300px">
-          <div className="rounded-smbg-charcoal-900 mb-3 h-full min-h-40 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="mb-3 h-full min-h-40 overflow-y-auto rounded-sm bg-background-deep scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <JSONEditor
               className="h-full"
               autoFocus
@@ -299,7 +299,7 @@ function ReplayForm({
         </ResizablePanel>
         <ResizableHandle />
         <ResizablePanel id="test-task-options" min="300px" default="300px" max="360px">
-          <div className="h-full overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="h-full overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <Fieldset className="px-3 py-3">
               <Hint>
                 Options enable you to control the execution behavior of your task.{" "}
@@ -411,7 +411,7 @@ function ReplayForm({
                         <SelectItem
                           key={queueItem.value}
                           value={queueItem.value}
-                          className="max-w-[var(--popover-anchor-width)]"
+                          className="max-w-(--popover-anchor-width)"
                           icon={
                             queueItem.type === "task" ? (
                               <TaskIcon className="size-4 shrink-0 text-blue-500" />
diff --git a/apps/webapp/app/components/runs/v3/RunFilters.tsx b/apps/webapp/app/components/runs/v3/RunFilters.tsx
index 79ff2a73c..f5980d9e5 100644
--- a/apps/webapp/app/components/runs/v3/RunFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/RunFilters.tsx
@@ -673,7 +673,7 @@ function PermanentStatusFilter() {
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     <div className="grid size-4 place-items-center">
                       <div className="size-[75%] rounded-full border-2 border-text-bright" />
                     </div>
@@ -681,7 +681,7 @@ function PermanentStatusFilter() {
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by status</span>
                   <ShortcutKey
@@ -852,13 +852,13 @@ function PermanentTasksFilter({ possibleTasks }: Pick<RunFiltersProps, "possible
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1.5 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1.5 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     {filterIcon("tasks")}
                     <span>Tasks</span>
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by task</span>
                   <ShortcutKey
@@ -1704,7 +1704,7 @@ function RootOnlyToggle({ defaultValue }: { defaultValue: boolean }) {
           }}
         />
       </Ariakit.TooltipAnchor>
-      <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+      <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
         <div className="flex items-center gap-2">
           <span>Toggle root only</span>
           <ShortcutKey className="size-4 flex-none" shortcut={rootOnlyShortcut} variant="small" />
diff --git a/apps/webapp/app/components/runs/v3/RunStatusCellTooltip.tsx b/apps/webapp/app/components/runs/v3/RunStatusCellTooltip.tsx
index fad6b15bc..789572d7d 100644
--- a/apps/webapp/app/components/runs/v3/RunStatusCellTooltip.tsx
+++ b/apps/webapp/app/components/runs/v3/RunStatusCellTooltip.tsx
@@ -56,7 +56,7 @@ function ChildStatusBreakdown({
   orderedChildStatuses: { status: NextRunListItem["status"]; count: number }[];
 }) {
   return (
-    <div className="flex min-w-[10rem] flex-col gap-1 p-1">
+    <div className="flex min-w-40 flex-col gap-1 p-1">
       <p className="mb-1 text-xs text-text-dimmed">Child run statuses</p>
       <AnimatePresence initial={false} mode="popLayout">
         {orderedChildStatuses.map((entry) => (
diff --git a/apps/webapp/app/components/runs/v3/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx
index 14baeca1a..3d6c6751c 100644
--- a/apps/webapp/app/components/runs/v3/RunTag.tsx
+++ b/apps/webapp/app/components/runs/v3/RunTag.tsx
@@ -26,8 +26,8 @@ export function RunTag({
     if (typeof tagResult === "string") {
       return (
         <>
-          <img src={tagLeftPath} alt="" className="block h-full w-[0.5625rem]" />
-          <span className="flex items-center rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed group-hover:rounded-r-none group-has-[[href]]:group-hover:border-charcoal-650 group-has-[[href]]:group-hover:text-charcoal-300">
+          <img src={tagLeftPath} alt="" className="block h-full w-2.25" />
+          <span className="flex items-center rounded-r-sm border-y border-r border-grid-bright bg-background-bright pr-1.5 text-text-dimmed group-hover:rounded-r-none group-hover:group-has-[[href]]:border-border-bright group-hover:group-has-[[href]]:text-charcoal-300">
             {tag}
           </span>
         </>
@@ -35,11 +35,11 @@ export function RunTag({
     } else {
       return (
         <>
-          <img src={tagLeftPath} alt="" className="block h-full w-[0.5625rem]" />
-          <span className="flex items-center border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed group-has-[[href]]:group-hover:border-charcoal-650 group-has-[[href]]:group-hover:text-charcoal-300">
+          <img src={tagLeftPath} alt="" className="block h-full w-2.25" />
+          <span className="flex items-center border-y border-r border-grid-bright bg-background-bright pr-1.5 text-text-dimmed group-hover:group-has-[[href]]:border-border-bright group-hover:group-has-[[href]]:text-charcoal-300">
             {tagResult.key}
           </span>
-          <span className="flex items-center whitespace-nowrap rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-750 px-1.5 text-text-dimmed group-hover:rounded-r-none group-has-[[href]]:group-hover:border-charcoal-650 group-has-[[href]]:group-hover:bg-charcoal-700 group-has-[[href]]:group-hover:text-charcoal-300">
+          <span className="flex items-center whitespace-nowrap rounded-r-sm border-y border-r border-grid-bright bg-background-hover px-1.5 text-text-dimmed group-hover:rounded-r-none group-hover:group-has-[[href]]:border-border-bright group-hover:group-has-[[href]]:bg-background-raised group-hover:group-has-[[href]]:text-charcoal-300">
             {tagResult.value}
           </span>
         </>
@@ -99,11 +99,11 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
           onClick={copy}
           onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-charcoal-650 bg-charcoal-750",
+            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover",
             isHovered ? "flex" : "hidden",
             copied
               ? "text-green-500"
-              : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+              : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
           )}
         >
           {copied ? (
@@ -144,9 +144,9 @@ function DeleteButton({
           onClick={handleDelete}
           onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-charcoal-650 bg-charcoal-750",
+            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover",
             isHovered ? "flex" : "hidden",
-            "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-rose-400"
+            "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-rose-400"
           )}
         >
           <XIcon className="size-3.5" />
diff --git a/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx b/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx
index e0fb819c8..de1c6b3ad 100644
--- a/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx
@@ -113,7 +113,7 @@ function PermanentTypeFilter() {
                 variant="secondary/small"
               />
             </Ariakit.TooltipAnchor>
-            <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+            <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
               <div className="flex items-center gap-2">
                 <span>Filter by type</span>
                 <ShortcutKey className="size-4 flex-none" shortcut={typeShortcut} variant="small" />
@@ -203,7 +203,7 @@ function PermanentTaskFilter({ possibleTasks }: { possibleTasks: string[] }) {
                 variant="secondary/small"
               />
             </Ariakit.TooltipAnchor>
-            <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+            <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
               <div className="flex items-center gap-2">
                 <span>Filter by task</span>
                 <ShortcutKey className="size-4 flex-none" shortcut={taskShortcut} variant="small" />
diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index 17a84f711..7069b2a4c 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -424,7 +424,7 @@ export function TimeFilter({
                 />
               </Ariakit.TooltipAnchor>
               {shortcut && (
-                <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+                <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                   <div className="flex items-center gap-2">
                     <span>Filter by time period</span>
                     <ShortcutKey className="size-4 flex-none" shortcut={shortcut} variant="small" />
@@ -680,10 +680,10 @@ export function TimeDropdown({
                 {/* Custom duration row */}
                 <div
                   className={cn(
-                    "col-span-4 flex h-[1.8rem] w-full items-center gap-2 rounded border bg-charcoal-750 py-0.5 pl-0 pr-2 transition-colors",
+                    "col-span-4 flex h-[1.8rem] w-full items-center gap-2 rounded border bg-background-hover py-0.5 pl-0 pr-2 transition-colors",
                     activeSection === "duration" && selectedPeriod === "custom"
                       ? "border-indigo-500 "
-                      : "border-charcoal-650 hover:border-charcoal-600",
+                      : "border-border-bright hover:border-border-bright",
                     validationError &&
                       activeSection === "duration" &&
                       selectedPeriod === "custom" &&
@@ -709,7 +709,7 @@ export function TimeDropdown({
                       setActiveSection("duration");
                       setValidationError(null);
                     }}
-                    className="h-full w-full translate-y-px border-none bg-transparent py-0 pl-2 pr-0 text-xs leading-none text-text-bright outline-none placeholder:text-text-dimmed focus:outline-none focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                    className="h-full w-full translate-y-px border-none bg-transparent py-0 pl-2 pr-0 text-xs leading-none text-text-bright outline-hidden placeholder:text-text-dimmed focus:outline-hidden focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                   />
                   <div className="flex items-center gap-2">
                     {timeUnits.map((unit) => (
diff --git a/apps/webapp/app/components/runs/v3/SpanHorizontalTimeline.tsx b/apps/webapp/app/components/runs/v3/SpanHorizontalTimeline.tsx
index b4acf2a1e..85cee02a1 100644
--- a/apps/webapp/app/components/runs/v3/SpanHorizontalTimeline.tsx
+++ b/apps/webapp/app/components/runs/v3/SpanHorizontalTimeline.tsx
@@ -31,20 +31,20 @@ export function SpanHorizontalTimeline({
           <span className="shrink-0 tabular-nums text-xxs text-text-dimmed @[350px]/timeline:text-xs">
             <DateTimeAccurate date={startDate} showTooltip={false} />
           </span>
-          <div className="ml-2 h-3 w-px bg-charcoal-600" />
-          <div className="h-px flex-1 bg-charcoal-600" />
+          <div className="ml-2 h-3 w-px bg-surface-control" />
+          <div className="h-px flex-1 bg-surface-control" />
           {duration != null && (
             <span className="shrink-0 tabular-nums px-2 text-xxs text-text-dimmed @[350px]/timeline:text-xs">
               {formatSpanDuration(duration)}
             </span>
           )}
-          <div className="h-px flex-1 bg-charcoal-600" />
-          <div className="mr-2 h-3 w-px bg-charcoal-600" />
+          <div className="h-px flex-1 bg-surface-control" />
+          <div className="mr-2 h-3 w-px bg-surface-control" />
           <span className="shrink-0 tabular-nums text-xxs text-text-dimmed @[350px]/timeline:text-xs">
             {endDate ? (
               <DateTimeAccurate date={endDate} previousDate={startDate} showTooltip={false} />
             ) : (
-              <span className="text-charcoal-500">—</span>
+              <span className="text-text-faint">—</span>
             )}
           </span>
         </div>
diff --git a/apps/webapp/app/components/runs/v3/SpanTitle.tsx b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
index 2e0167cc8..e01b1599c 100644
--- a/apps/webapp/app/components/runs/v3/SpanTitle.tsx
+++ b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
@@ -92,7 +92,7 @@ function SpanPill({ text, icon }: { text: string; icon?: string }) {
   const hasIcon = icon && tablerIcons.has(icon);
 
   return (
-    <span className="inline-flex items-center gap-0.5 rounded-full border border-charcoal-700 bg-charcoal-850 px-1.5 py-px text-xxs text-text-dimmed">
+    <span className="inline-flex items-center gap-0.5 rounded-full border border-grid-bright bg-background-dimmed px-1.5 py-px text-xxs text-text-dimmed">
       {hasIcon && (
         <svg className="size-3 stroke-[1.5] text-text-dimmed/70">
           <use xlinkHref={`${tablerSpritePath}#${icon}`} />
@@ -113,7 +113,7 @@ export function SpanCodePathAccessory({
   return (
     <code
       className={cn(
-        "inline-flex items-center gap-0.5 truncate rounded border border-charcoal-700 bg-charcoal-800 px-1.5 py-0.5 font-mono text-text-dimmed",
+        "inline-flex items-center gap-0.5 truncate rounded border border-grid-bright bg-background-bright px-1.5 py-0.5 font-mono text-text-dimmed",
         className
       )}
     >
@@ -174,7 +174,7 @@ export function eventBackgroundClassName(event: RunEvent) {
   }
 
   if (event.isCancelled) {
-    return "bg-charcoal-600";
+    return "bg-surface-control";
   }
 
   switch (event.level) {
@@ -204,7 +204,7 @@ export function eventBorderClassName(event: RunEvent) {
   }
 
   if (event.isCancelled) {
-    return "border-charcoal-600";
+    return "border-border-bright";
   }
 
   switch (event.level) {
@@ -248,7 +248,7 @@ function backgroundClassNameForVariant(variant: TaskEventStyle["variant"], isPar
       return "bg-success";
     }
     default: {
-      return "bg-charcoal-500";
+      return "bg-surface-control-active";
     }
   }
 }
@@ -262,7 +262,7 @@ function borderClassNameForVariant(variant: TaskEventStyle["variant"], isPartial
       return "border-success";
     }
     default: {
-      return "border-charcoal-500";
+      return "border-border-brightest";
     }
   }
 }
diff --git a/apps/webapp/app/components/runs/v3/TaskRunAttemptStatus.tsx b/apps/webapp/app/components/runs/v3/TaskRunAttemptStatus.tsx
index e88eec528..36333f6d9 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunAttemptStatus.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunAttemptStatus.tsx
@@ -79,22 +79,22 @@ export function TaskRunAttemptStatusIcon({
 
 export function runAttemptStatusClassNameColor(status: ExtendedTaskAttemptStatus | null): string {
   if (status === null) {
-    return "text-charcoal-500";
+    return "text-text-faint";
   }
 
   switch (status) {
     case "ENQUEUED":
-      return "text-charcoal-500";
+      return "text-text-faint";
     case "PENDING":
-      return "text-charcoal-500";
+      return "text-text-faint";
     case "EXECUTING":
       return "text-pending";
     case "PAUSED":
-      return "text-charcoal-500";
+      return "text-text-faint";
     case "FAILED":
       return "text-error";
     case "CANCELED":
-      return "text-charcoal-500";
+      return "text-text-faint";
     case "COMPLETED":
       return "text-success";
     default: {
diff --git a/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
index 73363e0da..9d20f5a52 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
@@ -204,7 +204,7 @@ export function runStatusClassNameColor(status: TaskRunStatus): string {
   switch (status) {
     case "PENDING":
     case "DELAYED":
-      return "text-charcoal-500";
+      return "text-text-faint";
     case "PENDING_VERSION":
     case "WAITING_FOR_DEPLOY":
       return "text-amber-500";
@@ -213,12 +213,12 @@ export function runStatusClassNameColor(status: TaskRunStatus): string {
     case "DEQUEUED":
       return "text-pending";
     case "WAITING_TO_RESUME":
-      return "text-charcoal-500";
+      return "text-text-faint";
     case "PAUSED":
       return "text-amber-300";
     case "CANCELED":
     case "EXPIRED":
-      return "text-charcoal-500";
+      return "text-text-faint";
     case "INTERRUPTED":
       return "text-error";
     case "COMPLETED_SUCCESSFULLY":
@@ -290,40 +290,41 @@ export const runStatusTitleFromStatus: Record<TaskRunStatus, RunFriendlyStatus>
 const titlesStatusesArray = Object.entries(runStatusTitleFromStatus);
 
 /**
- * Hex color for each TaskRunStatus, mirroring `runStatusClassNameColor` but as
- * concrete hex values for non-CSS contexts (e.g. chart series colors).
+ * Chart series color for each TaskRunStatus, mirroring `runStatusClassNameColor`.
+ * Values are CSS variables (defined in tailwind.css) so they follow the theme;
+ * only usable in CSS contexts (SVG attributes, chart config styles).
  */
-const RUN_STATUS_HEX_COLORS: Record<TaskRunStatus, string> = {
-  PENDING: "#5F6570", // charcoal-500
-  DELAYED: "#6B7580", // charcoal ~450
-  PENDING_VERSION: "#f59e0b", // amber-500
-  WAITING_FOR_DEPLOY: "#d97706", // amber-600
-  EXECUTING: "#3b82f6", // blue-500
-  RETRYING_AFTER_FAILURE: "#2f6fec", // blue ~550
-  DEQUEUED: "#4D8EF5", // blue ~475
-  WAITING_TO_RESUME: "#555D67", // charcoal ~550
-  PAUSED: "#fbbf24", // amber-400
-  CANCELED: "#78828C", // charcoal ~400
-  EXPIRED: "#848D96", // charcoal ~350
-  INTERRUPTED: "#D52C4D", // rose — evenly spaced (error)
-  COMPLETED_SUCCESSFULLY: "#28BF5C", // mint-500 (success)
-  COMPLETED_WITH_ERRORS: "#DE405C", // rose — evenly spaced (error)
-  SYSTEM_FAILURE: "#E7536C", // rose — evenly spaced (error)
-  CRASHED: "#cc193d", // rose — darkest (error)
-  TIMED_OUT: "#F0667B", // rose — lightest (error)
+const RUN_STATUS_CHART_COLORS: Record<TaskRunStatus, string> = {
+  PENDING: "var(--color-run-pending)",
+  DELAYED: "var(--color-run-delayed)",
+  PENDING_VERSION: "var(--color-run-pending-version)",
+  WAITING_FOR_DEPLOY: "var(--color-run-waiting-for-deploy)",
+  EXECUTING: "var(--color-run-executing)",
+  RETRYING_AFTER_FAILURE: "var(--color-run-retrying-after-failure)",
+  DEQUEUED: "var(--color-run-dequeued)",
+  WAITING_TO_RESUME: "var(--color-run-waiting-to-resume)",
+  PAUSED: "var(--color-run-paused)",
+  CANCELED: "var(--color-run-canceled)",
+  EXPIRED: "var(--color-run-expired)",
+  INTERRUPTED: "var(--color-run-interrupted)",
+  COMPLETED_SUCCESSFULLY: "var(--color-run-completed-successfully)",
+  COMPLETED_WITH_ERRORS: "var(--color-run-completed-with-errors)",
+  SYSTEM_FAILURE: "var(--color-run-system-failure)",
+  CRASHED: "var(--color-run-crashed)",
+  TIMED_OUT: "var(--color-run-timed-out)",
 };
 
 /**
- * Get the hex color for a run status value. Accepts either a raw TaskRunStatus
+ * Get the chart color for a run status value. Accepts either a raw TaskRunStatus
  * (e.g. "COMPLETED_SUCCESSFULLY") or a friendly name (e.g. "Completed").
  * Returns `undefined` when the value is not a recognised status.
  */
-export function getRunStatusHexColor(value: string): string | undefined {
+export function getRunStatusChartColor(value: string): string | undefined {
   if (isTaskRunStatus(value)) {
-    return RUN_STATUS_HEX_COLORS[value];
+    return RUN_STATUS_CHART_COLORS[value];
   }
   if (isRunFriendlyStatus(value)) {
-    return RUN_STATUS_HEX_COLORS[runStatusFromFriendlyTitle(value)];
+    return RUN_STATUS_CHART_COLORS[runStatusFromFriendlyTitle(value)];
   }
   return undefined;
 }
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index 069e0c891..001971178 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -204,7 +204,7 @@ export function TaskRunsTable({
                     <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
                       <TaskRunStatusCombo status={status} />
                     </div>
-                    <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
+                    <Paragraph variant="extra-small" className="text-wrap! text-text-dimmed">
                       {descriptionForTaskRunStatus(status)}
                     </Paragraph>
                   </div>
@@ -225,7 +225,7 @@ export function TaskRunsTable({
                     <RectangleStackIcon className="size-4 text-text-dimmed" />
                     <Header3>Queued duration</Header3>
                   </div>
-                  <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+                  <Paragraph variant="small" className="text-wrap! text-text-dimmed">
                     The amount of time from when the run was created to it starting to run.
                   </Paragraph>
                 </div>
@@ -233,7 +233,7 @@ export function TaskRunsTable({
                   <div className="mb-0.5 flex items-center gap-1.5">
                     <ClockIcon className="size-4 text-blue-500" /> <Header3>Run duration</Header3>
                   </div>
-                  <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+                  <Paragraph variant="small" className="text-wrap! text-text-dimmed">
                     The total amount of time from the run starting to it finishing. This includes
                     all time spent waiting.
                   </Paragraph>
@@ -243,7 +243,7 @@ export function TaskRunsTable({
                     <CpuChipIcon className="size-4 text-success" />
                     <Header3>Compute duration</Header3>
                   </div>
-                  <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+                  <Paragraph variant="small" className="text-wrap! text-text-dimmed">
                     The amount of compute time used in the run. This does not include time spent
                     waiting.
                   </Paragraph>
@@ -268,11 +268,11 @@ export function TaskRunsTable({
           <TableHeaderCell
             tooltip={
               <div className="max-w-xs p-1">
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                <Paragraph variant="small" className="text-wrap! text-text-dimmed" spacing>
                   When you want to trigger a task now, but have it run at a later time, you can use
                   the delay option.
                 </Paragraph>
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                <Paragraph variant="small" className="text-wrap! text-text-dimmed" spacing>
                   Runs that are delayed and have not been enqueued yet will display in the dashboard
                   with a “Delayed” status.
                 </Paragraph>
@@ -292,11 +292,11 @@ export function TaskRunsTable({
           <TableHeaderCell
             tooltip={
               <div className="max-w-xs p-1">
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                <Paragraph variant="small" className="text-wrap! text-text-dimmed" spacing>
                   You can set a TTL (time to live) when triggering a task, which will automatically
                   expire the run if it hasn’t started within the specified time.
                 </Paragraph>
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                <Paragraph variant="small" className="text-wrap! text-text-dimmed" spacing>
                   All runs in development have a default ttl of 10 minutes. You can disable this by
                   setting the ttl option.
                 </Paragraph>
@@ -316,10 +316,10 @@ export function TaskRunsTable({
           <TableHeaderCell
             tooltip={
               <div className="max-w-xs p-1">
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                <Paragraph variant="small" className="text-wrap! text-text-dimmed" spacing>
                   You can add tags to a run and then filter runs using them.
                 </Paragraph>
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                <Paragraph variant="small" className="text-wrap! text-text-dimmed" spacing>
                   You can add tags when triggering a run or inside the run function.
                 </Paragraph>
                 <LinkButton
@@ -505,7 +505,7 @@ export function TaskRunsTable({
                 )}
                 <TableCell to={path}>
                   {run.isTest ? (
-                    <CheckIcon className="size-4 text-charcoal-400 group-hover/table-row:text-text-bright" />
+                    <CheckIcon className="size-4 text-text-dimmed group-hover/table-row:text-text-bright" />
                   ) : (
                     "–"
                   )}
@@ -576,7 +576,7 @@ function RunActionsCell({
               <Dialog>
                 <DialogTrigger
                   asChild
-                  className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+                  className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-background-raised hover:text-text-bright"
                 >
                   <Button
                     variant="small-menu-item"
@@ -613,7 +613,7 @@ function RunActionsCell({
               <Dialog>
                 <DialogTrigger
                   asChild
-                  className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+                  className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-background-raised hover:text-text-bright"
                 >
                   <Button
                     variant="small-menu-item"
@@ -655,7 +655,7 @@ function RunActionsCell({
                 <Dialog>
                   <DialogTrigger
                     asChild
-                    className="size-6 rounded-sm p-1 text-text-bright transition hover:bg-charcoal-700"
+                    className="size-6 rounded-sm p-1 text-text-bright transition hover:bg-background-raised"
                   >
                     <NoSymbolIcon className="size-3" />
                   </DialogTrigger>
@@ -679,7 +679,7 @@ function RunActionsCell({
                 <Dialog>
                   <DialogTrigger
                     asChild
-                    className="h-6 w-6 rounded-sm p-1 text-text-bright transition hover:bg-charcoal-700"
+                    className="h-6 w-6 rounded-sm p-1 text-text-bright transition hover:bg-background-raised"
                   >
                     <ArrowPathIcon className="size-3" />
                   </DialogTrigger>
diff --git a/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx b/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx
index adb41dd9f..d2cf90f13 100644
--- a/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx
@@ -13,21 +13,13 @@ export function TaskTriggerSourceIcon({
 }) {
   switch (source) {
     case "STANDARD": {
-      return (
-        <TaskIconSmall className={cn("size-[1.125rem] min-w-[1.125rem] text-tasks", className)} />
-      );
+      return <TaskIconSmall className={cn("size-4.5 min-w-4.5 text-tasks", className)} />;
     }
     case "SCHEDULED": {
-      return (
-        <ClockIcon className={cn("size-[1.125rem] min-w-[1.125rem] text-schedules", className)} />
-      );
+      return <ClockIcon className={cn("size-4.5 min-w-4.5 text-schedules", className)} />;
     }
     case "AGENT": {
-      return (
-        <CubeSparkleIcon
-          className={cn("size-[1.125rem] min-w-[1.125rem] text-agents", className)}
-        />
-      );
+      return <CubeSparkleIcon className={cn("size-4.5 min-w-4.5 text-agents", className)} />;
     }
   }
 }
diff --git a/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx b/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx
index a0f6e1a59..4eb31e617 100644
--- a/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx
@@ -210,7 +210,7 @@ function PermanentStatusFilter() {
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     <div className="grid size-4 place-items-center">
                       <div className="size-[75%] rounded-full border-2 border-text-bright" />
                     </div>
@@ -218,7 +218,7 @@ function PermanentStatusFilter() {
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by status</span>
                   <ShortcutKey
@@ -373,13 +373,13 @@ function PermanentTagsFilter() {
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1.5 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1.5 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     <TagIcon className="size-4" />
                     <span>Tags</span>
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by tags</span>
                   <ShortcutKey
@@ -456,13 +456,13 @@ function PermanentWaitpointIdFilter() {
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1.5 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1.5 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     <FingerPrintIcon className="size-4" />
                     <span>Waitpoint ID</span>
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by waitpoint ID</span>
                   <ShortcutKey
@@ -540,13 +540,13 @@ function PermanentIdempotencyKeyFilter() {
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1.5 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1.5 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     <ListChecks className="size-4" />
                     <span>Idempotency key</span>
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by idempotency key</span>
                   <ShortcutKey
diff --git a/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx b/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx
index 8fecc2663..a82d8b9d0 100644
--- a/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx
+++ b/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx
@@ -49,7 +49,7 @@ export const MessageBubble = memo(function MessageBubble({ message }: { message:
     return (
       <div className="flex min-w-0 justify-end">
         <div className="max-w-[80%] rounded-lg bg-indigo-600 px-4 py-2.5 text-sm text-white">
-          <div className="whitespace-pre-wrap [overflow-wrap:anywhere]">{text}</div>
+          <div className="whitespace-pre-wrap wrap-anywhere">{text}</div>
         </div>
       </div>
     );
@@ -253,7 +253,7 @@ export function renderPart(part: UIMessage["parts"][number], i: number) {
           key={i}
           src={safeSrc}
           alt={p.filename ?? "file"}
-          className="max-h-64 rounded border border-charcoal-650"
+          className="max-h-64 rounded border border-border-bright"
         />
       );
     }
@@ -284,9 +284,9 @@ export function renderPart(part: UIMessage["parts"][number], i: number) {
   if (type === "step-start") {
     return (
       <div key={i} className="flex items-center gap-2 py-0.5">
-        <div className="flex-1 border-t border-dashed border-charcoal-650" />
-        <span className="text-[10px] text-charcoal-500">step</span>
-        <div className="flex-1 border-t border-dashed border-charcoal-650" />
+        <div className="flex-1 border-t border-dashed border-border-bright" />
+        <span className="text-[10px] text-text-faint">step</span>
+        <div className="flex-1 border-t border-dashed border-border-bright" />
       </div>
     );
   }
@@ -308,17 +308,17 @@ function DataPartPopover({ name, data }: { name: string; data: unknown }) {
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex items-center gap-1 rounded border border-charcoal-650 bg-charcoal-800 px-1.5 py-0.5 font-mono text-[10px] text-text-dimmed transition-colors hover:border-charcoal-500 hover:text-text-bright"
+          className="inline-flex items-center gap-1 rounded border border-border-bright bg-background-bright px-1.5 py-0.5 font-mono text-[10px] text-text-dimmed transition-colors hover:border-border-brightest hover:text-text-bright"
         >
           <span className="text-purple-400">{name}</span>
-          <span className="text-charcoal-500">{"{}"}</span>
+          <span className="text-text-faint">{"{}"}</span>
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-auto max-w-md p-0" align="start" sideOffset={4}>
-        <div className="flex items-center justify-between border-b border-charcoal-650 px-2.5 py-1.5">
+        <div className="flex items-center justify-between border-b border-border-bright px-2.5 py-1.5">
           <span className="text-[10px] font-medium text-text-dimmed">data-{name}</span>
         </div>
-        <div className="max-h-60 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="max-h-60 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <pre className="p-2.5 text-[11px] leading-relaxed text-text-bright">{formatted}</pre>
         </div>
       </PopoverContent>
diff --git a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
index bc8c21f0a..a5115897f 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
@@ -63,7 +63,7 @@ function SectionHeader({ label, right }: { label: string; right?: React.ReactNod
 
 export function ChatBubble({ children }: { children: React.ReactNode }) {
   return (
-    <div className="rounded-md border border-grid-bright bg-charcoal-750/50 px-3.5 py-2">
+    <div className="rounded-md border border-grid-bright bg-background-hover/50 px-3.5 py-2">
       {children}
     </div>
   );
@@ -231,7 +231,7 @@ export function AssistantResponse({
       />
       {mode === "rendered" ? (
         <ChatBubble>
-          <div className="streamdown-container min-w-0 font-sans text-sm font-normal text-text-dimmed [overflow-wrap:anywhere]">
+          <div className="streamdown-container min-w-0 font-sans text-sm font-normal text-text-dimmed wrap-anywhere">
             <Suspense fallback={<span className="whitespace-pre-wrap">{text}</span>}>
               <StreamdownRenderer>{text}</StreamdownRenderer>
             </Suspense>
@@ -299,7 +299,7 @@ export function ToolUseRow({ tool }: { tool: ToolUse }) {
 
   return (
     <div
-      className={`rounded-sm border bg-charcoal-800/40 ${
+      className={`rounded-sm border bg-background-bright/40 ${
         hasSubAgent ? "border-indigo-500/30" : "border-grid-bright"
       }`}
     >
@@ -348,7 +348,7 @@ export function ToolUseRow({ tool }: { tool: ToolUse }) {
                 onClick={() => handleTabClick(tab)}
                 className={`px-2.5 py-1 text-[11px] capitalize transition-colors ${
                   activeTab === tab
-                    ? "bg-charcoal-750 text-text-bright"
+                    ? "bg-background-hover text-text-bright"
                     : "text-text-dimmed hover:text-text-bright"
                 }`}
               >
@@ -447,9 +447,9 @@ function SubAgentContent({ parts }: { parts: any[] }) {
         if (partType === "step-start") {
           return (
             <div key={j} className="flex items-center gap-2 py-0.5">
-              <div className="flex-1 border-t border-dashed border-charcoal-650" />
-              <span className="text-[10px] text-charcoal-500">step</span>
-              <div className="flex-1 border-t border-dashed border-charcoal-650" />
+              <div className="flex-1 border-t border-dashed border-border-bright" />
+              <span className="text-[10px] text-text-faint">step</span>
+              <div className="flex-1 border-t border-dashed border-border-bright" />
             </div>
           );
         }
diff --git a/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
index c056d968d..1cac3de50 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
@@ -38,7 +38,7 @@ export function extractAIEmbedData(
 export function AIEmbedSpanDetails({ data }: { data: AIEmbedData }) {
   return (
     <div className="flex h-full flex-col overflow-hidden">
-      <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="flex flex-col px-3">
           {/* Model info */}
           <div className="flex flex-col gap-1 py-2.5">
@@ -53,7 +53,7 @@ export function AIEmbedSpanDetails({ data }: { data: AIEmbedData }) {
           {data.value && (
             <div className="flex flex-col gap-1.5 py-2.5">
               <Header3>Input</Header3>
-              <div className="rounded-md border border-grid-bright bg-charcoal-750/50 px-3.5 py-2">
+              <div className="rounded-md border border-grid-bright bg-background-hover/50 px-3.5 py-2">
                 <Paragraph variant="small/dimmed">{data.value}</Paragraph>
               </div>
             </div>
diff --git a/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx b/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx
index 5b3fedd41..11ef7aa8a 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx
@@ -128,7 +128,7 @@ function MetricRow({
   bold?: boolean;
 }) {
   return (
-    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
+    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-background-hover/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/4">
       <span className="text-text-dimmed">{label}</span>
       <span
         className={`text-right @[28rem]:text-left ${
diff --git a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
index 616adb44b..138374173 100644
--- a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
@@ -62,7 +62,7 @@ export function AISpanDetails({
   return (
     <div className="flex h-full flex-col overflow-hidden">
       {/* Tab bar */}
-      <div className="shrink-0 overflow-x-auto px-3 py-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="shrink-0 overflow-x-auto px-3 py-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <TabContainer>
           <TabButton
             isActive={tab === "overview"}
@@ -89,7 +89,7 @@ export function AISpanDetails({
             <span className="inline-flex items-center whitespace-nowrap">
               Tools
               {toolCount > 0 && (
-                <span className="ml-1 inline-flex min-w-4 -translate-y-px items-center justify-center rounded-full border border-charcoal-600 bg-charcoal-650 px-1 py-0.5 text-[0.625rem] font-medium leading-none text-text-bright">
+                <span className="ml-1 inline-flex min-w-4 -translate-y-px items-center justify-center rounded-full border border-border-bright bg-secondary px-1 py-0.5 text-[0.625rem] font-medium leading-none text-text-bright">
                   {toolCount}
                 </span>
               )}
@@ -109,7 +109,7 @@ export function AISpanDetails({
       </div>
 
       {/* Tab content */}
-      <div className="scrollbar-gutter-stable min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="scrollbar-gutter-stable min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         {tab === "overview" && (
           <>
             {startTime && (
@@ -221,7 +221,7 @@ function CopyRawFooter({ rawProperties }: { rawProperties: string }) {
   }
 
   return (
-    <div className="flex h-[3.25rem] shrink-0 items-center justify-end border-t border-grid-dimmed px-2">
+    <div className="flex h-13 shrink-0 items-center justify-end border-t border-grid-dimmed px-2">
       <Button
         variant="minimal/medium"
         onClick={handleCopy}
@@ -287,7 +287,7 @@ function PromptTab({
       {promptData.template && (
         <div className="flex flex-col gap-1.5 py-2.5">
           <Header3>Template</Header3>
-          <div className="rounded-md border border-grid-bright bg-charcoal-750/50 px-3.5 py-2">
+          <div className="rounded-md border border-grid-bright bg-background-hover/50 px-3.5 py-2">
             <div className="font-sans text-sm font-normal text-text-dimmed streamdown-container">
               <Suspense
                 fallback={<span className="whitespace-pre-wrap">{promptData.template}</span>}
diff --git a/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
index 93b4d6780..5557f2728 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
@@ -39,7 +39,7 @@ export function extractAIToolCallData(
 export function AIToolCallSpanDetails({ data }: { data: AIToolCallData }) {
   return (
     <div className="flex h-full flex-col overflow-hidden">
-      <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="flex flex-col px-3">
           {/* Tool info */}
           <div className="flex flex-col gap-1 py-2.5">
diff --git a/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx b/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx
index a329698dd..f7b09b6da 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx
@@ -33,7 +33,7 @@ function ToolDefRow({ def, wasCalled }: { def: ToolDefinition; wasCalled: boolea
       <div className="flex items-center gap-2">
         <div
           className={`size-1.5 shrink-0 rounded-full ${
-            wasCalled ? "bg-success" : "bg-charcoal-600"
+            wasCalled ? "bg-success" : "bg-surface-control"
           }`}
         />
         <code className="font-mono text-xs text-text-bright">{def.name}</code>
diff --git a/apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx b/apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx
index 81a96affd..a94dd1b37 100644
--- a/apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 
 export function SpanMetricRow({ label, value }: { label: string; value: ReactNode }) {
   return (
-    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
+    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-background-hover/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/4">
       <span className="text-text-dimmed">{label}</span>
       <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
     </div>
diff --git a/apps/webapp/app/components/scheduled/timezones.tsx b/apps/webapp/app/components/scheduled/timezones.tsx
index 779afd1dd..429598d60 100644
--- a/apps/webapp/app/components/scheduled/timezones.tsx
+++ b/apps/webapp/app/components/scheduled/timezones.tsx
@@ -14,7 +14,7 @@ export function TimezoneList({ timezones }: { timezones: string[] }) {
   return (
     <div
       ref={parentRef}
-      className="max-h-[calc(min(480px,var(--popover-available-height))-2.35rem)] overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+      className="max-h-[calc(min(480px,var(--popover-available-height))-2.35rem)] overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
     >
       <div
         style={{
diff --git a/apps/webapp/app/components/schedules/ScheduleInspector.tsx b/apps/webapp/app/components/schedules/ScheduleInspector.tsx
index abe25bc17..1d0de51dc 100644
--- a/apps/webapp/app/components/schedules/ScheduleInspector.tsx
+++ b/apps/webapp/app/components/schedules/ScheduleInspector.tsx
@@ -111,7 +111,7 @@ export function ScheduleInspector({
         <Header2 className="whitespace-nowrap">{schedule.friendlyId}</Header2>
         {headerActions}
       </div>
-      <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="space-y-3">
           <div className="p-3">
             <Property.Table>
diff --git a/apps/webapp/app/components/sessions/v1/SessionFilters.tsx b/apps/webapp/app/components/sessions/v1/SessionFilters.tsx
index c711bfeac..57ff6526d 100644
--- a/apps/webapp/app/components/sessions/v1/SessionFilters.tsx
+++ b/apps/webapp/app/components/sessions/v1/SessionFilters.tsx
@@ -369,7 +369,7 @@ function PermanentStatusFilter() {
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     <div className="grid size-4 place-items-center">
                       <div className="size-[75%] rounded-full border-2 border-text-bright" />
                     </div>
@@ -377,7 +377,7 @@ function PermanentStatusFilter() {
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by status</span>
                   <ShortcutKey
@@ -622,13 +622,13 @@ function PermanentTaskIdentifierFilter({ possibleTasks }: { possibleTasks: Possi
                     className="pl-1"
                   />
                 ) : (
-                  <div className="flex h-6 items-center gap-1.5 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
+                  <div className="flex h-6 items-center gap-1.5 rounded border border-border-bright bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-border-brighter group-hover:bg-surface-control">
                     <CubeSparkleIcon className="size-4 text-text-bright" />
                     <span>Agent ID</span>
                   </div>
                 )}
               </Ariakit.TooltipAnchor>
-              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs">
+              <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright px-2 py-1.5 text-xs">
                 <div className="flex items-center gap-2">
                   <span>Filter by Agent ID</span>
                   <ShortcutKey
diff --git a/apps/webapp/app/components/sessions/v1/SessionsTable.tsx b/apps/webapp/app/components/sessions/v1/SessionsTable.tsx
index 7b74a6fa6..4340a9768 100644
--- a/apps/webapp/app/components/sessions/v1/SessionsTable.tsx
+++ b/apps/webapp/app/components/sessions/v1/SessionsTable.tsx
@@ -75,7 +75,7 @@ export function SessionsTable({
                     <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
                       <SessionStatusCombo status={status} />
                     </div>
-                    <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
+                    <Paragraph variant="extra-small" className="text-wrap! text-text-dimmed">
                       {descriptionForSessionStatus(status)}
                     </Paragraph>
                   </div>
@@ -151,7 +151,7 @@ export function SessionsTable({
                   {session.isTest ? (
                     <CheckIcon
                       aria-hidden
-                      className="size-4 text-charcoal-400 group-hover/table-row:text-text-bright"
+                      className="size-4 text-text-dimmed group-hover/table-row:text-text-bright"
                     />
                   ) : (
                     <span aria-hidden className="text-text-dimmed">
@@ -184,7 +184,7 @@ export function SessionsTable({
         {isLoading && (
           <TableBlankRow
             colSpan={9}
-            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-charcoal-900/90"
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-background-deep/90"
           >
             <Spinner /> <span className="text-text-dimmed">Loading…</span>
           </TableBlankRow>
diff --git a/apps/webapp/app/hooks/useThemeColor.ts b/apps/webapp/app/hooks/useThemeColor.ts
new file mode 100644
index 000000000..d78fd39fa
--- /dev/null
+++ b/apps/webapp/app/hooks/useThemeColor.ts
@@ -0,0 +1,32 @@
+import { useState } from "react";
+
+/**
+ * Normalize any CSS color (hex, oklch, hsl, ...) to rgb()/rgba() by rendering
+ * it to a 1x1 canvas. framer-motion can only interpolate hex/rgb/hsl, while
+ * Tailwind v4's default palette is oklch.
+ */
+function toRgb(color: string): string {
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return color;
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+  return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+}
+
+/**
+ * Resolve a theme CSS variable to a concrete, animatable color once on mount.
+ * framer-motion can't interpolate `var()` strings or oklch values, so animated
+ * colors must be resolved and normalized first. The fallback is used during
+ * SSR and should match the default dark theme (see tailwind.css).
+ */
+export function useThemeColor(variable: `--${string}`, fallback: string): string {
+  const [color] = useState(() => {
+    if (typeof document === "undefined") return fallback;
+    const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+    return value ? toRgb(value) : fallback;
+  });
+  return color;
+}
diff --git a/apps/webapp/app/root.tsx b/apps/webapp/app/root.tsx
index 07de36a60..c84da200a 100644
--- a/apps/webapp/app/root.tsx
+++ b/apps/webapp/app/root.tsx
@@ -95,7 +95,7 @@ export const shouldRevalidate: ShouldRevalidateFunction = (options) => {
 export function ErrorBoundary() {
   return (
     <>
-      <html lang="en" className="h-full">
+      <html lang="en" className="h-full" data-theme="dark">
         <head>
           <meta charSet="utf-8" />
 
@@ -123,7 +123,7 @@ export default function App() {
 
   return (
     <>
-      <html lang="en" className="h-full">
+      <html lang="en" className="h-full" data-theme="dark">
         <head>
           <Meta />
           <Links />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
index 010f57deb..d895b0b0c 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
@@ -317,7 +317,7 @@ export default function Page() {
   const emailFields = emails.getFieldList();
 
   return (
-    <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+    <MainCenteredContainer className="max-w-104 rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
       <div>
         <FormTitle
           LeadingIcon={<UserPlusIcon className="size-6 text-indigo-500" />}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
index 10dab7333..c16e96b8f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
@@ -287,7 +287,7 @@ export default function Page() {
                           <Button
                             variant="primary/small"
                             LeadingIcon={PlusIcon}
-                            leadingIconClassName="-mr-[0.7rem]"
+                            leadingIconClassName="mr-[-0.7rem]"
                             onClick={() => toggleUsefulLinks(true)}
                             className="pl-1.5"
                           >
@@ -607,21 +607,21 @@ function formatAgentType(type: string): string {
 }
 
 const STATUS_BARS: { status: TaskRunStatus; fill: string }[] = [
-  { status: "DELAYED", fill: "#5F6570" },
-  { status: "PENDING", fill: "#5F6570" },
-  { status: "PENDING_VERSION", fill: "#F59E0B" },
-  { status: "EXECUTING", fill: "#3B82F6" },
-  { status: "RETRYING_AFTER_FAILURE", fill: "#3B82F6" },
-  { status: "WAITING_TO_RESUME", fill: "#3B82F6" },
-  { status: "COMPLETED_SUCCESSFULLY", fill: "#28BF5C" },
-  { status: "CANCELED", fill: "#5F6570" },
-  { status: "COMPLETED_WITH_ERRORS", fill: "#F43F5E" },
-  { status: "INTERRUPTED", fill: "#F43F5E" },
-  { status: "SYSTEM_FAILURE", fill: "#F43F5E" },
-  { status: "PAUSED", fill: "#FCD34D" },
-  { status: "CRASHED", fill: "#F43F5E" },
-  { status: "EXPIRED", fill: "#5F6570" },
-  { status: "TIMED_OUT", fill: "#F43F5E" },
+  { status: "DELAYED", fill: "var(--color-run-delayed)" },
+  { status: "PENDING", fill: "var(--color-run-pending)" },
+  { status: "PENDING_VERSION", fill: "var(--color-run-pending-version)" },
+  { status: "EXECUTING", fill: "var(--color-run-executing)" },
+  { status: "RETRYING_AFTER_FAILURE", fill: "var(--color-run-retrying-after-failure)" },
+  { status: "WAITING_TO_RESUME", fill: "var(--color-run-waiting-to-resume)" },
+  { status: "COMPLETED_SUCCESSFULLY", fill: "var(--color-run-completed-successfully)" },
+  { status: "CANCELED", fill: "var(--color-run-canceled)" },
+  { status: "COMPLETED_WITH_ERRORS", fill: "var(--color-run-completed-with-errors)" },
+  { status: "INTERRUPTED", fill: "var(--color-run-interrupted)" },
+  { status: "SYSTEM_FAILURE", fill: "var(--color-run-system-failure)" },
+  { status: "PAUSED", fill: "var(--color-run-paused)" },
+  { status: "CRASHED", fill: "var(--color-run-crashed)" },
+  { status: "EXPIRED", fill: "var(--color-run-expired)" },
+  { status: "TIMED_OUT", fill: "var(--color-run-timed-out)" },
 ];
 
 // Fixed px dims skip ResponsiveContainer's ResizeObserver — otherwise every panel resize re-renders all 25 charts.
@@ -630,7 +630,7 @@ const ACTIVITY_CHART_HEIGHT = 24;
 // chart (112) + gap-1.5 (6) + count min-w (28). Reserved so the column stays put while the chart unmounts.
 const ACTIVITY_CELL_WIDTH = 146;
 const ACTIVITY_CHART_COUNT_CLASS =
-  "-mt-1 inline-block min-w-[1.75rem] text-xxs tabular-nums text-text-dimmed";
+  "-mt-1 inline-block min-w-7 text-xxs tabular-nums text-text-dimmed";
 
 function TaskActivityGraph({ activity }: { activity: HourlyTaskActivity[string] }) {
   const maxTotal = Math.max(...activity.map((d) => d.total));
@@ -665,9 +665,14 @@ function TaskActivityGraph({ activity }: { activity: HourlyTaskActivity[string]
               isAnimationActive={false}
             />
           ))}
-          <ReferenceLine y={0} stroke="#2C3034" strokeWidth={1} />
+          <ReferenceLine y={0} stroke="var(--color-border-bright)" strokeWidth={1} />
           {maxTotal > 0 && (
-            <ReferenceLine y={maxTotal} stroke="#4D525B" strokeDasharray="4 4" strokeWidth={1} />
+            <ReferenceLine
+              y={maxTotal}
+              stroke="var(--color-border-brighter)"
+              strokeDasharray="4 4"
+              strokeWidth={1}
+            />
           )}
         </BarChart>
       </div>
@@ -690,7 +695,7 @@ function TaskActivityBlankState() {
           y1={ACTIVITY_CHART_HEIGHT}
           x2={ACTIVITY_CHART_WIDTH}
           y2={ACTIVITY_CHART_HEIGHT}
-          stroke="#333539"
+          stroke="var(--color-border-bright)"
           strokeWidth={1}
         />
       </svg>
@@ -713,7 +718,7 @@ const TaskActivityTooltip = ({ active, payload }: TooltipProps<number, string>)
     return (
       <TooltipPortal active={active}>
         <div className="rounded-sm border border-grid-bright bg-background-dimmed px-3 py-2">
-          <Header3 className="border-b border-b-charcoal-650 pb-2">{formattedDate}</Header3>
+          <Header3 className="border-b border-b-border-bright pb-2">{formattedDate}</Header3>
           {items.length === 0 ? (
             <div className="mt-2 text-xs text-text-dimmed">No runs</div>
           ) : (
@@ -858,7 +863,7 @@ function NewTaskPromptsPanel({ onClose }: { onClose: () => void }) {
           className="pl-1"
         />
       </div>
-      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <Paragraph variant="small/bright" className="mb-6">
           Copy any example below into your project's{" "}
           <InlineCode variant="extra-small">trigger/</InlineCode> directory and customize it from
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx
index b6da63ace..6ce526ba7 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx
@@ -310,7 +310,7 @@ export default function Page() {
                                   activity={result}
                                   seriesKey="cost"
                                   label="Spend"
-                                  color="#A855F7"
+                                  color="var(--color-agents)"
                                   valueFormatter={formatCurrency}
                                 />
                               )}
@@ -375,7 +375,7 @@ function AgentContentArea({
           <TypedAwait resolve={sessionList} errorElement={<TableLoading />}>
             {(list) =>
               list ? (
-                <div className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                <div className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
                   <SessionsTable
                     sessions={list.sessions}
                     filters={list.filters}
@@ -395,7 +395,7 @@ function AgentContentArea({
           <TypedAwait resolve={runList} errorElement={<TableLoading />}>
             {(list) =>
               list ? (
-                <div className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                <div className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
                   <TaskRunsTable
                     total={list.runs.length}
                     hasFilters={list.hasFilters}
@@ -447,7 +447,7 @@ function AgentDetailSidebar({
           Test agent
         </LinkButton>
       </div>
-      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <Property.Table>
           <Property.Item>
             <Property.Label>Slug</Property.Label>
@@ -538,7 +538,7 @@ function ActivityChartSkeleton() {
   return (
     <div className="flex min-h-0 flex-1 items-end gap-px rounded-sm">
       {Array.from({ length: 42 }).map((_, i) => (
-        <div key={i} className="h-full flex-1 bg-charcoal-850" />
+        <div key={i} className="h-full flex-1 bg-background-dimmed" />
       ))}
     </div>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.alerts/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.alerts/route.tsx
index 72f9c85ee..9bf64da16 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.alerts/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.alerts/route.tsx
@@ -272,7 +272,9 @@ export default function Page() {
                           </>
                         }
                         className={
-                          alertChannel.enabled ? "" : "group-hover/table-row:bg-charcoal-800/50"
+                          alertChannel.enabled
+                            ? ""
+                            : "group-hover/table-row:bg-background-bright/50"
                         }
                       />
                     </TableRow>
@@ -502,13 +504,13 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
           leadingIcon={
             <AlertChannelTypeIcon
               channelType={alertChannel.type}
-              className="size-5 text-charcoal-400"
+              className="size-5 text-text-dimmed"
             />
           }
-          leadingIconClassName="text-charcoal-400"
+          leadingIconClassName="text-text-dimmed"
           label={"Email"}
           description={alertChannel.properties.email}
-          boxClassName="group-hover/table-row:bg-charcoal-800"
+          boxClassName="group-hover/table-row:bg-background-bright"
           className="h-12"
         />
       );
@@ -522,14 +524,14 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
                 <TooltipTrigger>
                   <AlertChannelTypeIcon
                     channelType={alertChannel.type}
-                    className="size-5 text-charcoal-400"
+                    className="size-5 text-text-dimmed"
                   />
                 </TooltipTrigger>
                 <TooltipContent className="flex items-center gap-1">Webhook</TooltipContent>
               </Tooltip>
             </TooltipProvider>
           }
-          leadingIconClassName="text-charcoal-400"
+          leadingIconClassName="text-text-dimmed"
           label={alertChannel.properties.url}
           description={
             <ClipboardField
@@ -541,7 +543,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
               className="mt-1 w-80"
             />
           }
-          boxClassName="group-hover/table-row:bg-charcoal-800"
+          boxClassName="group-hover/table-row:bg-background-bright"
         />
       );
     }
@@ -551,13 +553,13 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
           leadingIcon={
             <AlertChannelTypeIcon
               channelType={alertChannel.type}
-              className="size-5 text-charcoal-400"
+              className="size-5 text-text-dimmed"
             />
           }
-          leadingIconClassName="text-charcoal-400"
+          leadingIconClassName="text-text-dimmed"
           label={"Slack"}
           description={`#${alertChannel.properties.channelName}`}
-          boxClassName="group-hover/table-row:bg-charcoal-800"
+          boxClassName="group-hover/table-row:bg-background-bright"
         />
       );
     }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
index 6f5fc8934..372247207 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
@@ -108,7 +108,7 @@ export default function Page() {
       </div>
 
       {/* Scrollable content */}
-      <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="space-y-3">
           {/* Progress meter for v2 batches */}
           {showProgressMeter && (
@@ -208,7 +208,7 @@ export default function Page() {
                 <ExclamationTriangleIcon className="size-4" />
                 Run creation errors ({batch.errors.length})
               </Header3>
-              <div className="divide-y divide-grid-dimmed rounded-md border border-grid-dimmed bg-charcoal-900">
+              <div className="divide-y divide-grid-dimmed rounded-md border border-grid-dimmed bg-background-deep">
                 {batch.errors.map((error) => (
                   <div key={error.id} className="px-3 py-2">
                     <div className="flex items-center justify-between">
@@ -219,7 +219,7 @@ export default function Page() {
                         <span className="text-sm text-text-bright">{error.taskIdentifier}</span>
                       </div>
                       {error.errorCode && (
-                        <span className="rounded bg-charcoal-750 px-1.5 py-0.5 font-mono text-xs text-text-dimmed">
+                        <span className="rounded bg-background-hover px-1.5 py-0.5 font-mono text-xs text-text-dimmed">
                           {error.errorCode}
                         </span>
                       )}
@@ -270,7 +270,7 @@ function BatchProgressMeter({ successCount, failureCount, totalCount }: BatchPro
           {formatNumber(processedCount)}/{formatNumber(totalCount)}
         </Paragraph>
       </div>
-      <div className="relative h-4 w-full overflow-hidden rounded-sm bg-charcoal-900">
+      <div className="relative h-4 w-full overflow-hidden rounded-sm bg-background-deep">
         <motion.div
           className="absolute left-0 top-0 h-full bg-success"
           initial={{ width: `${successPercentage}%` }}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches/route.tsx
index 6958518fb..87cad7064 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches/route.tsx
@@ -213,7 +213,7 @@ function BatchesTable({ batches, hasFilters, filters }: BatchList) {
                     <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
                       <BatchStatusCombo status={status} />
                     </div>
-                    <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
+                    <Paragraph variant="extra-small" className="text-wrap! text-text-dimmed">
                       {descriptionForBatchStatus(status)}
                     </Paragraph>
                   </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
index cd9810ae3..67ae202d6 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
@@ -355,7 +355,7 @@ export default function Page() {
                             </TableCell>
                             <TableCell className={cellClass}>
                               {branch.archivedAt ? (
-                                <CheckIcon className="size-4 text-charcoal-400" />
+                                <CheckIcon className="size-4 text-text-dimmed" />
                               ) : (
                                 "–"
                               )}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx
index d949d1ad7..15728fec6 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx
@@ -191,7 +191,7 @@ export default function Page() {
           />
         ) : null}
       </div>
-      <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="space-y-3">
           <div className="px-3 pt-3">
             <Meter
@@ -313,7 +313,7 @@ function Meter({ type, successCount, failureCount, totalCount }: MeterProps) {
           {formatNumber(successCount + failureCount)}/{formatNumber(totalCount)}
         </Paragraph>
       </div>
-      <div className="relative h-4 w-full overflow-hidden rounded-sm bg-charcoal-900">
+      <div className="relative h-4 w-full overflow-hidden rounded-sm bg-background-deep">
         <motion.div
           className="absolute left-0 top-0 h-full w-full bg-success"
           initial={{ width: `${successPercentage}%` }}
@@ -321,7 +321,7 @@ function Meter({ type, successCount, failureCount, totalCount }: MeterProps) {
           transition={{ duration: 0.3, ease: "easeOut" }}
         />
         <motion.div
-          className="absolute top-0 h-full w-full bg-charcoal-550"
+          className="absolute top-0 h-full w-full bg-surface-control-hover"
           initial={{ width: `${failurePercentage}%`, left: `${successPercentage}%` }}
           animate={{ width: `${failurePercentage}%`, left: `${successPercentage}%` }}
           transition={{ duration: 0.3, ease: "easeOut" }}
@@ -335,7 +335,7 @@ function Meter({ type, successCount, failureCount, totalCount }: MeterProps) {
           </Paragraph>
         </div>
         <div className="flex items-center gap-1">
-          <div className="h-2 w-2 rounded-[1px] bg-charcoal-550" />
+          <div className="h-2 w-2 rounded-[1px] bg-surface-control-hover" />
           <Paragraph variant="extra-small">
             {formatNumber(failureCount)} {typeText(type)} failed{" "}
             {type === "CANCEL" ? " (already finished)" : ""}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx
index 795d08bc0..1fa646dac 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx
@@ -254,7 +254,7 @@ function BulkActionsTable({
                   <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
                     <BulkActionStatusCombo status="PENDING" />
                   </div>
-                  <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
+                  <Paragraph variant="extra-small" className="text-wrap! text-text-dimmed">
                     The bulk action is currently in progress. They can take some time if there are
                     lots of runs.
                   </Paragraph>
@@ -263,7 +263,7 @@ function BulkActionsTable({
                   <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
                     <BulkActionStatusCombo status="COMPLETED" />
                   </div>
-                  <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
+                  <Paragraph variant="extra-small" className="text-wrap! text-text-dimmed">
                     The bulk action has completed successfully.
                   </Paragraph>
                 </div>
@@ -271,7 +271,7 @@ function BulkActionsTable({
                   <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
                     <BulkActionStatusCombo status="ABORTED" />
                   </div>
-                  <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
+                  <Paragraph variant="extra-small" className="text-wrap! text-text-dimmed">
                     The bulk action was aborted.
                   </Paragraph>
                 </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
index 5fa237cee..668244975 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
@@ -329,7 +329,7 @@ export function MetricDashboard({
       <div
         ref={containerRef}
         className={cn(
-          "overflow-y-auto scrollbar-thin scrollbar-track-charcoal-800 scrollbar-thumb-charcoal-700",
+          "overflow-y-auto scrollbar-thin scrollbar-track-background-bright scrollbar-thumb-background-raised",
           isInteracting && "select-none"
         )}
       >
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards._index/route.tsx
index f2ecef08e..1cee0dde8 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards._index/route.tsx
@@ -93,8 +93,8 @@ export default function Page() {
 }
 
 const CTA_CLASSNAME = cn(
-  "group flex h-full min-h-[10rem] flex-col gap-3 rounded-lg border border-grid-bright bg-background-bright p-5 text-left transition-colors",
-  "hover:border-charcoal-600 hover:bg-charcoal-750"
+  "group flex h-full min-h-40 flex-col gap-3 rounded-lg border border-grid-bright bg-background-bright p-5 text-left transition-colors",
+  "hover:border-border-bright hover:bg-background-hover"
 );
 
 type DashboardCtaProps = {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx
index edf91e8ff..8aa6427af 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx
@@ -355,7 +355,7 @@ export default function Page() {
   const dashboardMenu = (
     <Popover>
       <PopoverVerticalEllipseTrigger variant="secondary" />
-      <PopoverContent className="w-fit min-w-[10rem] p-1" align="end">
+      <PopoverContent className="w-fit min-w-40 p-1" align="end">
         <div className="flex flex-col gap-1">
           <RenameDashboardDialog title={title} />
           <DeleteDashboardDialog title={title} />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
index 36ca0f335..20dd91d34 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
@@ -330,7 +330,7 @@ export default function Page() {
           className="pl-1"
         />
       </div>
-      <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="flex flex-col">
           <div className="p-3">
             <Property.Table>
@@ -530,7 +530,7 @@ export default function Page() {
           {deployment.errorData && <DeploymentError errorData={deployment.errorData} />}
 
           {deployment.tasks && (
-            <div className="divide-y divide-charcoal-800 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+            <div className="divide-y divide-background-bright overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
               <Table variant="bright">
                 <TableHeader>
                   <TableRow>
@@ -618,7 +618,7 @@ function LogsDisplay({
             <div
               className={cn(
                 "h-2 w-2 rounded-full",
-                errorCount > 0 ? "bg-error/80" : "bg-charcoal-600"
+                errorCount > 0 ? "bg-error/80" : "bg-surface-control"
               )}
             />
             <Paragraph variant="extra-small/dimmed/mono" className="w-[ch-10]">
@@ -629,7 +629,7 @@ function LogsDisplay({
             <div
               className={cn(
                 "h-2 w-2 rounded-full",
-                warningCount > 0 ? "bg-warning/80" : "bg-charcoal-600"
+                warningCount > 0 ? "bg-warning/80" : "bg-surface-control"
               )}
             />
             <Paragraph variant="extra-small/dimmed/mono">
@@ -692,7 +692,7 @@ function LogsDisplay({
         <div
           ref={logsContainerRef}
           className={cn(
-            "grow overflow-x-auto overflow-y-scroll font-mono text-xs transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+            "grow overflow-x-auto overflow-y-scroll font-mono text-xs transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",
             collapsed ? "h-16" : "h-64"
           )}
         >
@@ -716,7 +716,7 @@ function LogsDisplay({
                     "flex w-full gap-x-2.5 border-l-2 px-2.5 py-1",
                     log.level === "error" && "border-error/60 bg-error/15 hover:bg-error/25",
                     log.level === "warn" && "border-warning/60 bg-warning/20 hover:bg-warning/30",
-                    log.level === "info" && "border-transparent hover:bg-charcoal-750"
+                    log.level === "info" && "border-transparent hover:bg-background-hover"
                   )}
                 >
                   <span
@@ -745,7 +745,7 @@ function LogsDisplay({
           </div>
         </div>
         {collapsed && (
-          <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-charcoal-800/90 to-transparent" />
+          <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-8 bg-linear-to-t from-background-bright/90 to-transparent" />
         )}
       </div>
     </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
index e860c3123..5fdb2af25 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
@@ -244,7 +244,7 @@ export default function Page() {
                                 </div>
                                 <Paragraph
                                   variant="extra-small"
-                                  className="!text-wrap text-text-dimmed"
+                                  className="text-wrap! text-text-dimmed"
                                 >
                                   {deploymentStatusDescription(status)}
                                 </Paragraph>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev-branches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev-branches/route.tsx
index aa6181852..9f704a54f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev-branches/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev-branches/route.tsx
@@ -191,7 +191,7 @@ export default function Page() {
                         </TableCell>
                         <TableCell className={cellClass}>
                           {branch.archivedAt ? (
-                            <CheckIcon className="size-4 text-charcoal-400" />
+                            <CheckIcon className="size-4 text-text-dimmed" />
                           ) : (
                             "–"
                           )}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx
index 12d360a41..d552b3104 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx
@@ -299,7 +299,7 @@ export default function Page() {
       <DialogContent className="p-0 pt-2.5 md:max-w-2xl lg:max-w-3xl">
         <DialogHeader className="px-4">New environment variables</DialogHeader>
         <Form method="post" {...getFormProps(form)}>
-          <Fieldset className="max-h-[70vh] overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <Fieldset className="max-h-[70vh] overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <InputGroup fullWidth>
               <Label>Environments</Label>
               {selectedBranchId ? (
@@ -356,9 +356,9 @@ export default function Page() {
                         <TooltipTrigger>
                           <TextLink
                             to={v3BillingPath(organization)}
-                            className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-2.5 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-charcoal-850"
+                            className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-border-bright py-2.5 pl-3 pr-4 transition hover:border-border-brightest hover:bg-background-dimmed"
                           >
-                            <LockClosedIcon className="size-4 text-charcoal-500" />
+                            <LockClosedIcon className="size-4 text-text-faint" />
                             <EnvironmentLabel
                               environment={{ type: "STAGING" }}
                               className="text-sm"
@@ -376,9 +376,9 @@ export default function Page() {
                         <TooltipTrigger>
                           <TextLink
                             to={v3BillingPath(organization)}
-                            className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-2.5 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-charcoal-850"
+                            className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-border-bright py-2.5 pl-3 pr-4 transition hover:border-border-brightest hover:bg-background-dimmed"
                           >
-                            <LockClosedIcon className="size-4 text-charcoal-500" />
+                            <LockClosedIcon className="size-4 text-text-faint" />
                             <EnvironmentLabel
                               environment={{ type: "PREVIEW" }}
                               className="text-sm"
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx
index d2b2a733c..b0b2a8931 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx
@@ -478,7 +478,7 @@ function EnvironmentVariablesListPage({
           )}
           <div
             ref={tableScrollRef}
-            className="min-h-0 flex-1 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+            className="min-h-0 flex-1 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
           >
             <Table
               containerClassName={cn(
@@ -607,7 +607,7 @@ function EnvironmentVariableTableRow({
   const borderedCellClassName = getBorderedCellClassName(variable);
 
   return (
-    <TableRow className={variable.isLastTime ? "after:bg-charcoal-600" : "after:bg-transparent"}>
+    <TableRow className={variable.isLastTime ? "after:bg-surface-control" : "after:bg-transparent"}>
       <TableCell className={cellClassName}>
         {variable.isFirstTime ? <CopyableText value={variable.key} className="font-mono" /> : null}
       </TableCell>
@@ -693,7 +693,7 @@ function EnvironmentVariableTableRow({
       </TableCell>
       <TableCellMenu
         isSticky
-        className="[&:has(.group-hover/table-row:block)]:w-auto w-0"
+        className="[&:has([data-hidden-buttons])]:w-auto w-0"
         hiddenButtons={
           // No edit/delete for environments the role can't manage — the value
           // is withheld, and the action enforces write:envvars independently.
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx
index 3abde6802..ea6b33eed 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx
@@ -550,7 +550,7 @@ function ErrorGroupDetail({
               />
             ) : (
               <div className="flex flex-1 flex-col items-center justify-center gap-3">
-                <BugIcon className="size-16 text-charcoal-650" />
+                <BugIcon className="size-16 text-secondary" />
                 <Paragraph className="max-w-32 text-center text-text-dimmed">
                   No runs found for this error.
                 </Paragraph>
@@ -581,7 +581,7 @@ function ErrorDetailSidebar({
       <div className="border-b border-grid-dimmed px-3 py-2">
         <Header2 className="truncate">Details</Header2>
       </div>
-      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="flex flex-col gap-4">
           <Property.Table>
             {/* Status */}
@@ -802,7 +802,7 @@ function ErrorStatusDropdown({
           <IconCircleDotted className="-ml-1 mr-1 size-3.5 text-text-bright" />
           Mark error as…
         </PopoverArrowTrigger>
-        <PopoverContent className="inline-flex !min-w-0 flex-col p-1" align="end">
+        <PopoverContent className="inline-flex min-w-0! flex-col p-1" align="end">
           <ErrorStatusMenuItems
             status={state.status}
             taskIdentifier={taskIdentifier}
@@ -873,7 +873,7 @@ function ActivityChart({
   return (
     <ResponsiveContainer width="100%" height="100%">
       <BarChart data={data} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
-        <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
+        <CartesianGrid vertical={false} stroke="var(--color-grid-bright)" strokeDasharray="3 3" />
         <XAxis
           dataKey="__timestamp"
           tickFormatter={xAxisFormatter}
@@ -881,14 +881,14 @@ function ActivityChart({
           height={24}
           axisLine={false}
           tickLine={false}
-          tick={{ fontSize: 11, fill: "#878C99" }}
+          tick={{ fontSize: 11, fill: "var(--color-text-dimmed)" }}
         />
         <YAxis
           width={30}
           tickMargin={4}
           axisLine={false}
           tickLine={false}
-          tick={{ fontSize: 11, fill: "#878C99" }}
+          tick={{ fontSize: 11, fill: "var(--color-text-dimmed)" }}
           domain={["auto", (dataMax: number) => dataMax * 1.15]}
         />
         <Tooltip
@@ -937,7 +937,7 @@ const ActivityTooltip = ({
   return (
     <TooltipPortal active={active}>
       <div className="rounded-sm border border-grid-bright bg-background-dimmed px-3 py-2">
-        <Header3 className="border-b border-b-charcoal-650 pb-2">{formattedDate}</Header3>
+        <Header3 className="border-b border-b-border-bright pb-2">{formattedDate}</Header3>
         <div className="mt-2 flex flex-col gap-1">
           {payload.map((entry, i) => {
             const value = (entry.value as number) ?? 0;
@@ -959,7 +959,7 @@ function ActivityChartBlankState() {
   return (
     <div className="flex min-h-0 flex-1 items-end gap-px rounded-sm">
       {[...Array(42)].map((_, i) => (
-        <div key={i} className="h-full flex-1 bg-charcoal-850" />
+        <div key={i} className="h-full flex-1 bg-background-dimmed" />
       ))}
     </div>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx
index 4c6a4ee69..5243ab3d4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx
@@ -505,7 +505,7 @@ function ErrorsList({
   if (errorGroups.length === 0) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-3">
-        <BugIcon className="size-16 text-charcoal-650" />
+        <BugIcon className="size-16 text-secondary" />
         <Paragraph className="text-center text-text-dimmed">
           No errors found for this time period.
         </Paragraph>
@@ -514,7 +514,7 @@ function ErrorsList({
   }
 
   return (
-    <Table containerClassName="max-h-full pb-[2.5rem]" showTopBorder={false}>
+    <Table containerClassName="max-h-full pb-10" showTopBorder={false}>
       <TableHeader>
         <TableRow>
           <TableHeaderCell>ID</TableHeaderCell>
@@ -699,7 +699,7 @@ function ErrorActivityGraph({ activity }: { activity: ErrorOccurrenceActivity })
 
   return (
     <div className="flex items-start gap-1.5">
-      <div className="h-6 w-[7rem] rounded-sm">
+      <div className="h-6 w-28 rounded-sm">
         <ResponsiveContainer width="100%" height="100%">
           <BarChart data={activity} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
             <YAxis domain={[0, maxCount || 1]} hide />
@@ -717,9 +717,14 @@ function ErrorActivityGraph({ activity }: { activity: ErrorOccurrenceActivity })
               isAnimationActive={false}
               minPointSize={1}
             />
-            <ReferenceLine y={0} stroke="#2C3034" strokeWidth={1} />
+            <ReferenceLine y={0} stroke="var(--color-border-bright)" strokeWidth={1} />
             {maxCount > 0 && (
-              <ReferenceLine y={maxCount} stroke="#4D525B" strokeDasharray="4 4" strokeWidth={1} />
+              <ReferenceLine
+                y={maxCount}
+                stroke="var(--color-border-brighter)"
+                strokeDasharray="4 4"
+                strokeWidth={1}
+              />
             )}
           </BarChart>
         </ResponsiveContainer>
@@ -746,7 +751,7 @@ const ErrorActivityTooltip = ({ active, payload }: TooltipProps<number, string>)
     return (
       <TooltipPortal active={active}>
         <div className="rounded-sm border border-grid-bright bg-background-dimmed px-3 py-2">
-          <Header3 className="border-b border-b-charcoal-650 pb-2">{formattedDate}</Header3>
+          <Header3 className="border-b border-b-border-bright pb-2">{formattedDate}</Header3>
           <div className="mt-2 text-xs text-text-bright">
             <span className="tabular-nums">{entry.count}</span>{" "}
             <span className="text-text-dimmed">
@@ -763,9 +768,9 @@ const ErrorActivityTooltip = ({ active, payload }: TooltipProps<number, string>)
 
 function ErrorActivityBlankState() {
   return (
-    <div className="flex h-6 w-[7rem] items-end gap-px rounded-sm">
+    <div className="flex h-6 w-28 items-end gap-px rounded-sm">
       {[...Array(24)].map((_, i) => (
-        <div key={i} className="h-full flex-1 bg-[#212327]" />
+        <div key={i} className="h-full flex-1 bg-background-hover" />
       ))}
     </div>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
index b797e6434..9a3a0d050 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
@@ -269,7 +269,7 @@ function ProviderFilter({ providers }: { providers: string[] }) {
             onRemove={() => del("providers")}
           />
         </Ariakit.TooltipAnchor>
-        <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright py-1.5 pl-2.5 pr-3 text-xs text-text-dimmed">
+        <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright py-1.5 pl-2.5 pr-3 text-xs text-text-dimmed">
           <div className="flex items-center gap-3">
             <span>Filter by provider</span>
             <ShortcutKey className="size-4 flex-none" shortcut={providerShortcut} variant="small" />
@@ -326,7 +326,7 @@ function FeaturesFilter({ features }: { features: string[] }) {
             onRemove={() => del("features")}
           />
         </Ariakit.TooltipAnchor>
-        <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright py-1.5 pl-2.5 pr-3 text-xs text-text-dimmed">
+        <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright py-1.5 pl-2.5 pr-3 text-xs text-text-dimmed">
           <div className="flex items-center gap-3">
             <span>Filter by features</span>
             <ShortcutKey className="size-4 flex-none" shortcut={featuresShortcut} variant="small" />
@@ -451,7 +451,7 @@ function FiltersBar({
               shortcut={detailsShortcut}
             />
           </Ariakit.TooltipAnchor>
-          <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright py-1.5 pl-2.5 pr-3 text-xs text-text-dimmed">
+          <Ariakit.Tooltip className="z-40 cursor-default rounded border border-grid-bright bg-background-bright py-1.5 pl-2.5 pr-3 text-xs text-text-dimmed">
             <div className="flex items-center gap-3">
               <span>Toggle all details</span>
               <ShortcutKey
@@ -773,12 +773,12 @@ function CompareDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="!w-fit gap-[0.4375rem] !px-0 !pb-0 !pt-0 sm:!max-w-[90vw]">
+      <DialogContent className="gap-1.75 px-0! pb-0! pt-0! sm:w-fit! sm:max-w-[90vw]!">
         <DialogHeader className="h-11 justify-center px-4">
           <DialogTitle>Compare models</DialogTitle>
         </DialogHeader>
         {rows.length > 0 ? (
-          <div className="-mt-[0.375rem] max-h-[70vh] overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 [&_tbody_tr:last-child]:after:hidden">
+          <div className="-mt-1.5 max-h-[70vh] overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control [&_tbody_tr:last-child]:after:hidden">
             <Table stickyHeader showTopBorder={false}>
               <TableHeader>
                 <TableRow>
@@ -900,7 +900,7 @@ function ModelDetailPanel({
           className="pl-1"
         />
       </div>
-      <div className="h-fit overflow-x-auto whitespace-nowrap px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="h-fit overflow-x-auto whitespace-nowrap px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <TabContainer>
           <TabButton
             isActive={tab === "overview"}
@@ -920,7 +920,7 @@ function ModelDetailPanel({
           </TabButton>
         </TabContainer>
       </div>
-      <div className="overflow-y-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         {tab === "overview" && <DetailOverviewTab model={model} />}
         {tab === "usage" && (
           <DetailYourUsageTab
@@ -1252,7 +1252,7 @@ function YourModelsTab({
   };
 
   return (
-    <div className="overflow-y-auto py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+    <div className="overflow-y-auto py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       <div className="grid grid-cols-1 gap-3 px-3 lg:grid-cols-3">
         <div className="h-[312px]">
           <MetricWidget
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground.$agentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground.$agentParam/route.tsx
index 9b3945709..2c3ac41d7 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground.$agentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground.$agentParam/route.tsx
@@ -458,7 +458,7 @@ function PlaygroundChat() {
 
           {/* Scroll container is always mounted — useAutoScrollToBottom caches
               its container on mount and won't refind it across remounts. */}
-          <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <div
               ref={messagesRootRef}
               className={cn(
@@ -506,7 +506,7 @@ function PlaygroundChat() {
                   ))}
                   {isSubmitted && (
                     <div className="flex justify-start">
-                      <div className="flex items-center gap-2 rounded-lg bg-charcoal-750 px-4 py-2.5">
+                      <div className="flex items-center gap-2 rounded-lg bg-background-hover px-4 py-2.5">
                         <Spinner className="size-3" />
                         <span className="text-sm text-text-dimmed">Thinking…</span>
                       </div>
@@ -557,7 +557,7 @@ function PlaygroundChat() {
                             "rounded px-1.5 py-0.5",
                             msg.mode === "steering"
                               ? "bg-amber-500/10 text-amber-400"
-                              : "bg-charcoal-700 text-text-dimmed"
+                              : "bg-background-raised text-text-dimmed"
                           )}
                         >
                           {msg.mode === "steering" ? "Steering" : "Queued"}
@@ -641,7 +641,7 @@ function ChatComposer({
   footer?: React.ReactNode;
 }) {
   return (
-    <div className="rounded-2xl border border-charcoal-650 bg-background-bright p-2 transition focus-within:border-charcoal-550">
+    <div className="rounded-2xl border border-border-bright bg-background-bright p-2 transition focus-within:border-border-brighter">
       <div className="flex items-end gap-2">
         <textarea
           ref={inputRef}
@@ -650,7 +650,7 @@ function ChatComposer({
           onKeyDown={onKeyDown}
           placeholder={placeholder}
           className={cn(
-            "scrollbar-gutter-stable flex-1 resize-none border-0 bg-transparent px-2 py-1.5 text-sm text-text-bright placeholder-text-dimmed outline-none ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 [field-sizing:content] focus:border-0 focus:outline-none focus:ring-0",
+            "scrollbar-gutter-stable flex-1 resize-none border-0 bg-transparent px-2 py-1.5 text-sm text-text-bright placeholder-text-dimmed outline-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control field-sizing-content focus:border-0 focus:outline-hidden focus:ring-0",
             minHeightClassName,
             maxHeightClassName
           )}
@@ -789,7 +789,7 @@ function PlaygroundSidebar({
         defaultValue="clientData"
         className="flex h-full min-h-0 flex-col overflow-hidden pt-1"
       >
-        <div className="h-fit overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="h-fit overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <ClientTabsList variant="underline" className="mx-3 shrink-0">
             <ClientTabsTrigger
               value="clientData"
@@ -829,7 +829,7 @@ function PlaygroundSidebar({
         {/* Client Data tab */}
         <ClientTabsContent
           value="clientData"
-          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           <div className="min-w-64 space-y-4 p-3">
             <div className="space-y-2">
@@ -839,7 +839,7 @@ function PlaygroundSidebar({
                   Sent with each conversation turn.
                 </Paragraph>
               </div>
-              <div className="overflow-hidden rounded border border-charcoal-650">
+              <div className="overflow-hidden rounded border border-border-bright">
                 <JSONEditor
                   defaultValue={clientDataJson}
                   readOnly={false}
@@ -882,7 +882,7 @@ function PlaygroundSidebar({
         {/* Options tab */}
         <ClientTabsContent
           value="options"
-          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           <div className="space-y-4 p-3">
             <InputGroup fullWidth>
@@ -1020,7 +1020,7 @@ function PlaygroundSidebar({
         {/* Session tab */}
         <ClientTabsContent
           value="session"
-          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           <div className="min-w-64 space-y-3 p-3">
             {session ? (
@@ -1053,7 +1053,7 @@ function PlaygroundSidebar({
         {/* History tab */}
         <ClientTabsContent
           value="history"
-          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           <HistoryTabContent
             conversations={recentConversations}
@@ -1206,7 +1206,7 @@ function ConversationMenu({
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverVerticalEllipseTrigger variant="minimal" />
-      <PopoverContent className="w-fit min-w-[12rem] p-1" align="end">
+      <PopoverContent className="w-fit min-w-48 p-1" align="end">
         <div className="flex flex-col gap-1">
           <PopoverMenuItem
             icon={PlusIcon}
@@ -1301,8 +1301,8 @@ function HistoryTabContent({
           <li key={conv.id}>
             <div
               className={cn(
-                "group flex items-start gap-2 rounded-sm px-2 py-1.5 transition-colors hover:bg-charcoal-800",
-                isActive && "bg-charcoal-750 hover:bg-charcoal-750",
+                "group flex items-start gap-2 rounded-sm px-2 py-1.5 transition-colors hover:bg-background-bright",
+                isActive && "bg-background-hover hover:bg-background-hover",
                 deletingId === conv.id && "pointer-events-none opacity-50"
               )}
             >
@@ -1311,7 +1311,7 @@ function HistoryTabContent({
               </span>
               <Link
                 to={`?conversation=${conv.id}`}
-                className="flex min-w-0 flex-1 flex-col items-start gap-0.5 outline-none focus-custom"
+                className="flex min-w-0 flex-1 flex-col items-start gap-0.5 outline-hidden focus-custom"
               >
                 <Paragraph variant="small/bright" className="line-clamp-1 text-left">
                   {conv.title}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index bbd53d78e..a10461bdf 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -549,7 +549,7 @@ export default function PromptDetailPage() {
                       ? "bg-amber-400"
                       : isCurrent
                         ? "bg-green-500"
-                        : "bg-charcoal-550"
+                        : "bg-surface-control-hover"
                   )}
                 />
                 <span className="text-xs text-text-dimmed">v{selectedVersion.version}</span>
@@ -755,7 +755,7 @@ export default function PromptDetailPage() {
                     )}
 
                     {contentTab === "metrics" && (
-                      <div className="h-full overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                      <div className="h-full overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
                         <MetricsTab
                           prompt={prompt}
                           organizationId={organizationId}
@@ -785,7 +785,7 @@ export default function PromptDetailPage() {
           >
             <div className="grid h-full max-h-full grid-rows-[2rem_1fr] overflow-hidden bg-background-bright">
               {/* Tabs */}
-              <div className="overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+              <div className="overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
                 <TabContainer>
                   <TabButton
                     isActive={tab === "details"}
@@ -817,7 +817,7 @@ export default function PromptDetailPage() {
               {/* Tab content */}
               <div
                 className={cn(
-                  "overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+                  "overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",
                   tab === "versions" ? "py-0" : "px-3 py-3"
                 )}
               >
@@ -924,7 +924,7 @@ function OverrideDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="flex h-[85vh] max-h-[85vh] flex-col !gap-0 overflow-hidden pl-0 pr-3 pt-0 md:max-w-4xl lg:max-w-6xl">
+      <DialogContent className="flex h-[85vh] max-h-[85vh] flex-col gap-0! overflow-hidden pl-0 pr-3 pt-0 md:max-w-4xl lg:max-w-6xl">
         <DialogHeader className="px-4 py-2.5">
           {isEditingOverride ? "Edit override" : "Create override"}
         </DialogHeader>
@@ -948,7 +948,7 @@ function OverrideDialog({
 
           {/* Right panel: properties */}
           <ResizablePanel id="override-sidebar" min="220px" default="280px" max="360px">
-            <div className="h-full overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+            <div className="h-full overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
               <div className="space-y-4">
                 <div className="space-y-2">
                   <Header3>Override settings</Header3>
@@ -980,7 +980,7 @@ function OverrideDialog({
                     <div className="space-y-1">
                       {variableFields.map((f) => (
                         <div key={f.name} className="flex items-center gap-1.5 text-xs">
-                          <code className="rounded bg-charcoal-750 px-1 py-0.5 text-text-bright">
+                          <code className="rounded bg-background-hover px-1 py-0.5 text-text-bright">
                             {f.name}
                           </code>
                           <span className="text-text-dimmed">{f.type}</span>
@@ -1167,7 +1167,7 @@ function PreviewTab({
                 {field.enumValues ? (
                   <select
                     autoFocus={index === 0}
-                    className="h-6 w-full rounded border border-charcoal-650 bg-background-bright px-1 text-xs text-text-bright focus:border-indigo-500 focus:outline-none"
+                    className="h-6 w-full rounded border border-border-bright bg-background-bright px-1 text-xs text-text-bright focus:border-indigo-500 focus:outline-hidden"
                     value={testVariables[field.name] ?? ""}
                     onChange={(e) =>
                       setTestVariables((prev) => ({
@@ -1504,7 +1504,7 @@ function GenerationsTab({
       <ResizablePanel id="prompt-gen-list" min="200px">
         <div
           ref={listRef}
-          className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           {newGenerationCount > 0 && (
             <div className="sticky top-0 z-20 flex items-center justify-center gap-2 border-b border-grid-dimmed bg-background-bright px-3 py-1.5">
@@ -1563,7 +1563,7 @@ function GenerationsTab({
                     <TableCell
                       className={cn(
                         "tabular-nums",
-                        isSelected ? "text-text-bright" : "text-charcoal-400"
+                        isSelected ? "text-text-bright" : "text-text-dimmed"
                       )}
                     >
                       v{gen.prompt_version}
@@ -1596,7 +1596,7 @@ function GenerationsTab({
                           variant="minimal/small"
                           TrailingIcon={RunsIcon}
                           trailingIconClassName="text-text-bright"
-                          className="h-[1.375rem] pl-1.5 pr-2"
+                          className="h-5.5 pl-1.5 pr-2"
                         >
                           <span className="text-[0.6875rem] text-text-bright">View run</span>
                         </LinkButton>
@@ -2081,7 +2081,9 @@ function VersionsTab({
             onClick={() => onSelectVersion(v.version)}
             className={cn(
               "flex cursor-pointer items-center gap-3 px-3 py-3 text-sm transition",
-              isSelected ? "bg-indigo-500/10 hover:bg-indigo-500/[0.07]" : "hover:bg-charcoal-750"
+              isSelected
+                ? "bg-indigo-500/10 hover:bg-indigo-500/[0.07]"
+                : "hover:bg-background-hover"
             )}
           >
             <RadioButtonCircle checked={isSelected} />
@@ -2090,7 +2092,7 @@ function VersionsTab({
                 <div
                   className={cn(
                     "size-2 shrink-0 rounded-full",
-                    isOverride ? "bg-amber-400" : isCurrent ? "bg-green-500" : "bg-charcoal-600"
+                    isOverride ? "bg-amber-400" : isCurrent ? "bg-green-500" : "bg-surface-control"
                   )}
                 />
                 <span className="font-medium text-text-bright">v{v.version}</span>
@@ -2143,9 +2145,9 @@ function PromptCopyPopover({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger className="-ml-1.5 flex items-center gap-1 rounded py-1.5 pl-2 pr-1.5 font-mono text-xs text-text-dimmed transition focus-custom hover:bg-charcoal-750 hover:text-text-bright">
+      <PopoverTrigger className="-ml-1.5 flex items-center gap-1 rounded py-1.5 pl-2 pr-1.5 font-mono text-xs text-text-dimmed transition focus-custom hover:bg-background-hover hover:text-text-bright">
         {slug}
-        <ChevronUpDownIcon className="size-4 text-charcoal-500" />
+        <ChevronUpDownIcon className="size-4 text-text-faint" />
       </PopoverTrigger>
       <PopoverContent
         align="start"
@@ -2214,7 +2216,7 @@ function CopyPopoverItem({
             "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition",
             copied
               ? "text-green-500"
-              : "text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+              : "text-text-dimmed hover:bg-background-raised hover:text-text-bright"
           )}
         >
           {copied ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
index 5d8b0b457..651ce47c7 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
@@ -114,27 +114,27 @@ export default function PromptsPage() {
               <TableHeaderCell>Model</TableHeaderCell>
               <TableHeaderCell
                 tooltip={
-                  <div className="flex max-w-[16rem] flex-col gap-3 p-1 pb-2">
+                  <div className="flex max-w-64 flex-col gap-3 p-1 pb-2">
                     <div className="flex flex-col gap-2">
                       <div>
                         <div className="mb-0.5 flex items-center gap-2">
                           <span className="size-1.5 shrink-0 rounded-full bg-success" />
-                          <Paragraph variant="small" className="!text-wrap text-text-bright">
+                          <Paragraph variant="small" className="text-wrap! text-text-bright">
                             Latest version
                           </Paragraph>
                         </div>
-                        <Paragraph variant="small" className="!text-wrap pl-3.5 text-text-dimmed">
+                        <Paragraph variant="small" className="text-wrap! pl-3.5 text-text-dimmed">
                           Running the most recently published version.
                         </Paragraph>
                       </div>
                       <div>
                         <div className="mb-0.5 flex items-center gap-2">
                           <span className="size-1.5 shrink-0 rounded-full bg-warning" />
-                          <Paragraph variant="small" className="!text-wrap text-text-bright">
+                          <Paragraph variant="small" className="text-wrap! text-text-bright">
                             Version overridden
                           </Paragraph>
                         </div>
-                        <Paragraph variant="small" className="!text-wrap pl-3.5 text-text-dimmed">
+                        <Paragraph variant="small" className="text-wrap! pl-3.5 text-text-dimmed">
                           Pinned to an older version instead of the latest.
                         </Paragraph>
                       </div>
@@ -231,7 +231,7 @@ function UsageSparkline({ data }: { data?: number[] }) {
 
   return (
     <div className="flex items-start gap-2">
-      <div className="h-6 w-[7rem] rounded-sm">
+      <div className="h-6 w-28 rounded-sm">
         <ResponsiveContainer width="100%" height="100%">
           <BarChart data={chartData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
             <YAxis domain={[0, max || 1]} hide />
@@ -244,14 +244,19 @@ function UsageSparkline({ data }: { data?: number[] }) {
             />
             <Bar
               dataKey="count"
-              fill="#3B82F6"
+              fill="var(--color-pending)"
               strokeWidth={0}
               isAnimationActive={false}
               minPointSize={1}
             />
-            <ReferenceLine y={0} stroke="#2C3034" strokeWidth={1} />
+            <ReferenceLine y={0} stroke="var(--color-border-bright)" strokeWidth={1} />
             {max > 0 && (
-              <ReferenceLine y={max} stroke="#4D525B" strokeDasharray="4 4" strokeWidth={1} />
+              <ReferenceLine
+                y={max}
+                stroke="var(--color-border-brighter)"
+                strokeDasharray="4 4"
+                strokeWidth={1}
+              />
             )}
           </BarChart>
         </ResponsiveContainer>
@@ -271,7 +276,7 @@ function UsageSparklineTooltip({ active, payload }: TooltipProps<number, string>
   return (
     <TooltipPortal active={active}>
       <div className="rounded-sm border border-grid-bright bg-background-dimmed px-3 py-2">
-        <Header3 className="border-b border-b-charcoal-650 pb-2">{formattedDate}</Header3>
+        <Header3 className="border-b border-b-border-bright pb-2">{formattedDate}</Header3>
         <div className="mt-2 text-xs text-text-bright">
           <span className="tabular-nums">{entry.count.toLocaleString()}</span>{" "}
           <span className="text-text-dimmed">{entry.count === 1 ? "call" : "calls"}</span>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
index baba6db65..a901d33bf 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
@@ -57,7 +57,7 @@ export function AITabContent({
                   key: (prev?.key ?? 0) + 1,
                 }));
               }}
-              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-charcoal-600 px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500 focus-custom focus-visible:!rounded-full"
+              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-border-bright px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500 focus-custom focus-visible:rounded-full!"
             >
               <SparkleListIcon className="size-4 shrink-0 text-text-dimmed transition group-hover:text-indigo-500" />
               <Paragraph
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx
index daa7187ac..6b8b09455 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx
@@ -36,7 +36,7 @@ export function QueryHelpSidebar({
         onValueChange={onTabChange}
         className="flex min-h-0 flex-col overflow-hidden pt-1"
       >
-        <div className="h-fit overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="h-fit overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <ClientTabsList variant="underline" className="mx-3 shrink-0">
             <ClientTabsTrigger
               value="ai"
@@ -76,7 +76,7 @@ export function QueryHelpSidebar({
         </div>
         <ClientTabsContent
           value="ai"
-          className="min-h-0 flex-1 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-h-0 flex-1 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           <div className="min-w-64 p-3">
             <AITabContent
@@ -89,7 +89,7 @@ export function QueryHelpSidebar({
         </ClientTabsContent>
         <ClientTabsContent
           value="guide"
-          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           <div className="min-w-64 p-3">
             <TRQLGuideContent onTryExample={onTryExample} />
@@ -97,7 +97,7 @@ export function QueryHelpSidebar({
         </ClientTabsContent>
         <ClientTabsContent
           value="schema"
-          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           <div className="min-w-64 p-3">
             <TableSchemaContent />
@@ -105,7 +105,7 @@ export function QueryHelpSidebar({
         </ClientTabsContent>
         <ClientTabsContent
           value="examples"
-          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           <div className="min-w-64 p-3">
             <ExamplesContent onTryExample={onTryExample} />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
index de7e7a79e..54b95fa57 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
@@ -105,13 +105,13 @@ export function QueryHistoryPopover({
       </PopoverTrigger>
       <PopoverPrimitive.Content
         className={cn(
-          "z-50 w-[400px] min-w-0 overflow-hidden rounded border border-charcoal-700 bg-background-bright p-0 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          "z-50 w-[400px] min-w-0 overflow-hidden rounded border border-grid-bright bg-background-bright p-0 shadow-md outline-hidden animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
         )}
         align="start"
         sideOffset={6}
         style={{ maxHeight: "var(--radix-popover-content-available-height)" }}
       >
-        <div className="max-h-[40rem] overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="max-h-160 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <div className="p-1">
             {history.map((item) => {
               // Format time filter display
@@ -129,7 +129,7 @@ export function QueryHistoryPopover({
                     onQuerySelected(item);
                     setIsOpen(false);
                   }}
-                  className="flex w-full flex-col gap-1 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-750"
+                  className="flex w-full flex-col gap-1 rounded-sm px-2 py-2 outline-hidden transition-colors focus-custom hover:bg-background-hover"
                 >
                   <div className="flex w-full flex-col items-start">
                     {item.title ? (
@@ -147,7 +147,7 @@ export function QueryHistoryPopover({
                       {item.userName && <span>· {item.userName}</span>}
                     </div>
                   </div>
-                  <div className="w-full border-l-2 border-charcoal-600 pl-2.5">
+                  <div className="w-full border-l-2 border-border-bright pl-2.5">
                     <p className="line-clamp-4 w-full whitespace-pre-wrap text-left font-mono text-xs text-text-dimmed">
                       {highlightSQL(item.query)}
                     </p>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
index bfe7bf08f..ff2e8f7dd 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
@@ -49,14 +49,14 @@ function FunctionCategory({ title, functions }: { title: string; functions: Func
           <SimpleTooltip
             key={fn.name}
             button={
-              <code className="cursor-help rounded bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs text-indigo-400 transition-colors hover:bg-charcoal-700 hover:text-indigo-300">
+              <code className="cursor-help rounded bg-background-hover px-1.5 py-0.5 font-mono text-xxs text-indigo-400 transition-colors hover:bg-background-raised hover:text-indigo-300">
                 {fn.name}
               </code>
             }
             content={
               <div className="max-w-xs space-y-1">
                 <div className="text-text-bright">{fn.desc}</div>
-                <code className="block rounded bg-charcoal-800 px-1.5 py-1 font-mono text-xxs text-indigo-300">
+                <code className="block rounded bg-background-bright px-1.5 py-1 font-mono text-xxs text-indigo-300">
                   {fn.example}
                 </code>
               </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TableSchemaContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TableSchemaContent.tsx
index 285a1f687..3ab2a4b41 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TableSchemaContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TableSchemaContent.tsx
@@ -23,7 +23,7 @@ function ColumnHelpItem({ col }: { col: ColumnSchema }) {
           <span className="text-xs text-text-dimmed">Example:</span>
           <CopyableText
             value={col.example}
-            className="rounded-sm bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs"
+            className="rounded-sm bg-background-hover px-1.5 py-0.5 font-mono text-xxs"
           />
         </div>
       )}
@@ -34,7 +34,7 @@ function ColumnHelpItem({ col }: { col: ColumnSchema }) {
             <CopyableText
               key={value}
               value={col.valueMap?.[value] ?? value}
-              className="rounded-sm bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs"
+              className="rounded-sm bg-background-hover px-1.5 py-0.5 font-mono text-xxs"
             />
           ))}
         </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
index 877b1235a..f8063b812 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
@@ -469,7 +469,7 @@ export default function Page() {
                             <Header3>Environment</Header3>
                             <Paragraph
                               variant="small"
-                              className="!text-wrap text-text-dimmed"
+                              className="text-wrap! text-text-dimmed"
                               spacing
                             >
                               This queue is limited by your environment's concurrency limit of{" "}
@@ -480,7 +480,7 @@ export default function Page() {
                             <Header3>User</Header3>
                             <Paragraph
                               variant="small"
-                              className="!text-wrap text-text-dimmed"
+                              className="text-wrap! text-text-dimmed"
                               spacing
                             >
                               This queue is limited by a concurrency limit set in your code.
@@ -490,7 +490,7 @@ export default function Page() {
                             <Header3>Override</Header3>
                             <Paragraph
                               variant="small"
-                              className="!text-wrap text-text-dimmed"
+                              className="text-wrap! text-text-dimmed"
                               spacing
                             >
                               This queue's concurrency limit has been manually overridden from the
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx
index f6b3f9e4d..783b60cb1 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx
@@ -174,7 +174,7 @@ export default function Page() {
                       <TableHeaderCell
                         alignment="right"
                         tooltip={
-                          <div className="max-w-[12rem]">
+                          <div className="max-w-48">
                             <Paragraph variant="small">
                               When you trigger a run it will execute in your default region, unless
                               you override the region when triggering.
@@ -277,7 +277,7 @@ export default function Page() {
                       })
                     )}
 
-                    <TableRow className="h-[3.125rem]">
+                    <TableRow className="h-12.5">
                       <TableCell colSpan={isAdmin ? 5 : 4}>
                         <Paragraph variant="extra-small">Suggest a new region</Paragraph>
                       </TableCell>
@@ -368,7 +368,7 @@ function SetDefaultDialog({
 
             <div className="my-4 flex">
               <div className="flex flex-1 flex-col rounded-md border border-grid-dimmed">
-                <div className="border-b border-grid-dimmed bg-charcoal-800 p-3 font-medium">
+                <div className="border-b border-grid-dimmed bg-background-bright p-3 font-medium">
                   <Paragraph variant="small/bright">Current default</Paragraph>
                 </div>
                 <div className="border-b border-grid-dimmed p-3">
@@ -401,14 +401,14 @@ function SetDefaultDialog({
 
               {/* Middle column with arrow */}
               <div className="flex items-center justify-center px-3">
-                <div className="flex size-10 items-center justify-center rounded-full border border-grid-dimmed bg-charcoal-800 p-2">
+                <div className="flex size-10 items-center justify-center rounded-full border border-grid-dimmed bg-background-bright p-2">
                   <ArrowRightIcon className="size-4 text-text-dimmed" />
                 </div>
               </div>
 
               {/* Right column */}
               <div className="flex flex-1 flex-col rounded-md border border-grid-dimmed">
-                <div className="border-b border-grid-dimmed bg-charcoal-800 p-3 font-medium">
+                <div className="border-b border-grid-dimmed bg-background-bright p-3 font-medium">
                   <Paragraph variant="small/bright">New default</Paragraph>
                 </div>
                 <div className="border-b border-grid-dimmed p-3">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index d72655900..34d9a613d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -472,7 +472,7 @@ export default function Page() {
               <CopyableText
                 value={run.friendlyId}
                 variant="text-below"
-                className="-ml-[0.4375rem] h-6 px-1.5 font-mono text-xs hover:text-text-bright"
+                className="-ml-1.75 h-6 px-1.5 font-mono text-xs hover:text-text-bright"
               />
               {tableState && (
                 <div className="flex">
@@ -658,7 +658,7 @@ function TraceView({
         >
           <div className="flex h-full flex-col overflow-hidden">
             {isTruncated && (
-              <div className="shrink-0 border-b border-charcoal-700 px-3 py-2">
+              <div className="shrink-0 border-b border-grid-bright px-3 py-2">
                 <Callout variant="warning" className="text-sm">
                   {missingAnchor
                     ? "Trace too large to display completely."
@@ -1015,7 +1015,7 @@ function TasksTreeView({
                   }}
                 />
               ) : (
-                <Paragraph variant="extra-small" className="flex-1 pl-3 text-charcoal-500">
+                <Paragraph variant="extra-small" className="flex-1 pl-3 text-text-faint">
                   This is the root task
                 </Paragraph>
               )}
@@ -1059,7 +1059,7 @@ function TasksTreeView({
                       <div
                         className={cn(
                           "flex h-8 w-4 items-center",
-                          node.hasChildren && "hover:bg-charcoal-600"
+                          node.hasChildren && "hover:bg-surface-control"
                         )}
                         onClick={(e) => {
                           e.stopPropagation();
@@ -1077,9 +1077,9 @@ function TasksTreeView({
                       >
                         {node.hasChildren ? (
                           state.expanded ? (
-                            <ChevronDownIcon className="h-4 w-4 text-charcoal-400" />
+                            <ChevronDownIcon className="h-4 w-4 text-text-dimmed" />
                           ) : (
-                            <ChevronRightIcon className="h-4 w-4 text-charcoal-400" />
+                            <ChevronRightIcon className="h-4 w-4 text-text-dimmed" />
                           )
                         ) : (
                           <div className="h-8 w-4" />
@@ -1159,7 +1159,7 @@ function TasksTreeView({
             <Popover>
               <PopoverArrowTrigger>Shortcuts</PopoverArrowTrigger>
               <PopoverContent
-                className="min-w-[20rem] overflow-y-auto p-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+                className="min-w-80 overflow-y-auto p-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
                 align="start"
               >
                 <Header3 spacing>Keyboard shortcuts</Header3>
@@ -1255,7 +1255,7 @@ function TimelineView({
 
   return (
     <div
-      className="h-full overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+      className="h-full overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
       ref={timelineContainerRef}
     >
       <Timeline.Root
@@ -1400,7 +1400,7 @@ function TimelineView({
                               {(ms) => (
                                 <motion.div
                                   className={cn(
-                                    "-ml-[0.5px] h-[0.5625rem] w-px rounded-none",
+                                    "ml-[-0.5px] h-2.25 w-px rounded-none",
                                     eventBackgroundClassName(node.data)
                                   )}
                                   layoutId={
@@ -1421,7 +1421,7 @@ function TimelineView({
                               {(ms) => (
                                 <motion.div
                                   className={cn(
-                                    "-ml-[0.1562rem] size-[0.3125rem] rounded-full border bg-background-bright",
+                                    "ml-[-0.1562rem] size-1.25 rounded-full border bg-background-bright",
                                     eventBorderClassName(node.data)
                                   )}
                                   layoutId={
@@ -1738,7 +1738,7 @@ function SpanWithDuration({
         className={cn(
           "relative flex h-4 w-full min-w-0.5 items-center",
           eventBackgroundClassName(node.data),
-          fadeLeft ? "rounded-r-sm bg-gradient-to-r from-black/50 to-transparent" : "rounded-sm"
+          fadeLeft ? "rounded-r-sm bg-linear-to-r from-black/50 to-transparent" : "rounded-sm"
         )}
         style={{ backgroundSize: "20px 100%", backgroundRepeat: "no-repeat" }}
         layoutId={disableAnimations ? undefined : node.id}
@@ -1806,7 +1806,7 @@ function CurrentTimeIndicator({
           <div className="relative z-50 flex h-full flex-col">
             <div className="relative flex h-6 items-end">
               <div
-                className="absolute w-fit whitespace-nowrap rounded-sm border border-charcoal-600 bg-charcoal-750 px-1 py-0.5 text-xxs tabular-nums text-text-bright"
+                className="absolute w-fit whitespace-nowrap rounded-sm border border-border-bright bg-background-hover px-1 py-0.5 text-xxs tabular-nums text-text-bright"
                 style={{
                   left: `${offset * 100}%`,
                   transform: `translateX(-${offset * 100}%)`,
@@ -1831,7 +1831,7 @@ function CurrentTimeIndicator({
                 )}
               </div>
             </div>
-            <div className="w-px grow border-r border-charcoal-600" />
+            <div className="w-px grow border-r border-border-bright" />
           </div>
         );
       }}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.sessions.$sessionParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.sessions.$sessionParam/route.tsx
index 7d07cb928..19773257d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.sessions.$sessionParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.sessions.$sessionParam/route.tsx
@@ -196,7 +196,7 @@ function ConversationPane({ session }: { session: LoadedSession }) {
       ) : (
         <>
           <ConversationUtilityBar isRaw={isRaw} onChangeView={setView} />
-          <div className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <AgentView agentView={session.agentView} />
           </div>
         </>
@@ -490,10 +490,10 @@ function RawConversationView({
   return (
     <>
       <ConversationUtilityBar isRaw={isRaw} onChangeView={onChangeView} right={controls} />
-      <div className="flex min-h-0 flex-1 flex-col bg-charcoal-900">
+      <div className="flex min-h-0 flex-1 flex-col bg-background-deep">
         <div
           ref={scrollRef}
-          className="flex-1 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="flex-1 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         >
           <div
             className="font-mono text-xs leading-tight"
@@ -601,7 +601,7 @@ function StreamColumnHeader({
   return (
     <div
       className={cn(
-        "relative flex h-9 select-none items-center bg-charcoal-900 font-sans text-sm font-medium leading-normal text-text-bright after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
+        "relative flex h-9 select-none items-center bg-background-deep font-sans text-sm font-medium leading-normal text-text-bright after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
         className
       )}
     >
@@ -657,7 +657,7 @@ function MergedStreamRow({
     <div
       ref={measure}
       data-index={index}
-      className="group flex items-start py-1 hover:bg-charcoal-800"
+      className="group flex items-start py-1 hover:bg-background-bright"
       style={{
         position: "absolute",
         top: 0,
@@ -667,12 +667,12 @@ function MergedStreamRow({
       }}
     >
       <div
-        className="flex-none select-none pl-2 text-right text-charcoal-500"
+        className="flex-none select-none pl-2 text-right text-text-faint"
         style={{ width: `${rowNumberWidthCh}ch` }}
       >
         {lineNumber}
       </div>
-      <div className="flex-none select-none pl-3 text-charcoal-500" style={{ width: timeColWidth }}>
+      <div className="flex-none select-none pl-3 text-text-faint" style={{ width: timeColWidth }}>
         {timestamp}
       </div>
       <div className="flex-none px-3" style={{ width: typeColWidth }}>
@@ -693,7 +693,7 @@ function MergedStreamRow({
       <div
         className={cn(
           "min-w-0 flex-1 px-3 text-text-bright",
-          isWrapped ? "whitespace-pre-wrap break-words" : "whitespace-nowrap"
+          isWrapped ? "whitespace-pre-wrap wrap-break-word" : "whitespace-nowrap"
         )}
       >
         {isWrapped ? wrappedData : inlineData}
@@ -721,7 +721,7 @@ function InspectorPane({ session, status }: { session: LoadedSession; status: Se
           <span className="truncate font-mono text-sm text-text-dimmed">{session.friendlyId}</span>
         </div>
       </div>
-      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <TabContainer>
           <TabButton
             isActive={tab === "overview"}
@@ -749,7 +749,7 @@ function InspectorPane({ session, status }: { session: LoadedSession; status: Se
           </TabButton>
         </TabContainer>
       </div>
-      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         {tab === "overview" ? (
           <OverviewTab session={session} status={status} />
         ) : tab === "runs" ? (
@@ -1044,12 +1044,12 @@ function TimelineRow({
   return (
     <div className="flex gap-3">
       <div className="flex flex-none flex-col items-center">
-        <div className="my-1.5 size-2.5 shrink-0 rounded-full border border-charcoal-500" />
+        <div className="my-1.5 size-2.5 shrink-0 rounded-full border border-border-brightest" />
         {!isLast &&
           (lineVariant === "dashed" ? (
-            <div className="flex-1 border-l border-dashed border-charcoal-600" />
+            <div className="flex-1 border-l border-dashed border-border-bright" />
           ) : (
-            <div className="w-px flex-1 bg-charcoal-600" />
+            <div className="w-px flex-1 bg-surface-control" />
           ))}
       </div>
       <div className={cn("flex min-w-0 flex-1 flex-col gap-0.5", !isLast && "pb-4")}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.dashboard/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.dashboard/route.tsx
index 2d9ac6cd8..e6fcb09bb 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.dashboard/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.dashboard/route.tsx
@@ -329,7 +329,7 @@ function EmptyContent({
         <button
           type="button"
           onClick={copyExample}
-          className="inline-flex items-center rounded border border-charcoal-700 bg-background-bright px-2 py-1 text-xs text-text-dimmed transition-colors hover:text-text-bright"
+          className="inline-flex items-center rounded border border-grid-bright bg-background-bright px-2 py-1 text-xs text-text-dimmed transition-colors hover:text-text-bright"
         >
           Copy example code
         </button>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx
index 614d7ce4b..9ef03b5c1 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx
@@ -321,7 +321,7 @@ export default function Page() {
                       <TypedAwait resolve={runList} errorElement={<TableLoading />}>
                         {(list) =>
                           list ? (
-                            <div className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                            <div className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
                               <TaskRunsTable
                                 total={list.runs.length}
                                 hasFilters={list.hasFilters}
@@ -751,7 +751,7 @@ function ScheduledTaskDetailSidebar({
         </LinkButton>
       </div>
       <div className="flex h-8 items-end justify-between gap-2 border-b border-grid-bright pl-3 pr-1.5">
-        <TabContainer className="!border-b-0">
+        <TabContainer className="border-b-0!">
           <TabButton
             isActive={activeTab === "overview"}
             layoutId="scheduled-task-detail-tabs"
@@ -780,7 +780,7 @@ function ScheduledTaskDetailSidebar({
         ) : null}
       </div>
       {activeTab === "overview" ? (
-        <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <Property.Table>
             <Property.Item>
               <Property.Label>Identifier</Property.Label>
@@ -861,7 +861,7 @@ function ScheduledTaskDetailSidebar({
           ) : null}
         </div>
       ) : (
-        <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           {scheduleList ? (
             sortedSchedules.length === 0 ? (
               <div className="p-3">
@@ -1021,7 +1021,7 @@ function ActivityChartSkeleton() {
   return (
     <div className="flex min-h-0 flex-1 items-end gap-px rounded-sm">
       {Array.from({ length: 42 }).map((_, i) => (
-        <div key={i} className="h-full flex-1 bg-charcoal-850" />
+        <div key={i} className="h-full flex-1 bg-background-dimmed" />
       ))}
     </div>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
index b02a39133..f38124f25 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
@@ -200,7 +200,7 @@ export default function Page() {
                       <TypedAwait resolve={runList} errorElement={<TableLoading />}>
                         {(list) =>
                           list ? (
-                            <div className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                            <div className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
                               <TaskRunsTable
                                 total={list.runs.length}
                                 hasFilters={list.hasFilters}
@@ -263,7 +263,7 @@ function TaskDetailSidebar({
           Test task
         </LinkButton>
       </div>
-      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <Property.Table>
           <Property.Item>
             <Property.Label>Identifier</Property.Label>
@@ -417,7 +417,7 @@ function ActivityChartSkeleton() {
   return (
     <div className="flex min-h-0 flex-1 items-end gap-px rounded-sm">
       {Array.from({ length: 42 }).map((_, i) => (
-        <div key={i} className="h-full flex-1 bg-charcoal-850" />
+        <div key={i} className="h-full flex-1 bg-background-dimmed" />
       ))}
     </div>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/AIPayloadTabContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/AIPayloadTabContent.tsx
index c5ec45b4e..d48a85f00 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/AIPayloadTabContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/AIPayloadTabContent.tsx
@@ -233,7 +233,7 @@ export function AIPayloadTabContent({
               onChange={(e) => setPrompt(e.target.value)}
               disabled={isLoading}
               rows={5}
-              className="m-0 min-h-10 w-full resize-none border-0 bg-background-bright px-3 py-2.5 text-sm text-text-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 placeholder:text-text-dimmed focus:border-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
+              className="focus-custom m-0 min-h-10 w-full resize-none border-0 bg-background-bright px-3 py-2.5 text-sm text-text-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control placeholder:text-text-dimmed focus:border-0 focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50"
               onKeyDown={(e) => {
                 if (e.key === "Enter" && !e.shiftKey && prompt.trim() && !isLoading) {
                   e.preventDefault();
@@ -332,7 +332,7 @@ export function AIPayloadTabContent({
                               void navigator.clipboard.writeText(lastPayload);
                             }
                           }}
-                          className="rounded p-1 text-text-dimmed transition-colors hover:bg-charcoal-700 hover:text-text-bright"
+                          className="rounded p-1 text-text-dimmed transition-colors hover:bg-background-raised hover:text-text-bright"
                         >
                           <ClipboardIcon className="size-4" />
                         </button>
@@ -356,7 +356,7 @@ export function AIPayloadTabContent({
                           setShowThinking(false);
                           setThinking("");
                         }}
-                        className="rounded p-1 text-text-dimmed transition-colors hover:bg-charcoal-700 hover:text-text-bright"
+                        className="rounded p-1 text-text-dimmed transition-colors hover:bg-background-raised hover:text-text-bright"
                       >
                         <XMarkIcon className="size-4" />
                       </button>
@@ -367,20 +367,20 @@ export function AIPayloadTabContent({
               <div
                 className={cn(
                   "streamdown-container max-h-96 overflow-y-auto text-xs text-text-dimmed",
-                  "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+                  "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",
                   // Strip Streamdown's code-block chrome
-                  "[&_[data-streamdown=code-block-header]]:hidden",
-                  "[&_[data-streamdown=code-block]]:!border-0",
-                  "[&_[data-streamdown=code-block]]:!bg-transparent",
-                  "[&_[data-streamdown=code-block]]:!p-0",
-                  "[&_[data-streamdown=code-block]]:!my-0",
-                  "[&_[data-streamdown=code-block]]:!gap-0",
+                  "**:data-[streamdown=code-block-header]:hidden",
+                  "**:data-[streamdown=code-block]:border-0!",
+                  "**:data-[streamdown=code-block]:bg-transparent!",
+                  "**:data-[streamdown=code-block]:p-0!",
+                  "**:data-[streamdown=code-block]:my-0!",
+                  "**:data-[streamdown=code-block]:gap-0!",
                   // Strip the inner code-block-body border (it draws a faint inset frame)
-                  "[&_[data-streamdown=code-block-body]]:!border-0",
+                  "**:data-[streamdown=code-block-body]:border-0!",
                   // Style Streamdown's inner code-block (where the horizontal scrollbar lives)
-                  "[&_[data-streamdown=code-block-body]]:scrollbar-thin",
-                  "[&_[data-streamdown=code-block-body]]:scrollbar-track-transparent",
-                  "[&_[data-streamdown=code-block-body]]:scrollbar-thumb-charcoal-600"
+                  "**:data-[streamdown=code-block-body]:scrollbar-thin",
+                  "**:data-[streamdown=code-block-body]:scrollbar-track-transparent",
+                  "**:data-[streamdown=code-block-body]:scrollbar-thumb-surface-control"
                 )}
               >
                 <Suspense fallback={<p className="whitespace-pre-wrap">{thinking}</p>}>
@@ -407,7 +407,7 @@ export function AIPayloadTabContent({
                 setPrompt(example);
                 submitGeneration(example);
               }}
-              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-charcoal-600 px-4 py-2 transition-colors focus-custom hover:border-solid hover:border-indigo-500 focus-visible:!rounded-full disabled:cursor-not-allowed disabled:opacity-50"
+              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-border-bright px-4 py-2 transition-colors focus-custom hover:border-solid hover:border-indigo-500 focus-visible:rounded-full! disabled:cursor-not-allowed disabled:opacity-50"
             >
               <SparkleListIcon className="size-4 shrink-0 text-text-dimmed transition group-hover:text-indigo-500" />
               <Paragraph
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/TestSidebarTabs.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/TestSidebarTabs.tsx
index 9ea8289ab..bf2b57477 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/TestSidebarTabs.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/TestSidebarTabs.tsx
@@ -25,7 +25,7 @@ export function TestSidebarTabs({
       onValueChange={onTabChange}
       className="flex h-full min-h-0 flex-col overflow-hidden pt-1"
     >
-      <div className="h-fit overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="h-fit overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <ClientTabsList variant="underline" className="mx-3 shrink-0">
           <ClientTabsTrigger
             value="options"
@@ -57,19 +57,19 @@ export function TestSidebarTabs({
       </div>
       <ClientTabsContent
         value="options"
-        className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
       >
         {optionsContent}
       </ClientTabsContent>
       <ClientTabsContent
         value="ai"
-        className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
       >
         <div className="min-w-64 p-3">{aiContent}</div>
       </ClientTabsContent>
       <ClientTabsContent
         value="schema"
-        className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
       >
         <div className="min-w-64 p-3">{schemaContent}</div>
       </ClientTabsContent>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
index 582f7f8ef..321d63911 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
@@ -516,7 +516,7 @@ function StandardTaskForm({
 
       <ResizablePanelGroup orientation="horizontal" className="grow">
         <ResizablePanel id="test-task-main" min="300px">
-          <div className="flex h-full flex-col overflow-hidden bg-charcoal-900">
+          <div className="flex h-full flex-col overflow-hidden bg-background-deep">
             <div className="flex-1 overflow-hidden">
               <JSONEditor
                 defaultValue={!tab || tab === "payload" ? defaultPayloadJson : defaultMetadataJson}
@@ -698,7 +698,7 @@ function StandardTaskForm({
                           <SelectItem
                             key={queueItem.value}
                             value={queueItem.value}
-                            className="max-w-[var(--popover-anchor-width)]"
+                            className="max-w-(--popover-anchor-width)"
                             icon={
                               queueItem.type === "task" ? (
                                 <TaskIcon className="size-4 shrink-0 text-blue-500" />
@@ -1022,7 +1022,7 @@ function ScheduledTaskForm({
       <input {...getInputProps(environmentId, { type: "hidden" })} value={environment.id} />
       {/* Main area: scrolling form with the toolbar floating on top-right in the same grid cell */}
       <div className="grid min-h-0 grid-cols-1 grid-rows-1 overflow-hidden">
-        <div className="col-start-1 row-start-1 overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="col-start-1 row-start-1 overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <div className="mx-auto w-fit p-3">
             <div className="mb-6 flex items-center gap-1.5">
               <TaskTriggerSourceIcon source={"SCHEDULED"} />
@@ -1248,7 +1248,7 @@ function ScheduledTaskForm({
                         <SelectItem
                           key={queueItem.value}
                           value={queueItem.value}
-                          className="max-w-[var(--popover-anchor-width)]"
+                          className="max-w-(--popover-anchor-width)"
                           icon={
                             queueItem.type === "task" ? (
                               <TaskIcon className="size-4 shrink-0 text-blue-500" />
@@ -1503,7 +1503,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="min-w-[294px] p-0" align="end" sideOffset={6}>
-        <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <div className="p-1">
             {runs.map((run) => (
               <button
@@ -1513,7 +1513,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
                   onRunSelected(run);
                   setIsRecentRunsPopoverOpen(false);
                 }}
-                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900	"
+                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-hidden transition-colors focus-custom hover:bg-background-deep	"
               >
                 <div className="flex flex-col items-start">
                   <Paragraph variant="small/bright">
@@ -1584,12 +1584,12 @@ function RunTemplatesPopover({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="min-w-[279px] p-0" align="end" sideOffset={6}>
-          <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <div className="p-1">
               {templates.map((template) => (
                 <div
                   key={template.id}
-                  className="group flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors hover:bg-charcoal-900"
+                  className="group flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-hidden transition-colors hover:bg-background-deep"
                 >
                   <button
                     type="button"
@@ -1597,7 +1597,7 @@ function RunTemplatesPopover({
                       onTemplateSelected(template);
                       setIsPopoverOpen(false);
                     }}
-                    className="flex-1 text-left outline-none focus-custom"
+                    className="flex-1 text-left outline-hidden focus-custom"
                   >
                     <div className="flex flex-col items-start">
                       <Paragraph variant="small/bright" className="truncate">
@@ -1660,7 +1660,7 @@ function RunTemplatesPopover({
               damping: 25,
               duration: 0.15,
             }}
-            className="absolute -left-1/2 top-full z-10 mt-1 flex min-w-max max-w-64 items-center gap-1 rounded border border-charcoal-700 bg-background-bright px-2 py-1 text-xs shadow-md outline-none before:absolute before:-top-2 before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-b-charcoal-700 before:content-[''] after:absolute after:-top-[7px] after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-b-background-bright after:content-['']"
+            className="absolute -left-1/2 top-full z-10 mt-1 flex min-w-max max-w-64 items-center gap-1 rounded border border-grid-bright bg-background-bright px-2 py-1 text-xs shadow-md outline-hidden before:absolute before:-top-2 before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-b-grid-bright before:content-[''] after:absolute after:top-[-7px] after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-b-background-bright after:content-['']"
           >
             <CheckCircleIcon className="h-4 w-4 shrink-0 text-success" /> Template saved
             successfully
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx
index a7405ad32..d584d5f97 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx
@@ -114,7 +114,7 @@ export default function Page() {
           className="pl-1"
         />
       </div>
-      <div className="overflow-y-auto pt-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto pt-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="px-3">
           <WaitpointDetailTable waitpoint={waitpoint} />
         </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx
index bcf0483db..185d3e163 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx
@@ -470,7 +470,7 @@ function LogoForm({
                   iconTileClass,
                   mode === "logo"
                     ? "border-indigo-500"
-                    : "border-charcoal-775 hover:border-charcoal-600"
+                    : "border-grid-dimmed hover:border-border-bright"
                 )}
               >
                 {showFavicon ? (
@@ -526,7 +526,7 @@ function LogoForm({
                   type="submit"
                   className={cn(
                     iconTileClass,
-                    avatar.type !== "letters" && "border-charcoal-775 hover:border-charcoal-600"
+                    avatar.type !== "letters" && "border-grid-dimmed hover:border-border-bright"
                   )}
                   style={{
                     borderColor: avatar.type === "letters" ? hex : undefined,
@@ -552,7 +552,7 @@ function LogoForm({
                     className={cn(
                       iconTileClass,
                       !(avatar.type === "icon" && avatar.name === name) &&
-                        "border-charcoal-775 hover:border-charcoal-600"
+                        "border-grid-dimmed hover:border-border-bright"
                     )}
                     style={{
                       borderColor: avatar.type === "icon" && avatar.name === name ? hex : undefined,
@@ -581,12 +581,12 @@ function HexPopover({ avatar, hex }: { avatar: Avatar; hex: string }) {
   return (
     <Popover>
       <PopoverTrigger
-        className={cn(iconTileClass, "border-charcoal-775 hover:border-charcoal-600")}
+        className={cn(iconTileClass, "border-grid-dimmed hover:border-border-bright")}
       >
         <img src={colorWheelIcon} className="m-0 block size-[30px] p-0" />
       </PopoverTrigger>
       <PopoverContent
-        className="overflow-y-auto p-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="overflow-y-auto p-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
         align="start"
         style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
       >
@@ -618,8 +618,10 @@ function HexPopover({ avatar, hex }: { avatar: Avatar; hex: string }) {
               fullWidth
               textAlignLeft
               className={cn(
-                "group-hover:bg-charcoal-700",
-                hex === color.hex ? "bg-charcoal-750 group-hover:bg-charcoal-600/50" : undefined
+                "group-hover:bg-background-raised",
+                hex === color.hex
+                  ? "bg-background-hover group-hover:bg-surface-control/50"
+                  : undefined
               )}
             >
               {color.name}
@@ -636,7 +638,7 @@ function RadioDot({ active }: { active: boolean }) {
     <div
       className={cn(
         "flex shrink-0 items-center justify-center rounded-full border-2 p-0.5 transition",
-        active ? "border-indigo-500" : "border-charcoal-700 hover:border-charcoal-600"
+        active ? "border-indigo-500" : "border-grid-bright hover:border-border-bright"
       )}
     >
       <div
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx
index e6e82e1be..a7950a41e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx
@@ -196,7 +196,7 @@ export default function SlackIntegrationPage() {
         </NavBar>
         <PageBody>
           <div className="flex h-full flex-col items-center justify-center gap-3">
-            <SlackMonoIcon className="mb-2 size-16 text-charcoal-650" />
+            <SlackMonoIcon className="mb-2 size-16 text-secondary" />
             <Header2>No Slack integration found</Header2>
             <Paragraph className="max-w-md text-center text-text-dimmed">
               Your organization doesn't have a Slack integration configured. You can connect Slack
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections._index/route.tsx
index 62ad810e6..cbb1d6370 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections._index/route.tsx
@@ -118,7 +118,7 @@ const STATUS_COLORS: Record<PrivateLinkConnectionStatus, string> = {
   PROVISIONING: "bg-blue-500/20 text-blue-400",
   ACTIVE: "bg-emerald-500/20 text-emerald-400",
   ERROR: "bg-rose-500/20 text-rose-400",
-  DELETING: "bg-charcoal-500/20 text-charcoal-400",
+  DELETING: "bg-surface-control-active/20 text-text-dimmed",
 };
 
 function StatusBadge({ status }: { status: PrivateLinkConnectionStatus }) {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections.new/route.tsx
index 11c1afdc9..1dc9753ac 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections.new/route.tsx
@@ -308,7 +308,7 @@ output "endpoint_service_name" {
               <select
                 value={entry.protocol}
                 onChange={(e) => updatePort(index, "protocol", e.target.value)}
-                className="rounded-md border border-charcoal-700 bg-charcoal-800 px-3 py-2 text-sm text-text-bright"
+                className="rounded-md border border-grid-bright bg-background-bright px-3 py-2 text-sm text-text-bright"
               >
                 <option value="TCP">TCP</option>
                 <option value="UDP">UDP</option>
@@ -363,8 +363,8 @@ output "endpoint_service_name" {
         </Select>
       </InputGroup>
 
-      <div className="rounded-md border border-charcoal-700 bg-charcoal-900">
-        <div className="flex items-center justify-between border-b border-charcoal-700 px-3 py-2">
+      <div className="rounded-md border border-grid-bright bg-background-deep">
+        <div className="flex items-center justify-between border-b border-grid-bright px-3 py-2">
           <span className="text-xs font-medium text-text-dimmed">main.tf</span>
           <button
             type="button"
@@ -454,7 +454,7 @@ After creating everything, give me the VPC Endpoint Service name (it looks like
               <select
                 value={entry.protocol}
                 onChange={(e) => updatePort(index, "protocol", e.target.value)}
-                className="rounded-md border border-charcoal-700 bg-charcoal-800 px-3 py-2 text-sm text-text-bright"
+                className="rounded-md border border-grid-bright bg-background-bright px-3 py-2 text-sm text-text-bright"
               >
                 <option value="TCP">TCP</option>
                 <option value="UDP">UDP</option>
@@ -509,8 +509,8 @@ After creating everything, give me the VPC Endpoint Service name (it looks like
         </Select>
       </InputGroup>
 
-      <div className="rounded-md border border-charcoal-700 bg-charcoal-900">
-        <div className="flex items-center justify-between border-b border-charcoal-700 px-3 py-2">
+      <div className="rounded-md border border-grid-bright bg-background-deep">
+        <div className="flex items-center justify-between border-b border-grid-bright px-3 py-2">
           <span className="text-xs font-medium text-text-dimmed">AI Prompt</span>
           <button
             type="button"
@@ -583,7 +583,7 @@ export default function Page() {
                 className={`rounded-lg border p-4 text-left transition ${
                   setupMethod === "manual"
                     ? "border-indigo-500 bg-indigo-500/10"
-                    : "border-grid-dimmed hover:border-charcoal-600"
+                    : "border-grid-dimmed hover:border-border-bright"
                 }`}
               >
                 <PencilSquareIcon className="mb-2 h-5 w-5 text-indigo-400" />
@@ -598,7 +598,7 @@ export default function Page() {
                 className={`rounded-lg border p-4 text-left transition ${
                   setupMethod === "ai"
                     ? "border-indigo-500 bg-indigo-500/10"
-                    : "border-grid-dimmed hover:border-charcoal-600"
+                    : "border-grid-dimmed hover:border-border-bright"
                 }`}
               >
                 <SparklesIcon className="mb-2 h-5 w-5 text-purple-400" />
@@ -613,7 +613,7 @@ export default function Page() {
                 className={`rounded-lg border p-4 text-left transition ${
                   setupMethod === "terraform"
                     ? "border-indigo-500 bg-indigo-500/10"
-                    : "border-grid-dimmed hover:border-charcoal-600"
+                    : "border-grid-dimmed hover:border-border-bright"
                 }`}
               >
                 <CommandLineIcon className="mb-2 h-5 w-5 text-emerald-400" />
@@ -628,7 +628,7 @@ export default function Page() {
                 className={`rounded-lg border p-4 text-left transition ${
                   setupMethod === "docs"
                     ? "border-indigo-500 bg-indigo-500/10"
-                    : "border-grid-dimmed hover:border-charcoal-600"
+                    : "border-grid-dimmed hover:border-border-bright"
                 }`}
               >
                 <DocumentTextIcon className="mb-2 h-5 w-5 text-amber-400" />
@@ -658,7 +658,7 @@ export default function Page() {
                 <Header3 spacing>Terraform Configuration</Header3>
                 <Paragraph variant="small" className="mb-4">
                   Fill in your resource details below and we'll generate a Terraform script. Run{" "}
-                  <code className="rounded bg-charcoal-800 px-1 py-0.5 text-xs">
+                  <code className="rounded bg-background-bright px-1 py-0.5 text-xs">
                     terraform apply
                   </code>{" "}
                   to create the VPC Endpoint Service, then paste the output service name below.
@@ -757,7 +757,7 @@ export default function Page() {
                     <select
                       {...getSelectProps(targetRegion)}
                       defaultValue={defaultRegion}
-                      className="w-full rounded-md border border-charcoal-700 bg-charcoal-800 px-3 py-2 text-sm text-text-bright"
+                      className="w-full rounded-md border border-grid-bright bg-background-bright px-3 py-2 text-sm text-text-bright"
                     >
                       {availableRegions.map((region: string) => (
                         <option key={region} value={region}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.roles/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.roles/route.tsx
index 41faef9b0..d334fb50f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.roles/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.roles/route.tsx
@@ -129,7 +129,7 @@ export default function Page() {
               </Paragraph>
             ) : null}
           </div>
-          <div className="min-h-0 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="min-h-0 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             {columns.length === 0 ? (
               <EmptyState isUsingPlugin={isUsingPlugin} showSelfServe={showSelfServe} />
             ) : (
@@ -162,7 +162,7 @@ export default function Page() {
                   ) : (
                     grouped.flatMap(({ group, permissions }) => [
                       <TableRow key={`${group}-header`}>
-                        <TableCell colSpan={columns.length + 2} className="bg-charcoal-800">
+                        <TableCell colSpan={columns.length + 2} className="bg-background-bright">
                           <Header3 className="text-xs uppercase tracking-wide text-text-dimmed">
                             {group}
                           </Header3>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.sso/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.sso/route.tsx
index a00ea0d97..aeb54c4df 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.sso/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.sso/route.tsx
@@ -793,7 +793,7 @@ function ActiveConnectionState({
         {activeConnections.map((conn) => (
           <div
             key={conn.id}
-            className="rounded-md border border-grid-bright bg-charcoal-800 px-3 py-2"
+            className="rounded-md border border-grid-bright bg-background-bright px-3 py-2"
           >
             <Paragraph variant="small" className="text-text-bright">
               {conn.name ?? conn.connectionType}
@@ -986,7 +986,7 @@ function DirectorySyncSection({
           {directorySync.directories.map((dir) => (
             <div
               key={dir.id}
-              className="flex items-center justify-between rounded-md border border-grid-bright bg-charcoal-800 px-3 py-2"
+              className="flex items-center justify-between rounded-md border border-grid-bright bg-background-bright px-3 py-2"
             >
               <div>
                 <Paragraph variant="small" className="text-text-bright">
@@ -1173,7 +1173,7 @@ function PortalLinkDialog({
         <DialogDescription>
           {purpose} The link expires 5 minutes after you open this dialog.
         </DialogDescription>
-        <div className="mt-4 break-all rounded-md border border-grid-bright bg-charcoal-800 p-3 font-mono text-xs">
+        <div className="mt-4 break-all rounded-md border border-grid-bright bg-background-bright p-3 font-mono text-xs">
           {url ?? ""}
         </div>
         <DialogFooter>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
index ac6675e32..18664b4f9 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
@@ -449,7 +449,7 @@ export default function Page() {
       </NavBar>
       <PageBody scrollable={false}>
         <div className="grid max-h-full min-h-full grid-rows-[1fr_auto]">
-          <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <div className="mx-auto max-w-3xl px-4 pb-4 pt-20">
               {invites.length > 0 && (
                 <>
@@ -457,7 +457,7 @@ export default function Page() {
                   <ul className="divide-ui-border mb-6 flex w-full flex-col divide-y border-y">
                     {invites.map((invite) => (
                       <li key={invite.id} className="flex items-center gap-4 py-4">
-                        <div className="rounded-md border border-charcoal-750 bg-charcoal-800 p-1.5">
+                        <div className="rounded-md border border-grid-dimmed bg-background-bright p-1.5">
                           <EnvelopeIcon className="size-7 text-text-dimmed" />
                         </div>
                         <div className="flex flex-col gap-0.5">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
index b5b97a0bb..c9e762b3d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
@@ -88,7 +88,7 @@ function MultiSelectField({
       dropdownIcon
       icon={icon}
       items={items}
-      className="h-8 min-w-0 border-0 bg-charcoal-750 pl-2 text-sm text-text-dimmed ring-charcoal-600 transition hover:bg-charcoal-650 hover:text-text-dimmed hover:ring-1"
+      className="h-8 min-w-0 border-0 bg-background-hover pl-2 text-sm text-text-dimmed ring-border-bright transition hover:bg-secondary hover:text-text-dimmed hover:ring-1"
       text={(v) =>
         v.length === 0 ? undefined : (
           <span className="flex min-w-0 items-center text-text-bright">
@@ -359,11 +359,11 @@ export default function Page() {
   const showGoalsOther = selectedGoals.includes(GOALS_OTHER);
 
   return (
-    <AppContainer className="bg-charcoal-900">
+    <AppContainer className="bg-background-deep">
       <BackgroundWrapper>
         <MainCenteredContainer
           variant="onboarding"
-          className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
+          className="max-w-116 rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
         >
           <div>
             <FormTitle
@@ -402,7 +402,7 @@ export default function Page() {
                   />
                 )}
 
-                <div className="border-t border-charcoal-700" />
+                <div className="border-t border-grid-bright" />
                 <InputGroup>
                   <Label>What are you working on?</Label>
                   <input type="hidden" name="workingOn" value={JSON.stringify(selectedWorkingOn)} />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
index f5658bc4d..a01b07936 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
@@ -62,9 +62,9 @@ export default function ChoosePlanPage() {
 
   return (
     <AppContainer>
-      <PageBody className="bg-charcoal-900">
+      <PageBody className="bg-background-deep">
         <BackgroundWrapper>
-          <div className="mx-auto mt-4 flex h-fit min-h-full max-w-[80rem] flex-col items-center justify-center gap-8 lg:mt-0">
+          <div className="mx-auto mt-4 flex h-fit min-h-full max-w-320 flex-col items-center justify-center gap-8 lg:mt-0">
             <Header1 className="text-center">Subscribe for full access</Header1>
             <div className="w-full rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
               <PricingPlans
diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index d917265d9..2c59ec0a1 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -141,11 +141,11 @@ export default function NewOrganizationPage() {
     );
 
   return (
-    <AppContainer className="bg-charcoal-900">
+    <AppContainer className="bg-background-deep">
       <BackgroundWrapper>
         <MainCenteredContainer
           variant="onboarding"
-          className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
+          className="max-w-104 rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
         >
           <FormTitle
             LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
diff --git a/apps/webapp/app/routes/_app.timezones/route.tsx b/apps/webapp/app/routes/_app.timezones/route.tsx
index b9e2704ff..39e3b7b6e 100644
--- a/apps/webapp/app/routes/_app.timezones/route.tsx
+++ b/apps/webapp/app/routes/_app.timezones/route.tsx
@@ -15,13 +15,13 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 export default function Page() {
   const { timezones } = useTypedLoaderData<typeof loader>();
   return (
-    <div className="grid grid-rows-[2.5rem,1fr]">
+    <div className="grid grid-rows-[2.5rem_1fr]">
       <div className="flex items-center border-b border-b-grid-dimmed px-3">
         <Link to="/">
-          <LogoIcon className="relative -top-px mr-2 h-4 w-4 min-w-[1rem]" />
+          <LogoIcon className="relative -top-px mr-2 h-4 w-4 min-w-4" />
         </Link>
       </div>
-      <div className="overflow-y-auto p-8 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto p-8 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <Header1 spacing>Supported timezones</Header1>
         <Paragraph spacing>We support these timezones when creating a schedule.</Paragraph>
         <ul className="">
diff --git a/apps/webapp/app/routes/account.authorization-code.$authorizationCode/route.tsx b/apps/webapp/app/routes/account.authorization-code.$authorizationCode/route.tsx
index 18035a023..5bd9550e6 100644
--- a/apps/webapp/app/routes/account.authorization-code.$authorizationCode/route.tsx
+++ b/apps/webapp/app/routes/account.authorization-code.$authorizationCode/route.tsx
@@ -78,7 +78,7 @@ export default function Page() {
 
   return (
     <AppContainer>
-      <MainCenteredContainer className="max-w-[22rem]">
+      <MainCenteredContainer className="max-w-88">
         <div className="flex flex-col items-center space-y-4">
           {result.success ? (
             <div>
diff --git a/apps/webapp/app/routes/account.security/route.tsx b/apps/webapp/app/routes/account.security/route.tsx
index 68dc8d1fc..4dc6fa76f 100644
--- a/apps/webapp/app/routes/account.security/route.tsx
+++ b/apps/webapp/app/routes/account.security/route.tsx
@@ -50,7 +50,7 @@ export default function Page() {
       </NavBar>
 
       <PageBody>
-        <MainHorizontallyCenteredContainer className="max-w-[37.5rem] overflow-visible">
+        <MainHorizontallyCenteredContainer className="max-w-150 overflow-visible">
           <div className="w-full border-b border-grid-dimmed pb-3">
             <Header2>Security</Header2>
           </div>
diff --git a/apps/webapp/app/routes/account.tokens/route.tsx b/apps/webapp/app/routes/account.tokens/route.tsx
index ad77d16d1..bc3435086 100644
--- a/apps/webapp/app/routes/account.tokens/route.tsx
+++ b/apps/webapp/app/routes/account.tokens/route.tsx
@@ -464,7 +464,7 @@ function RevokePersonalAccessToken({ token }: { token: ObfuscatedPersonalAccessT
         <Dialog>
           <DialogTrigger
             asChild
-            className="size-6 rounded-sm p-1 text-error transition hover:bg-charcoal-700"
+            className="size-6 rounded-sm p-1 text-error transition hover:bg-background-raised"
           >
             <TrashIcon className="size-3" />
           </DialogTrigger>
diff --git a/apps/webapp/app/routes/admin.feature-flags.tsx b/apps/webapp/app/routes/admin.feature-flags.tsx
index 475f3ec67..76ba62ff8 100644
--- a/apps/webapp/app/routes/admin.feature-flags.tsx
+++ b/apps/webapp/app/routes/admin.feature-flags.tsx
@@ -280,7 +280,7 @@ export default function AdminFeatureFlagsRoute() {
                   "flex items-center justify-between rounded-md border px-3 py-2.5",
                   isSet
                     ? "border-indigo-500/20 bg-indigo-500/5"
-                    : "border-transparent bg-charcoal-750"
+                    : "border-transparent bg-background-hover"
                 )}
               >
                 <div className="min-w-0 flex-1">
@@ -292,7 +292,7 @@ export default function AdminFeatureFlagsRoute() {
                   >
                     {isWorkerGroup ? "defaultWorkerInstanceGroup" : key}
                   </div>
-                  <div className="text-xs text-charcoal-400">
+                  <div className="text-xs text-text-dimmed">
                     {isSet
                       ? isWorkerGroup
                         ? resolveWorkerGroupDisplay(values[key] as string)
@@ -453,7 +453,7 @@ function LockedFlagRow({
     <div
       className={cn(
         "flex items-center justify-between rounded-md border px-3 py-2.5",
-        isSet ? "border-indigo-500/20 bg-indigo-500/5" : "border-transparent bg-charcoal-750"
+        isSet ? "border-indigo-500/20 bg-indigo-500/5" : "border-transparent bg-background-hover"
       )}
       title="Managed via database - not editable from this UI"
     >
@@ -461,10 +461,10 @@ function LockedFlagRow({
         <div className={cn("truncate text-sm", isSet ? "text-text-bright" : "text-text-dimmed")}>
           {isWorkerGroup ? "defaultWorkerInstanceGroup" : flagKey}
         </div>
-        <div className="text-xs text-charcoal-400">{displayValue}</div>
+        <div className="text-xs text-text-dimmed">{displayValue}</div>
       </div>
 
-      <LockClosedIcon className="size-4 text-charcoal-500" />
+      <LockClosedIcon className="size-4 text-text-faint" />
     </div>
   );
 }
@@ -541,7 +541,7 @@ function ConfirmDialog({
             changes.map((change) => (
               <div
                 key={change.key}
-                className="rounded-md border border-charcoal-600 bg-charcoal-800 px-3 py-2 font-mono text-xs"
+                className="rounded-md border border-border-bright bg-background-bright px-3 py-2 font-mono text-xs"
               >
                 <div className="font-sans text-sm text-text-bright">{change.key}</div>
                 {change.type === "added" && (
diff --git a/apps/webapp/app/routes/admin.llm-models.$modelId.tsx b/apps/webapp/app/routes/admin.llm-models.$modelId.tsx
index 2d0e99ff7..a3c89610c 100644
--- a/apps/webapp/app/routes/admin.llm-models.$modelId.tsx
+++ b/apps/webapp/app/routes/admin.llm-models.$modelId.tsx
@@ -212,7 +212,7 @@ export default function AdminLlmModelDetailRoute() {
               className={`inline-flex rounded-sm px-1.5 py-0.5 text-[11px] font-medium ${
                 model.source === "admin"
                   ? "bg-amber-500/20 text-amber-400"
-                  : "bg-charcoal-700 text-text-dimmed"
+                  : "bg-background-raised text-text-dimmed"
               }`}
             >
               {model.source ?? "default"}
@@ -349,7 +349,7 @@ export default function AdminLlmModelDetailRoute() {
                   name="pricingUnit"
                   value={pricingUnit}
                   onChange={(e) => setPricingUnit(e.target.value)}
-                  className="w-full rounded border border-grid-dimmed bg-charcoal-750 px-2 py-1.5 text-sm text-text-bright"
+                  className="w-full rounded border border-grid-dimmed bg-background-hover px-2 py-1.5 text-sm text-text-bright"
                 >
                   <option value="">(unset)</option>
                   {PRICING_UNITS.map((u) => (
@@ -493,11 +493,11 @@ function TierEditor({
   const [newUsageType, setNewUsageType] = useState("");
 
   return (
-    <div className="rounded-md border border-grid-dimmed bg-charcoal-800 p-3 space-y-3">
+    <div className="rounded-md border border-grid-dimmed bg-background-bright p-3 space-y-3">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <input
-            className="bg-charcoal-750 text-text-bright rounded px-2 py-1 text-sm border border-grid-dimmed"
+            className="bg-background-hover text-text-bright rounded px-2 py-1 text-sm border border-grid-dimmed"
             value={tier.name}
             onChange={(e) => onChange({ ...tier, name: e.target.value })}
             placeholder="Tier name"
@@ -514,7 +514,7 @@ function TierEditor({
             Priority:
             <input
               type="number"
-              className="w-12 bg-charcoal-750 text-text-bright rounded px-1 py-0.5 text-xs border border-grid-dimmed"
+              className="w-12 bg-background-hover text-text-bright rounded px-1 py-0.5 text-xs border border-grid-dimmed"
               value={tier.priority}
               onChange={(e) => onChange({ ...tier, priority: parseInt(e.target.value) || 0 })}
             />
@@ -538,7 +538,7 @@ function TierEditor({
               <span className="w-48 text-xs font-mono text-text-dimmed">{usageType}</span>
               <input
                 type="text"
-                className="w-32 bg-charcoal-750 text-text-bright rounded px-2 py-0.5 text-xs font-mono border border-grid-dimmed"
+                className="w-32 bg-background-hover text-text-bright rounded px-2 py-0.5 text-xs font-mono border border-grid-dimmed"
                 value={price}
                 onChange={(e) => {
                   const val = parseFloat(e.target.value);
@@ -567,7 +567,7 @@ function TierEditor({
         {/* Add price */}
         <div className="flex items-center gap-2 pt-1">
           <select
-            className="bg-charcoal-750 text-text-dimmed rounded px-2 py-0.5 text-xs border border-grid-dimmed"
+            className="bg-background-hover text-text-dimmed rounded px-2 py-0.5 text-xs border border-grid-dimmed"
             value={newUsageType}
             onChange={(e) => setNewUsageType(e.target.value)}
           >
diff --git a/apps/webapp/app/routes/admin.llm-models._index.tsx b/apps/webapp/app/routes/admin.llm-models._index.tsx
index 13b142e8a..f813da724 100644
--- a/apps/webapp/app/routes/admin.llm-models._index.tsx
+++ b/apps/webapp/app/routes/admin.llm-models._index.tsx
@@ -222,7 +222,7 @@ export default function AdminLlmModelsRoute() {
         </div>
 
         {/* Model tester */}
-        <div className="rounded-md border border-grid-dimmed bg-charcoal-800 p-3 space-y-2">
+        <div className="rounded-md border border-grid-dimmed bg-background-bright p-3 space-y-2">
           <label className="text-xs font-medium text-text-dimmed">
             Test model string — paste a model name to see which pricing model matches
           </label>
@@ -315,7 +315,7 @@ export default function AdminLlmModelsRoute() {
                         className={`inline-flex rounded-sm px-1.5 py-0.5 text-[11px] font-medium ${
                           model.source === "admin"
                             ? "bg-amber-500/20 text-amber-400"
-                            : "bg-charcoal-700 text-text-dimmed"
+                            : "bg-background-raised text-text-dimmed"
                         }`}
                       >
                         {model.source ?? "default"}
diff --git a/apps/webapp/app/routes/admin.llm-models.missing.$model.tsx b/apps/webapp/app/routes/admin.llm-models.missing.$model.tsx
index 56dc3f4ca..fdecc168c 100644
--- a/apps/webapp/app/routes/admin.llm-models.missing.$model.tsx
+++ b/apps/webapp/app/routes/admin.llm-models.missing.$model.tsx
@@ -96,7 +96,7 @@ export default function AdminMissingModelDetailRoute() {
 
         {/* Token types summary */}
         {tokenSummary.length > 0 && (
-          <div className="rounded-md border border-grid-dimmed bg-charcoal-800 p-3 space-y-2">
+          <div className="rounded-md border border-grid-dimmed bg-background-bright p-3 space-y-2">
             <span className="text-xs font-medium text-text-dimmed">
               Token types seen across samples
             </span>
@@ -104,7 +104,7 @@ export default function AdminMissingModelDetailRoute() {
               {tokenSummary.map((t) => (
                 <span
                   key={t.key}
-                  className="inline-flex items-center gap-1.5 rounded-sm bg-charcoal-700 px-2 py-1 text-xs font-mono"
+                  className="inline-flex items-center gap-1.5 rounded-sm bg-background-raised px-2 py-1 text-xs font-mono"
                 >
                   <span className="text-text-bright">{t.key}</span>
                   <span className="text-text-dimmed">
@@ -159,7 +159,7 @@ export default function AdminMissingModelDetailRoute() {
         )}
 
         {/* Prompt section */}
-        <div className="rounded-md border border-grid-dimmed bg-charcoal-800 p-3 space-y-2">
+        <div className="rounded-md border border-grid-dimmed bg-background-bright p-3 space-y-2">
           <div className="flex items-center justify-between">
             <span className="text-xs font-medium text-text-dimmed">
               Claude Code prompt — paste this to have it add pricing for this model
@@ -168,7 +168,7 @@ export default function AdminMissingModelDetailRoute() {
               {copied ? "Copied!" : "Copy prompt"}
             </Button>
           </div>
-          <pre className="max-h-64 overflow-auto rounded bg-charcoal-900 p-3 text-xs text-text-dimmed font-mono whitespace-pre-wrap">
+          <pre className="max-h-64 overflow-auto rounded bg-background-deep p-3 text-xs text-text-dimmed font-mono whitespace-pre-wrap">
             {prompt}
           </pre>
         </div>
@@ -188,11 +188,14 @@ export default function AdminMissingModelDetailRoute() {
             }
 
             return (
-              <div key={s.span_id} className="rounded-md border border-grid-dimmed bg-charcoal-800">
+              <div
+                key={s.span_id}
+                className="rounded-md border border-grid-dimmed bg-background-bright"
+              >
                 <button
                   type="button"
                   onClick={() => toggleSpan(s.span_id)}
-                  className="w-full flex items-center justify-between p-3 text-left hover:bg-charcoal-750"
+                  className="w-full flex items-center justify-between p-3 text-left hover:bg-background-hover"
                 >
                   <div className="flex items-center gap-3 text-xs">
                     <span className="font-mono text-text-dimmed">{s.span_id.slice(0, 8)}</span>
diff --git a/apps/webapp/app/routes/admin.llm-models.new.tsx b/apps/webapp/app/routes/admin.llm-models.new.tsx
index 23218597a..cb8c3448f 100644
--- a/apps/webapp/app/routes/admin.llm-models.new.tsx
+++ b/apps/webapp/app/routes/admin.llm-models.new.tsx
@@ -309,7 +309,7 @@ export default function AdminLlmModelNewRoute() {
                   name="pricingUnit"
                   value={pricingUnit}
                   onChange={(e) => setPricingUnit(e.target.value)}
-                  className="w-full rounded border border-grid-dimmed bg-charcoal-750 px-2 py-1.5 text-sm text-text-bright"
+                  className="w-full rounded border border-grid-dimmed bg-background-hover px-2 py-1.5 text-sm text-text-bright"
                 >
                   <option value="">(unset)</option>
                   {PRICING_UNITS.map((u) => (
@@ -437,11 +437,11 @@ function TierEditor({
   const [newUsageType, setNewUsageType] = useState("");
 
   return (
-    <div className="rounded-md border border-grid-dimmed bg-charcoal-800 p-3 space-y-3">
+    <div className="rounded-md border border-grid-dimmed bg-background-bright p-3 space-y-3">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <input
-            className="bg-charcoal-750 text-text-bright rounded px-2 py-1 text-sm border border-grid-dimmed"
+            className="bg-background-hover text-text-bright rounded px-2 py-1 text-sm border border-grid-dimmed"
             value={tier.name}
             onChange={(e) => onChange({ ...tier, name: e.target.value })}
             placeholder="Tier name"
@@ -458,7 +458,7 @@ function TierEditor({
             Priority:
             <input
               type="number"
-              className="w-12 bg-charcoal-750 text-text-bright rounded px-1 py-0.5 text-xs border border-grid-dimmed"
+              className="w-12 bg-background-hover text-text-bright rounded px-1 py-0.5 text-xs border border-grid-dimmed"
               value={tier.priority}
               onChange={(e) => onChange({ ...tier, priority: parseInt(e.target.value) || 0 })}
             />
@@ -481,7 +481,7 @@ function TierEditor({
               <span className="w-48 text-xs font-mono text-text-dimmed">{usageType}</span>
               <input
                 type="text"
-                className="w-32 bg-charcoal-750 text-text-bright rounded px-2 py-0.5 text-xs font-mono border border-grid-dimmed"
+                className="w-32 bg-background-hover text-text-bright rounded px-2 py-0.5 text-xs font-mono border border-grid-dimmed"
                 value={price}
                 onChange={(e) => {
                   const val = parseFloat(e.target.value);
@@ -506,7 +506,7 @@ function TierEditor({
 
         <div className="flex items-center gap-2 pt-1">
           <select
-            className="bg-charcoal-750 text-text-dimmed rounded px-2 py-0.5 text-xs border border-grid-dimmed"
+            className="bg-background-hover text-text-dimmed rounded px-2 py-0.5 text-xs border border-grid-dimmed"
             value={newUsageType}
             onChange={(e) => setNewUsageType(e.target.value)}
           >
diff --git a/apps/webapp/app/routes/admin.notifications.tsx b/apps/webapp/app/routes/admin.notifications.tsx
index b8b779379..42e02afa6 100644
--- a/apps/webapp/app/routes/admin.notifications.tsx
+++ b/apps/webapp/app/routes/admin.notifications.tsx
@@ -862,7 +862,7 @@ function NotificationForm({
       {surface === "CLI" && (title || description) && (
         <div>
           <Label variant="small">CLI preview</Label>
-          <div className="mt-1 rounded border border-grid-dimmed bg-charcoal-900 p-3 font-mono text-xs leading-relaxed">
+          <div className="mt-1 rounded border border-grid-dimmed bg-background-deep p-3 font-mono text-xs leading-relaxed">
             {title && (
               <p className="font-bold text-text-bright">
                 <CliColorMarkup text={title} fallbackClass="text-text-bright" />
@@ -1002,7 +1002,7 @@ function NotificationForm({
             defaultValue={
               n?.startsAt ? toDatetimeLocalUTC(new Date(n.startsAt)) : defaultStartsAt()
             }
-            className="mt-1 block h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 px-2 text-sm text-text-bright transition hover:border-charcoal-600 hover:bg-charcoal-650"
+            className="mt-1 block h-8 w-full rounded border border-background-bright bg-background-hover px-2 text-sm text-text-bright transition hover:border-border-bright hover:bg-secondary"
             required={isEdit}
           />
         </div>
@@ -1014,7 +1014,7 @@ function NotificationForm({
             name="endsAt"
             type="datetime-local"
             defaultValue={n?.endsAt ? toDatetimeLocalUTC(new Date(n.endsAt)) : defaultEndsAt()}
-            className="mt-1 block h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 px-2 text-sm text-text-bright transition hover:border-charcoal-600 hover:bg-charcoal-650"
+            className="mt-1 block h-8 w-full rounded border border-background-bright bg-background-hover px-2 text-sm text-text-bright transition hover:border-border-bright hover:bg-secondary"
             required
           />
         </div>
@@ -1024,7 +1024,7 @@ function NotificationForm({
         <>
           <input type="hidden" name="discoveryMatchBehavior" value={discoveryMatchBehavior} />
 
-          <div className="grid grid-cols-3 gap-3 rounded border border-grid-dimmed bg-charcoal-900 p-3">
+          <div className="grid grid-cols-3 gap-3 rounded border border-grid-dimmed bg-background-deep p-3">
             <div>
               <Label variant="small">Max show count</Label>
               <Input
@@ -1065,7 +1065,7 @@ function NotificationForm({
             </div>
           </div>
 
-          <div className="space-y-3 rounded border border-grid-dimmed bg-charcoal-900 p-3">
+          <div className="space-y-3 rounded border border-grid-dimmed bg-background-deep p-3">
             <Paragraph variant="small" className="text-text-dimmed">
               Discovery (optional) — only show notification if file pattern matches
             </Paragraph>
@@ -1208,7 +1208,7 @@ function NotificationDetailContent({
               image={n.payloadImage ?? undefined}
             />
           ) : (
-            <div className="rounded border border-grid-dimmed bg-charcoal-900 p-3 font-mono text-xs leading-relaxed">
+            <div className="rounded border border-grid-dimmed bg-background-deep p-3 font-mono text-xs leading-relaxed">
               <p className="font-bold text-text-bright">
                 <CliColorMarkup text={n.payloadTitle} fallbackClass="text-text-bright" />
               </p>
@@ -1283,7 +1283,7 @@ function DetailRow({ label, value }: { label: string; value: string }) {
 
 function StatCard({ label, value }: { label: string; value: number }) {
   return (
-    <div className="rounded border border-grid-dimmed bg-charcoal-900 p-2 text-center">
+    <div className="rounded border border-grid-dimmed bg-background-deep p-2 text-center">
       <p className="font-mono text-lg font-medium text-text-bright">{value}</p>
       <p className="text-xs text-text-dimmed">{label}</p>
     </div>
@@ -1371,7 +1371,7 @@ function Badge({
     amber: "bg-amber-500/20 text-amber-400",
     blue: "bg-blue-500/20 text-blue-400",
     green: "bg-green-500/20 text-green-400",
-    gray: "bg-charcoal-700 text-text-dimmed",
+    gray: "bg-background-raised text-text-dimmed",
   };
 
   return (
@@ -1435,7 +1435,7 @@ function StatusBadge({ status }: { status: NotificationStatus }) {
     active: "bg-green-500/20 text-green-400",
     pending: "bg-blue-500/20 text-blue-400",
     releasing: "bg-amber-500/20 text-amber-400",
-    expired: "bg-charcoal-700 text-text-dimmed",
+    expired: "bg-background-raised text-text-dimmed",
     archived: "bg-red-500/20 text-red-400",
   };
 
diff --git a/apps/webapp/app/routes/confirm-basic-details.tsx b/apps/webapp/app/routes/confirm-basic-details.tsx
index ae7a5cbce..9187823a7 100644
--- a/apps/webapp/app/routes/confirm-basic-details.tsx
+++ b/apps/webapp/app/routes/confirm-basic-details.tsx
@@ -239,11 +239,11 @@ export default function Page() {
   const shouldShowConfirm = user.email !== enteredEmail || user.email === "";
 
   return (
-    <AppContainer className="bg-charcoal-900">
+    <AppContainer className="bg-background-deep">
       <BackgroundWrapper>
         <MainCenteredContainer
           variant="onboarding"
-          className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
+          className="max-w-116 rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
         >
           <Form method="post" {...getFormProps(form)}>
             <FormTitle
@@ -320,7 +320,7 @@ export default function Page() {
 
               {isManagedCloud && (
                 <>
-                  <div className="border-t border-charcoal-700" />
+                  <div className="border-t border-grid-bright" />
                   <InputGroup>
                     <Label className="mb-0.5" id="referral-label">
                       How did you hear about us?
@@ -384,7 +384,7 @@ export default function Page() {
                       dropdownIcon
                       icon={<UserGroupIcon className="mr-1 size-4.5 text-text-dimmed" />}
                       items={shuffledRoles}
-                      className="h-8 min-w-0 border-0 bg-charcoal-750 pl-2 text-sm text-text-dimmed ring-charcoal-600 transition hover:bg-charcoal-650 hover:text-text-dimmed hover:ring-1"
+                      className="h-8 min-w-0 border-0 bg-background-hover pl-2 text-sm text-text-dimmed ring-border-bright transition hover:bg-secondary hover:text-text-dimmed hover:ring-1"
                       text={(v) => (v ? <span className="text-text-bright">{v}</span> : undefined)}
                     >
                       {(items) =>
diff --git a/apps/webapp/app/routes/invites.tsx b/apps/webapp/app/routes/invites.tsx
index 917813e58..aa3b7809c 100644
--- a/apps/webapp/app/routes/invites.tsx
+++ b/apps/webapp/app/routes/invites.tsx
@@ -132,11 +132,11 @@ export default function Page() {
   });
 
   return (
-    <AppContainer className="bg-charcoal-900">
+    <AppContainer className="bg-background-deep">
       <BackgroundWrapper>
         <MainCenteredContainer
           variant="onboarding"
-          className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
+          className="max-w-104 rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
         >
           <div>
             <FormTitle
@@ -148,7 +148,7 @@ export default function Page() {
             {invites.map((invite) => (
               <Form key={invite.id} method="post" {...getFormProps(form)}>
                 <Fieldset>
-                  <InputGroup className="flex items-center justify-between border-b border-charcoal-800 py-4">
+                  <InputGroup className="flex items-center justify-between border-b border-background-bright py-4">
                     <div className="flex flex-col gap-y-0.5 overflow-hidden">
                       <Header2 className="truncate">{invite.organization.title}</Header2>
                       <Paragraph variant="small" className="truncate">
diff --git a/apps/webapp/app/routes/login._index/route.tsx b/apps/webapp/app/routes/login._index/route.tsx
index 4b0d39c44..462e5345f 100644
--- a/apps/webapp/app/routes/login._index/route.tsx
+++ b/apps/webapp/app/routes/login._index/route.tsx
@@ -46,18 +46,18 @@ function LastUsedBadge({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        "absolute -right-5 top-1 z-10 -translate-y-1/2 shadow-md md:-right-[4.6rem] md:top-1/2",
+        "absolute -right-5 top-1 z-10 -translate-y-1/2 shadow-md md:right-[-4.6rem] md:top-1/2",
         className
       )}
     >
       <motion.div
-        className="relative rounded border border-charcoal-700 bg-charcoal-800 px-2 py-1 text-center text-xxs font-medium uppercase text-blue-500"
+        className="relative rounded border border-grid-bright bg-background-bright px-2 py-1 text-center text-xxs font-medium uppercase text-blue-500"
         initial={shouldReduceMotion ? undefined : { opacity: 0, x: 4 }}
         animate={shouldReduceMotion ? undefined : { opacity: 1, x: 0 }}
         transition={shouldReduceMotion ? undefined : { duration: 0.8, ease: "easeOut" }}
       >
         <span className="pointer-events-none absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2">
-          <span className="hidden h-2 w-2 rotate-45 border-b border-l border-charcoal-700 bg-charcoal-800 md:block" />
+          <span className="hidden h-2 w-2 rotate-45 border-b border-l border-grid-bright bg-background-bright md:block" />
         </span>
         Last used
       </motion.div>
@@ -255,9 +255,9 @@ export default function LoginPage() {
               <>
                 {(data.showGithubAuth || data.showGoogleAuth || data.showSsoAuth) && (
                   <div className="flex w-full items-center gap-3 py-1">
-                    <div className="h-px flex-1 bg-charcoal-700" />
+                    <div className="h-px flex-1 bg-background-raised" />
                     <span className="text-xs uppercase text-text-dimmed">or</span>
-                    <div className="h-px flex-1 bg-charcoal-700" />
+                    <div className="h-px flex-1 bg-background-raised" />
                   </div>
                 )}
                 <div className="w-full">
diff --git a/apps/webapp/app/routes/resources.incidents.tsx b/apps/webapp/app/routes/resources.incidents.tsx
index d9e107e54..84f8dfc1d 100644
--- a/apps/webapp/app/routes/resources.incidents.tsx
+++ b/apps/webapp/app/routes/resources.incidents.tsx
@@ -113,7 +113,7 @@ export function IncidentStatusPanel({
         >
           <SimpleTooltip
             button={
-              <PopoverTrigger className="flex !h-8 w-full items-center justify-center rounded border border-yellow-500/30 bg-yellow-500/15 transition-colors hover:border-yellow-500/50 hover:bg-yellow-500/25">
+              <PopoverTrigger className="flex h-8! w-full items-center justify-center rounded border border-yellow-500/30 bg-yellow-500/15 transition-colors hover:border-yellow-500/50 hover:bg-yellow-500/25">
                 <ExclamationTriangleIcon className="size-5 text-yellow-400" />
               </PopoverTrigger>
             }
@@ -125,7 +125,7 @@ export function IncidentStatusPanel({
           />
         </motion.div>
       </div>
-      <PopoverContent side="right" sideOffset={8} align="start" className="!min-w-0 w-52 p-0">
+      <PopoverContent side="right" sideOffset={8} align="start" className="min-w-0! w-52 p-0">
         <IncidentPanelContent message={message} />
       </PopoverContent>
     </Popover>
@@ -149,7 +149,7 @@ function IncidentPanelContent({ message }: { message: string }) {
         to="https://status.trigger.dev"
         target="_blank"
         fullWidth
-        className="border-yellow-500/30 bg-yellow-500/15 hover:!border-yellow-500/50 hover:!bg-yellow-500/25"
+        className="border-yellow-500/30 bg-yellow-500/15 hover:border-yellow-500/50! hover:bg-yellow-500/25!"
       >
         <span className="text-yellow-300">View status page</span>
       </LinkButton>
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
index 72b4d614a..4c8f77a58 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -319,7 +319,7 @@ function SpanBody({
       {isAiInspector ? (
         <SpanEntity span={span} />
       ) : (
-        <div className="scrollbar-gutter-stable overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="scrollbar-gutter-stable overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <SpanEntity span={span} />
         </div>
       )}
@@ -417,7 +417,7 @@ function RunBody({
           />
         )}
       </div>
-      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <TabContainer>
           <TabButton
             isActive={!tab || tab === "overview"}
@@ -462,7 +462,7 @@ function RunBody({
           </TabButton>
         </TabContainer>
       </div>
-      <div className="overflow-y-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div>
           {tab === "detail" ? (
             <div className="flex flex-col gap-4 py-3">
@@ -681,7 +681,7 @@ function RunBody({
                                   <KeyIcon className="size-4 text-text-dimmed" />
                                   <Header3>Idempotency keys</Header3>
                                 </div>
-                                <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+                                <Paragraph variant="small" className="text-wrap! text-text-dimmed">
                                   Prevent duplicate task runs. If you trigger a task with the same
                                   key twice, the second request returns the original run.
                                 </Paragraph>
@@ -1314,7 +1314,7 @@ function SpanEntity({ span }: { span: Span }) {
               <span>Message</span>
               <CopyTextLink value={span.message} />
             </Property.Label>
-            <Property.Value className="whitespace-pre-wrap [overflow-wrap:break-word]">
+            <Property.Value className="whitespace-pre-wrap wrap-break-word">
               {span.message}
             </Property.Value>
           </Property.Item>
@@ -1345,7 +1345,7 @@ function SpanEntity({ span }: { span: Span }) {
         {span.triggeredRuns.length > 0 && (
           <div className="flex flex-col gap-1.5">
             <Header3>Runs</Header3>
-            <Table containerClassName="max-h-[12.5rem]">
+            <Table containerClassName="max-h-50">
               <TableHeader className="bg-background-bright">
                 <TableRow>
                   <TableHeaderCell>ID</TableHeaderCell>
@@ -1438,7 +1438,7 @@ function SpanEntity({ span }: { span: Span }) {
     case "waitpoint": {
       return (
         <div className="grid h-full grid-rows-[1fr_auto]">
-          <div className="flex flex-col gap-4 overflow-y-auto px-3 pt-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="flex flex-col gap-4 overflow-y-auto px-3 pt-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <div>
               <Header2>Waitpoint</Header2>
               <Paragraph variant="small">
@@ -1486,7 +1486,7 @@ function SpanEntity({ span }: { span: Span }) {
     }
     case "ai-tool-call": {
       return (
-        <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <div className="px-3">
             <SpanHorizontalTimeline startTime={span.startTime} duration={span.duration} />
           </div>
@@ -1496,7 +1496,7 @@ function SpanEntity({ span }: { span: Span }) {
     }
     case "ai-embed": {
       return (
-        <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <div className="px-3">
             <SpanHorizontalTimeline startTime={span.startTime} duration={span.duration} />
           </div>
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx
index 9e573e2f6..3d8cec515 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx
@@ -391,7 +391,7 @@ export function RealtimeStreamViewer({
       {/* Content */}
       <div
         ref={scrollRef}
-        className="flex-1 overflow-x-auto overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="flex-1 overflow-x-auto overflow-y-auto bg-background-deep scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
       >
         {error && (
           <div className="border-b border-error/20 bg-error/10 p-3">
@@ -503,7 +503,7 @@ function StreamChunkLine({
 
   return (
     <div
-      className="group flex gap-3 py-1 hover:bg-charcoal-800"
+      className="group flex gap-3 py-1 hover:bg-background-bright"
       style={{
         position: "absolute",
         top: 0,
@@ -514,14 +514,14 @@ function StreamChunkLine({
     >
       {/* Line number */}
       <div
-        className="flex-none select-none pl-2 text-right text-charcoal-500"
+        className="flex-none select-none pl-2 text-right text-text-faint"
         style={{ width: `${Math.max(maxLineNumberWidth, 3)}ch` }}
       >
         {lineNumber}
       </div>
 
       {/* Timestamp */}
-      <div className="flex-none select-none pl-1 text-charcoal-500">{timestamp}</div>
+      <div className="flex-none select-none pl-1 text-text-faint">{timestamp}</div>
 
       {/* Content */}
       <div className="whitespace-nowrap text-text-bright">{formattedData}</div>
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
index 5964947d8..42631d5ff 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
@@ -314,7 +314,7 @@ export function CreateBulkActionInspector({
             className="pl-1"
           />
         </div>
-        <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <div className="px-3 pt-3">
             <Accordion
               type="single"
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
index 65c6c20d6..61ce814db 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
@@ -240,7 +240,7 @@ export function UpsertScheduleForm({
               : "New schedule"}
         </Header2>
       </div>
-      <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <div className="p-3">
           {submitFetcher ? <input type="hidden" name="_format" value="json" /> : null}
           {schedule && <input type="hidden" name="friendlyId" value={schedule.friendlyId} />}
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx
index 7e8648b3f..7a5f61a48 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx
@@ -1122,7 +1122,7 @@ function VercelSettingsPanel({
     return (
       <div className="rounded-sm border border-rose-500/40 bg-rose-500/10 p-4">
         <div className="flex items-start gap-3">
-          <ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-rose-500" />
+          <ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-rose-500" />
           <div>
             <p className="font-medium text-rose-400">Failed to load Vercel settings</p>
             <p className="mt-1 text-sm text-rose-300">
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route.tsx
index 9f3d90f1e..0cf6e42a9 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route.tsx
@@ -366,8 +366,8 @@ function CompleteManualWaitpointForm({ waitpoint }: { waitpoint: { id: string }
             contentClassName="normal-case tracking-normal max-w-xs"
           />
         </div>
-        <div className="overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-          <div className="max-h-[70vh] min-h-40 overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="overflow-y-auto bg-background-deep scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
+          <div className="max-h-[70vh] min-h-40 overflow-y-auto bg-background-deep scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <JSONEditor
               autoFocus
               defaultValue={currentJson.current}
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx
index 99c16f2b5..6129c303e 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx
@@ -97,7 +97,7 @@ export function AIGeneratedCronField({ onSuccess }: AIGeneratedCronFieldProps) {
             placeholder="e.g. the last Friday of the month at 6am"
             onChange={(e) => setText(e.target.value)}
             rows={3}
-            className="m-0 min-h-10 w-full border-0 bg-background-bright px-3 py-2 text-sm text-text-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 file:border-0 file:bg-transparent file:text-base file:font-medium focus:border-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
+            className="m-0 min-h-10 w-full border-0 bg-background-bright px-3 py-2 text-sm text-text-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control file:border-0 file:bg-transparent file:text-base file:font-medium focus:border-0 focus:outline-hidden focus:ring-0 focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
           />
           <div className="flex justify-end gap-2 px-2 pb-2">
             <Button
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index 02bd91cb9..7414960f4 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -582,7 +582,7 @@ export function TierHobby({
           <Feedback
             defaultValue="hipaa"
             button={
-              <span className="cursor-pointer underline decoration-charcoal-500 underline-offset-4 transition hover:decoration-text-bright">
+              <span className="cursor-pointer underline decoration-text-faint underline-offset-4 transition hover:decoration-text-bright">
                 Request a BAA
               </span>
             }
@@ -736,7 +736,7 @@ export function TierPro({
           <Feedback
             defaultValue="hipaa"
             button={
-              <span className="cursor-pointer underline decoration-charcoal-500 underline-offset-4 transition hover:decoration-text-bright">
+              <span className="cursor-pointer underline decoration-text-faint underline-offset-4 transition hover:decoration-text-bright">
                 Request a BAA
               </span>
             }
@@ -755,11 +755,11 @@ export function TierEnterprise() {
           <h2 className="text-xl font-medium text-text-dimmed">Enterprise</h2>
           <p className="font-sans text-lg font-normal text-text-bright">Tailor a custom plan</p>
         </div>
-        <div className="w-full lg:w-auto lg:max-w-[16rem]">
+        <div className="w-full lg:w-auto lg:max-w-64">
           <Feedback
             defaultValue="enterprise"
             button={
-              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded border border-charcoal-600 bg-tertiary px-8 text-base font-medium transition hover:border-charcoal-550 hover:bg-charcoal-600">
+              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded border border-border-bright bg-tertiary px-8 text-base font-medium transition hover:border-border-brighter hover:bg-surface-control">
                 <span className="text-center text-text-bright">Contact us</span>
               </div>
             }
@@ -796,7 +796,7 @@ export function TierEnterprise() {
             <Feedback
               defaultValue="hipaa"
               button={
-                <span className="cursor-pointer underline decoration-charcoal-500 underline-offset-4 transition hover:decoration-text-bright">
+                <span className="cursor-pointer underline decoration-text-faint underline-offset-4 transition hover:decoration-text-bright">
                   Request a BAA
                 </span>
               }
@@ -820,7 +820,7 @@ function TierContainer({
   return (
     <div
       className={cn(
-        "flex w-full min-w-[16rem] flex-col p-6",
+        "flex w-full min-w-64 flex-col p-6",
         isHighlighted ? "border border-indigo-500" : "border border-grid-dimmed",
         className
       )}
@@ -890,7 +890,7 @@ function FeatureItem({
           )}
         />
       ) : (
-        <XMarkIcon className="mt-0.5 size-4 min-w-4 text-charcoal-500" />
+        <XMarkIcon className="mt-0.5 size-4 min-w-4 text-text-faint" />
       )}
       <div
         className={cn(
diff --git a/apps/webapp/app/routes/storybook.agent-ui/route.tsx b/apps/webapp/app/routes/storybook.agent-ui/route.tsx
index e43015a36..24017b2b9 100644
--- a/apps/webapp/app/routes/storybook.agent-ui/route.tsx
+++ b/apps/webapp/app/routes/storybook.agent-ui/route.tsx
@@ -93,7 +93,7 @@ function Example({ title, block }: { title: string; block: ViewBlock }) {
   return (
     <div className="flex flex-col gap-2">
       <Header2>{title}</Header2>
-      <div className="w-[26rem] max-w-full">
+      <div className="w-104 max-w-full">
         <ViewBlocks blocks={[block]} />
       </div>
     </div>
diff --git a/apps/webapp/app/routes/storybook.animated-panel/route.tsx b/apps/webapp/app/routes/storybook.animated-panel/route.tsx
index f30be72b6..2d2ba455e 100644
--- a/apps/webapp/app/routes/storybook.animated-panel/route.tsx
+++ b/apps/webapp/app/routes/storybook.animated-panel/route.tsx
@@ -123,7 +123,7 @@ function DetailPanel({ item, onClose }: { item: DemoItem; onClose: () => void })
           className="pl-1"
         />
       </div>
-      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <Property.Table>
           <Property.Item>
             <Property.Label>Run ID</Property.Label>
diff --git a/apps/webapp/app/routes/storybook.buttons/route.tsx b/apps/webapp/app/routes/storybook.buttons/route.tsx
index 941e39c4d..29f4a4b07 100644
--- a/apps/webapp/app/routes/storybook.buttons/route.tsx
+++ b/apps/webapp/app/routes/storybook.buttons/route.tsx
@@ -28,7 +28,7 @@ export default function Story() {
   return (
     <div className="bg-background-dimmed p-12">
       <Header1 className="mb-2">Small buttons</Header1>
-      <div className="grid grid-cols-4 gap-8 border-b border-charcoal-700 pb-8">
+      <div className="grid grid-cols-4 gap-8 border-b border-grid-bright pb-8">
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Basic</Header3>
           <Button variant="primary/small">Primary button</Button>
@@ -158,7 +158,7 @@ export default function Story() {
         </div>
       </div>
       <Header1 className="mb-2 mt-8">Medium buttons</Header1>
-      <div className="grid grid-cols-4 gap-8 border-b border-charcoal-700 pb-8">
+      <div className="grid grid-cols-4 gap-8 border-b border-grid-bright pb-8">
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Basic</Header3>
           <Button variant="primary/medium">Primary button</Button>
@@ -340,7 +340,7 @@ export default function Story() {
       </div>
       <Header1 className="mb-2 mt-8">Menu items</Header1>
       <div className="grid grid-cols-1">
-        <div className="flex flex-col items-start gap-1 rounded border border-charcoal-800 bg-charcoal-850 p-1">
+        <div className="flex flex-col items-start gap-1 rounded border border-background-bright bg-background-dimmed p-1">
           <Button variant="menu-item" fullWidth textAlignLeft LeadingIcon={FolderIcon}>
             Acme Inc.
           </Button>
@@ -353,7 +353,9 @@ export default function Story() {
             textAlignLeft
             LeadingIcon={GlobeAltIcon}
             TrailingIcon={isSelected ? CheckIcon : undefined}
-            className={isSelected ? "bg-charcoal-750 group-hover:bg-charcoal-750" : undefined}
+            className={
+              isSelected ? "bg-background-hover group-hover:bg-background-hover" : undefined
+            }
           >
             Item enabled
           </Button>
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index c75b945fc..8c7580cb6 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -87,7 +87,7 @@ function ChartsDashboard() {
 
   return (
     <div className="grid">
-      <div className="flex items-center justify-between gap-4 border-b border-charcoal-700 bg-background-bright p-2 pl-3">
+      <div className="flex items-center justify-between gap-4 border-b border-grid-bright bg-background-bright p-2 pl-3">
         <div className="flex w-fit items-center">
           <RadioGroup
             name="chartState"
diff --git a/apps/webapp/app/routes/storybook.detail-cell/route.tsx b/apps/webapp/app/routes/storybook.detail-cell/route.tsx
index 03e90c857..7e74bd364 100644
--- a/apps/webapp/app/routes/storybook.detail-cell/route.tsx
+++ b/apps/webapp/app/routes/storybook.detail-cell/route.tsx
@@ -17,7 +17,7 @@ export default function Story() {
         label="Learn how to create your own API Integrations"
         variant="base"
         trailingIcon={ArrowTopRightOnSquareIcon}
-        trailingIconClassName="text-charcoal-700 group-hover:text-text-bright"
+        trailingIconClassName="text-tertiary group-hover:text-text-bright"
       />
       <DetailCell
         leadingIcon={CodeBracketIcon}
@@ -28,11 +28,11 @@ export default function Story() {
       />
       <DetailCell
         leadingIcon={ClockIcon}
-        leadingIconClassName="text-charcoal-400"
+        leadingIconClassName="text-text-dimmed"
         label={<DateTime date={new Date()} />}
         description="Run #42 complete"
         trailingIcon={PlusIcon}
-        trailingIconClassName="text-charcoal-500 group-hover:text-text-bright"
+        trailingIconClassName="text-text-faint group-hover:text-text-bright"
       />
     </div>
   );
diff --git a/apps/webapp/app/routes/storybook.page-header/route.tsx b/apps/webapp/app/routes/storybook.page-header/route.tsx
index d1df15ac0..b920e4428 100644
--- a/apps/webapp/app/routes/storybook.page-header/route.tsx
+++ b/apps/webapp/app/routes/storybook.page-header/route.tsx
@@ -3,7 +3,7 @@ import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/Page
 
 export default function Story() {
   return (
-    <div className="flex flex-col gap-4 bg-charcoal-800 p-4">
+    <div className="flex flex-col gap-4 bg-background-bright p-4">
       <div className="bg-background-bright">
         <NavBar>
           <PageTitle title="Organizations" />
diff --git a/apps/webapp/app/routes/storybook.popover/route.tsx b/apps/webapp/app/routes/storybook.popover/route.tsx
index d379d0a36..529156bc9 100644
--- a/apps/webapp/app/routes/storybook.popover/route.tsx
+++ b/apps/webapp/app/routes/storybook.popover/route.tsx
@@ -16,7 +16,7 @@ export default function Story() {
       <Popover onOpenChange={(open) => setIsOpen(open)}>
         <PopoverArrowTrigger isOpen={isOpen}>My Blog</PopoverArrowTrigger>
         <PopoverContent
-          className="min-w-[20rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          className="min-w-80 overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
           align="start"
         >
           <Fragment>
@@ -27,7 +27,7 @@ export default function Story() {
               <PopoverMenuItem to="#" title="New Project" isSelected={false} icon={PlusIcon} />
             </div>
           </Fragment>
-          <div className="border-t border-charcoal-800 p-1">
+          <div className="border-t border-background-bright p-1">
             <PopoverMenuItem to="#" title="New Organization" isSelected={false} icon={PlusIcon} />
           </div>
         </PopoverContent>
diff --git a/apps/webapp/app/routes/storybook.spinner/route.tsx b/apps/webapp/app/routes/storybook.spinner/route.tsx
index fa654ce10..4b5d27da4 100644
--- a/apps/webapp/app/routes/storybook.spinner/route.tsx
+++ b/apps/webapp/app/routes/storybook.spinner/route.tsx
@@ -3,24 +3,24 @@ import { Spinner } from "~/components/primitives/Spinner";
 export default function Story() {
   return (
     <div className="flex flex-col items-start gap-y-3 p-4">
-      <div className="flex items-center gap-x-4 rounded-md bg-charcoal-750 px-3 py-2 text-text-bright">
+      <div className="flex items-center gap-x-4 rounded-md bg-background-hover px-3 py-2 text-text-bright">
         Blue: <Spinner color="blue" />
       </div>
-      <div className="flex items-center gap-x-4 rounded-md bg-charcoal-750 px-3 py-2 text-text-bright">
+      <div className="flex items-center gap-x-4 rounded-md bg-background-hover px-3 py-2 text-text-bright">
         White: <Spinner color="white" />
       </div>
-      <div className="flex items-center gap-x-4 rounded-md bg-charcoal-600 px-3 py-2 text-text-bright">
+      <div className="flex items-center gap-x-4 rounded-md bg-surface-control px-3 py-2 text-text-bright">
         Muted: <Spinner color="muted" />
       </div>
       <div className="flex items-center gap-x-2">
-        <div className="flex items-center gap-x-4 rounded-md bg-charcoal-600 px-3 py-2 text-text-bright">
+        <div className="flex items-center gap-x-4 rounded-md bg-surface-control px-3 py-2 text-text-bright">
           Dark: <Spinner color="dark" />
         </div>
         <div className="flex items-center gap-x-4 rounded-md bg-primary px-2 py-2 text-text-bright">
           <Spinner color="dark" />
         </div>
       </div>
-      <div className="flex items-center gap-x-4 rounded-md bg-charcoal-600 px-3 py-2 text-text-bright">
+      <div className="flex items-center gap-x-4 rounded-md bg-surface-control px-3 py-2 text-text-bright">
         Custom: <Spinner color={{ background: "#EA189E", foreground: "#6532F5" }} />
       </div>
     </div>
diff --git a/apps/webapp/app/routes/storybook.streamdown/route.tsx b/apps/webapp/app/routes/storybook.streamdown/route.tsx
index 8f2c0d3e8..335d85ff2 100644
--- a/apps/webapp/app/routes/storybook.streamdown/route.tsx
+++ b/apps/webapp/app/routes/storybook.streamdown/route.tsx
@@ -97,7 +97,7 @@ export default function Story() {
     <div className="flex flex-col items-start gap-y-8 p-8">
       <div className="max-w-3xl">
         <Header2 className="mb-4">Full Markdown</Header2>
-        <div className="streamdown-container rounded-lg border border-charcoal-700 bg-charcoal-900 p-6 text-sm text-text-bright/90">
+        <div className="streamdown-container rounded-lg border border-grid-bright bg-background-deep p-6 text-sm text-text-bright/90">
           <Suspense fallback={<p className="text-text-dimmed">Loading streamdown...</p>}>
             <StreamdownRenderer>{sampleMarkdown}</StreamdownRenderer>
           </Suspense>
@@ -106,7 +106,7 @@ export default function Story() {
 
       <div className="max-w-3xl">
         <Header2 className="mb-4">Code Highlighting Theme</Header2>
-        <div className="streamdown-container rounded-lg border border-charcoal-700 bg-charcoal-900 p-6 text-sm text-text-bright/90">
+        <div className="streamdown-container rounded-lg border border-grid-bright bg-background-deep p-6 text-sm text-text-bright/90">
           <Suspense fallback={<p className="text-text-dimmed">Loading streamdown...</p>}>
             <StreamdownRenderer>{codeOnlyMarkdown}</StreamdownRenderer>
           </Suspense>
diff --git a/apps/webapp/app/routes/storybook.table/route.tsx b/apps/webapp/app/routes/storybook.table/route.tsx
index f7ea4fef4..f2bee4fa4 100644
--- a/apps/webapp/app/routes/storybook.table/route.tsx
+++ b/apps/webapp/app/routes/storybook.table/route.tsx
@@ -41,7 +41,7 @@ export default function Story() {
         <Paragraph>
           This table scrolls when a max-height is applied to the Table component.
         </Paragraph>
-        <Table containerClassName="max-h-[11.5rem]">
+        <Table containerClassName="max-h-46">
           <TableHeader className="bg-background-bright">
             <TableRow>
               <TableHeaderCell>Col 1</TableHeaderCell>
diff --git a/apps/webapp/app/routes/storybook.tabs.$tabNumber/route.tsx b/apps/webapp/app/routes/storybook.tabs.$tabNumber/route.tsx
index 8cf7aaa16..6febd3973 100644
--- a/apps/webapp/app/routes/storybook.tabs.$tabNumber/route.tsx
+++ b/apps/webapp/app/routes/storybook.tabs.$tabNumber/route.tsx
@@ -3,7 +3,7 @@ import { useParams } from "@remix-run/react";
 export default function Story() {
   const { tabNumber } = useParams();
   return (
-    <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+    <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
       <h1 className="text-5xl">{tabNumber}</h1>
     </div>
   );
diff --git a/apps/webapp/app/routes/storybook.tabs/route.tsx b/apps/webapp/app/routes/storybook.tabs/route.tsx
index f3389f2af..1bff41452 100644
--- a/apps/webapp/app/routes/storybook.tabs/route.tsx
+++ b/apps/webapp/app/routes/storybook.tabs/route.tsx
@@ -89,17 +89,17 @@ export default function Story() {
               </ClientTabsList>
             </div>
             <ClientTabsContent value={"tab-1"}>
-              <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+              <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
                 <h1 className="text-5xl">1</h1>
               </div>
             </ClientTabsContent>
             <ClientTabsContent value={"tab-2"}>
-              <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+              <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
                 <h1 className="text-5xl">2</h1>
               </div>
             </ClientTabsContent>
             <ClientTabsContent value={"tab-3"}>
-              <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+              <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
                 <h1 className="text-5xl">3</h1>
               </div>
             </ClientTabsContent>
@@ -123,17 +123,17 @@ export default function Story() {
               </ClientTabsList>
             </div>
             <ClientTabsContent value={"tab-1"}>
-              <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+              <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
                 <h1 className="text-5xl">1</h1>
               </div>
             </ClientTabsContent>
             <ClientTabsContent value={"tab-2"}>
-              <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+              <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
                 <h1 className="text-5xl">2</h1>
               </div>
             </ClientTabsContent>
             <ClientTabsContent value={"tab-3"}>
-              <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+              <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
                 <h1 className="text-5xl">3</h1>
               </div>
             </ClientTabsContent>
@@ -166,17 +166,17 @@ export default function Story() {
               </ClientTabsTrigger>
             </ClientTabsList>
             <ClientTabsContent value={"tab-1"}>
-              <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+              <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
                 <h1 className="text-5xl">1</h1>
               </div>
             </ClientTabsContent>
             <ClientTabsContent value={"tab-2"}>
-              <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+              <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
                 <h1 className="text-5xl">2</h1>
               </div>
             </ClientTabsContent>
             <ClientTabsContent value={"tab-3"}>
-              <div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
+              <div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
                 <h1 className="text-5xl">3</h1>
               </div>
             </ClientTabsContent>
diff --git a/apps/webapp/app/routes/storybook.timeline/route.tsx b/apps/webapp/app/routes/storybook.timeline/route.tsx
index 6aa28301a..6369e6134 100644
--- a/apps/webapp/app/routes/storybook.timeline/route.tsx
+++ b/apps/webapp/app/routes/storybook.timeline/route.tsx
@@ -101,7 +101,7 @@ export default function Story() {
               <Slider.Range className="absolute h-full rounded-full bg-secondary" />
             </Slider.Track>
             <Slider.Thumb
-              className="block h-2 w-2 rounded-full border-4 border-secondary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-secondary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              className="block h-2 w-2 rounded-full border-4 border-secondary bg-background-dimmed shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)] transition hover:border-secondary hover:bg-background-bright focus:shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)] focus:outline-hidden"
               aria-label="Concurrent runs slider"
             />
           </Slider.Root>
@@ -120,7 +120,7 @@ export default function Story() {
               <Slider.Range className="absolute h-full rounded-full bg-secondary" />
             </Slider.Track>
             <Slider.Thumb
-              className="block h-2 w-2 rounded-full border-4 border-secondary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-secondary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              className="block h-2 w-2 rounded-full border-4 border-secondary bg-background-dimmed shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)] transition hover:border-secondary hover:bg-background-bright focus:shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)] focus:outline-hidden"
               aria-label="Concurrent runs slider"
             />
           </Slider.Root>
@@ -141,7 +141,7 @@ export default function Story() {
               <Slider.Range className="absolute h-full rounded-full bg-secondary" />
             </Slider.Track>
             <Slider.Thumb
-              className="block h-2 w-2 rounded-full border-4 border-secondary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-secondary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              className="block h-2 w-2 rounded-full border-4 border-secondary bg-background-dimmed shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)] transition hover:border-secondary hover:bg-background-bright focus:shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)] focus:outline-hidden"
               aria-label="Concurrent runs slider"
             />
           </Slider.Root>
@@ -171,7 +171,7 @@ export default function Story() {
                 {(ms) => (
                   <div className="relative z-50 flex h-full flex-col">
                     <div className="relative flex h-9 items-end">
-                      <div className="absolute left-1/2 w-fit -translate-x-1/2 rounded-sm border border-charcoal-600 bg-charcoal-750 px-0.5 py-0.5 text-xxs tabular-nums text-text-bright">
+                      <div className="absolute left-1/2 w-fit -translate-x-1/2 rounded-sm border border-border-bright bg-background-hover px-0.5 py-0.5 text-xxs tabular-nums text-text-bright">
                         {formatDurationMilliseconds(ms, {
                           style: "short",
                           maxDecimalPoints: ms < 1000 ? 0 : 1,
@@ -197,7 +197,7 @@ export default function Story() {
                             index === 0
                               ? "left-0.5"
                               : index === tickCount - 1
-                                ? "-right-0 -translate-x-full"
+                                ? "right-0 -translate-x-full"
                                 : "left-1/2 -translate-x-1/2"
                           }
                         >
diff --git a/apps/webapp/app/routes/storybook.tree-view/route.tsx b/apps/webapp/app/routes/storybook.tree-view/route.tsx
index 019cd8893..ac58d71b1 100644
--- a/apps/webapp/app/routes/storybook.tree-view/route.tsx
+++ b/apps/webapp/app/routes/storybook.tree-view/route.tsx
@@ -205,7 +205,7 @@ function TreeViewParent({
         nodes={nodes}
         getNodeProps={getNodeProps}
         getTreeProps={getTreeProps}
-        parentClassName="h-96 bg-charcoal-900"
+        parentClassName="h-96 bg-background-deep"
         renderNode={({ node, state, index, virtualizer, virtualItem }) => (
           <div
             style={{
diff --git a/apps/webapp/app/routes/storybook.tsql-editor/route.tsx b/apps/webapp/app/routes/storybook.tsql-editor/route.tsx
index a461478b6..543baa6ed 100644
--- a/apps/webapp/app/routes/storybook.tsql-editor/route.tsx
+++ b/apps/webapp/app/routes/storybook.tsql-editor/route.tsx
@@ -166,7 +166,7 @@ export default function Story() {
             <button
               key={example.name}
               onClick={() => setQuery(example.query)}
-              className="rounded bg-charcoal-700 px-3 py-1.5 text-sm text-text-dimmed transition hover:bg-charcoal-600 hover:text-text-bright"
+              className="rounded bg-background-raised px-3 py-1.5 text-sm text-text-dimmed transition hover:bg-surface-control hover:text-text-bright"
             >
               {example.name}
             </button>
@@ -286,7 +286,7 @@ export default function Story() {
           {exampleSchema.map((table) => (
             <div
               key={table.name}
-              className="rounded-lg border border-grid-dimmed bg-charcoal-800 p-4"
+              className="rounded-lg border border-grid-dimmed bg-background-bright p-4"
             >
               <h3 className="mb-1 font-mono text-sm font-semibold text-text-bright">
                 {table.name}
@@ -299,7 +299,7 @@ export default function Story() {
                       <code className={col.expression ? "text-purple-400" : "text-blue-400"}>
                         {name}
                       </code>
-                      <span className="text-charcoal-400">{col.type}</span>
+                      <span className="text-text-dimmed">{col.type}</span>
                       {col.expression && (
                         <span className="rounded bg-purple-500/20 px-1 text-[10px] text-purple-300">
                           virtual
diff --git a/apps/webapp/app/routes/storybook.unordered-list/route.tsx b/apps/webapp/app/routes/storybook.unordered-list/route.tsx
index b17bb2dda..7dce64978 100644
--- a/apps/webapp/app/routes/storybook.unordered-list/route.tsx
+++ b/apps/webapp/app/routes/storybook.unordered-list/route.tsx
@@ -50,7 +50,7 @@ export default function Story() {
           <Header2>{group.label}</Header2>
           {group.variants.map((variant) => (
             <div key={variant} className="flex flex-col">
-              <code className="mb-2 font-mono text-xs text-charcoal-400">{variant}</code>
+              <code className="mb-2 font-mono text-xs text-text-dimmed">{variant}</code>
               <Paragraph variant={variant}>This is a paragraph before the list.</Paragraph>
               <UnorderedList variant={variant}>
                 {sampleItems.map((item) => (
diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index 1b4a1522d..012d47827 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -244,7 +244,7 @@ function SideMenu({ stories }: { stories: Story[] }) {
       )}
     >
       <div className="flex h-full flex-col">
-        <div className="h-full overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="h-full overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           {stories.map((story) => {
             return (
               <Fragment key={story.slug}>
diff --git a/apps/webapp/app/routes/unsubscribe.$userId.$token.tsx b/apps/webapp/app/routes/unsubscribe.$userId.$token.tsx
index cca9c4c9f..076a6155a 100644
--- a/apps/webapp/app/routes/unsubscribe.$userId.$token.tsx
+++ b/apps/webapp/app/routes/unsubscribe.$userId.$token.tsx
@@ -61,7 +61,7 @@ export default function Page() {
 
   return (
     <AppContainer>
-      <MainCenteredContainer className="max-w-[22rem]">
+      <MainCenteredContainer className="max-w-88">
         {result.success ? (
           <div>
             <FormTitle
diff --git a/apps/webapp/app/routes/vercel.onboarding.tsx b/apps/webapp/app/routes/vercel.onboarding.tsx
index 94fd8f534..61ffdb637 100644
--- a/apps/webapp/app/routes/vercel.onboarding.tsx
+++ b/apps/webapp/app/routes/vercel.onboarding.tsx
@@ -327,11 +327,11 @@ export default function VercelOnboardingPage() {
 
   if (data.step === "error") {
     return (
-      <AppContainer className="bg-charcoal-900">
+      <AppContainer className="bg-background-deep">
         <BackgroundWrapper>
           <MainCenteredContainer
             variant="onboarding"
-            className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
+            className="max-w-104 rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
           >
             <FormTitle title="Installation Expired" description={data.error} />
             <Button variant="primary/medium" onClick={() => window.close()} className="w-full">
@@ -358,11 +358,11 @@ export default function VercelOnboardingPage() {
     })();
 
     return (
-      <AppContainer className="bg-charcoal-900">
+      <AppContainer className="bg-background-deep">
         <BackgroundWrapper>
           <MainCenteredContainer
             variant="onboarding"
-            className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
+            className="max-w-104 rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
           >
             <FormTitle
               LeadingIcon={<BuildingOfficeIcon className="size-7 text-indigo-500" />}
@@ -438,11 +438,11 @@ export default function VercelOnboardingPage() {
   const isLoading = isSubmitting || isInstalling;
 
   return (
-    <AppContainer className="bg-charcoal-900">
+    <AppContainer className="bg-background-deep">
       <BackgroundWrapper>
         <MainCenteredContainer
           variant="onboarding"
-          className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
+          className="max-w-104 rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg"
         >
           <FormTitle
             LeadingIcon={<FolderIcon className="size-7 text-indigo-500" />}
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 68b7c635d..f7b05430c 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -1,137 +1,391 @@
 @import url("non.geist");
 @import url("non.geist/mono");
 
-@import "react-grid-layout/css/styles.css";
-@import "react-resizable/css/styles.css";
+@import "react-grid-layout/css/styles.css" layer(base);
+@import "react-resizable/css/styles.css" layer(base);
 
-/* Override react-grid-layout placeholder color (default is red) */
-.react-grid-item.react-grid-placeholder {
-  background: rgb(99 102 241) !important; /* indigo-500 */
-  border-radius: 0.375rem !important; /* rounded-md */
-}
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "tailwind-scrollbar-hide/v4";
 
-/* Sidebar reorder grid: subtle placeholder */
-.sidebar-reorder-grid .react-grid-item.react-grid-placeholder {
-  background: rgb(39 42 46) !important; /* charcoal-700 */
-  border-radius: 0.25rem;
-  opacity: 1 !important;
-}
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+@plugin "tailwind-scrollbar";
 
-/* Sidebar reorder grid: only animate transform (vertical position), not width/height */
-.sidebar-reorder-grid .react-grid-item {
-  transition: transform 200ms ease !important;
-}
+/* Streamdown ships prebuilt Tailwind classes - scan it for used utilities */
+@source "../node_modules/streamdown/dist";
 
-/* Override resize handle icon to white */
-.react-resizable-handle {
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiNmZmZmZmYiLz48L2c+PC9zdmc+') !important;
-}
-.react-resizable-handle::after {
-  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
-  border-right-color: rgba(255, 255, 255, 0.4) !important;
-  border-top-color: rgba(255, 255, 255, 0.4) !important;
-  border-left-color: rgba(255, 255, 255, 0.4) !important;
-}
+/* Raw palettes and static tokens - theme-independent, never override per theme */
+@theme {
+  --font-sans: "Geist Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono: "Geist Mono Variable", monaco, Consolas, "Lucida Console", monospace;
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+  --text-xxs: 0.65rem;
+  --text-xxs--line-height: 0.75rem;
+  --text-xxs--letter-spacing: -0.01em;
+  --text-xxs--font-weight: 500;
+  --text-2sm: 0.8125rem;
+  --text-2sm--line-height: 0.875rem;
+  --text-2sm--letter-spacing: -0.01em;
+  --text-2sm--font-weight: 500;
 
-@property --gradient-angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
-}
+  --color-charcoal-100: #e8e9ec;
+  --color-charcoal-200: #d7d9dd;
+  --color-charcoal-300: #b5b8c0;
+  --color-charcoal-400: #878c99;
+  --color-charcoal-500: #5f6570;
+  --color-charcoal-550: #4d525b;
+  --color-charcoal-600: #3b3e45;
+  --color-charcoal-650: #2c3034;
+  --color-charcoal-700: #272a2e;
+  --color-charcoal-750: #212327;
+  --color-charcoal-775: #1c1e21;
+  --color-charcoal-800: #1a1b1f;
+  --color-charcoal-850: #15171a;
+  --color-charcoal-900: #121317;
+  --color-charcoal-950: #0d0e12;
+  --color-charcoal-1000: #0b0c0f;
 
-@supports (-webkit-hyphens: none) {
-  .safari-only {
-    @apply border-b border-grid-dimmed;
+  --color-apple-100: #e4ffc9;
+  --color-apple-200: #cfffa0;
+  --color-apple-300: #bfff81;
+  --color-apple-400: #afff62;
+  --color-apple-500: #a8ff53;
+  --color-apple-600: #82d134;
+  --color-apple-700: #6fb12f;
+  --color-apple-750: #5e932a;
+  --color-apple-800: #45711a;
+  --color-apple-850: #2e4e10;
+  --color-apple-900: #20370a;
+  --color-apple-950: #152506;
+
+  --color-mint-50: #f0fdf4;
+  --color-mint-100: #ddfbe6;
+  --color-mint-200: #bdf5d0;
+  --color-mint-300: #87eba9;
+  --color-mint-400: #4fd97e;
+  --color-mint-500: #28bf5c;
+  --color-mint-600: #1b9e48;
+  --color-mint-700: #197c3c;
+  --color-mint-800: #196233;
+  --color-mint-900: #16512c;
+  --color-mint-950: #062d15;
+
+  --color-sun-50: #fdfee8;
+  --color-sun-100: #fdffc2;
+  --color-sun-200: #ffff89;
+  --color-sun-300: #fff852;
+  --color-sun-400: #fdea12;
+  --color-sun-500: #eccf06;
+  --color-sun-600: #cca302;
+  --color-sun-700: #a37505;
+  --color-sun-800: #865b0d;
+  --color-sun-900: #724b11;
+  --color-sun-950: #432705;
+
+  --color-lavender-50: #f4f2ff;
+  --color-lavender-100: #eae8ff;
+  --color-lavender-200: #d7d4ff;
+  --color-lavender-300: #bab2ff;
+  --color-lavender-400: #826dff;
+  --color-lavender-500: #7655fd;
+  --color-lavender-600: #6532f5;
+  --color-lavender-700: #5620e1;
+  --color-lavender-800: #481abd;
+  --color-lavender-900: #3d189a;
+  --color-lavender-950: #230c69;
+
+  --text-shadow-custom: 1px 1px 1px rgba(0, 0, 0, 0.5);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-tile-scroll: tile-move 0.5s infinite linear;
+  --animate-tile-scroll-offset: tile-move-offset 0.5s infinite linear;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes tile-move {
+    0% {
+      background-position: 0px;
+    }
+    100% {
+      background-position: 8px;
+    }
+  }
+  @keyframes tile-move-offset {
+    0% {
+      background-position: -1px;
+    }
+    100% {
+      background-position: 7px;
+    }
   }
 }
 
-@layer base {
-  * {
-    @apply border-grid-bright;
-  }
-  body {
-    @apply bg-background-dimmed text-text-dimmed;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
+/*
+  Semantic tokens - the themable layer. Utilities compile to var(--color-*),
+  so a theme overrides these vars in a scoped selector, e.g.
+  [data-theme="light"] { --color-text-bright: #1a1b1f; }
+  Defaults below are the original dark theme.
+*/
+@theme {
+  /* Text colors */
+  --color-primary: var(--color-apple-500);
+  --color-secondary: var(--color-charcoal-650);
+  --color-tertiary: var(--color-charcoal-700);
+  --color-text-link: var(--color-lavender-400);
+  --color-text-faint: var(--color-charcoal-500);
+  --color-text-dimmed: var(--color-charcoal-400);
+  --color-text-bright: var(--color-charcoal-200);
 
-  /* Text selection styles */
-  ::selection {
-    @apply bg-text-bright/30 text-text-bright;
-  }
-  ::-moz-selection {
-    @apply bg-text-bright/30 text-text-bright;
-  }
-  
-  /* shadcn charts: https://ui.shadcn.com/docs/components/chart#add-a-grid */
-  :root {
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
- 
-  .dark {
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+  /* Surfaces, from deepest to most raised */
+  --color-background-deep: var(--color-charcoal-900);
+  --color-background-dimmed: var(--color-charcoal-850);
+  --color-background-bright: var(--color-charcoal-800);
+  --color-background-hover: var(--color-charcoal-750);
+  --color-background-raised: var(--color-charcoal-700);
+  --color-surface-control: var(--color-charcoal-600);
+  --color-surface-control-hover: var(--color-charcoal-550);
+  --color-surface-control-active: var(--color-charcoal-500);
+
+  /* Borders, from subtlest to most visible */
+  --color-grid-dimmed: var(--color-charcoal-750);
+  --color-grid-bright: var(--color-charcoal-700);
+  --color-border-bright: var(--color-charcoal-600);
+  --color-border-brighter: var(--color-charcoal-550);
+  --color-border-brightest: var(--color-charcoal-500);
+  --color-success: var(--color-mint-500);
+  --color-pending: var(--color-blue-500);
+  --color-warning: var(--color-amber-500);
+  --color-error: var(--color-rose-600);
+
+  /* Environment colors */
+  --color-dev: var(--color-pink-500);
+  --color-staging: var(--color-orange-400);
+  --color-prod: var(--color-mint-500);
+  --color-preview: var(--color-yellow-400);
+
+  /* Icon colors */
+  --color-tasks: var(--color-blue-500);
+  --color-runs: var(--color-indigo-500);
+  --color-batches: var(--color-pink-500);
+  --color-schedules: var(--color-yellow-500);
+  --color-queues: var(--color-purple-500);
+  --color-query: var(--color-blue-500);
+  --color-metrics: var(--color-green-500);
+  --color-customDashboards: var(--color-charcoal-400);
+  --color-deployments: var(--color-blue-500);
+  --color-concurrency: var(--color-amber-500);
+  --color-limits: var(--color-purple-500);
+  --color-regions: var(--color-green-500);
+  --color-logs: var(--color-pink-500);
+  --color-tests: var(--color-pink-500);
+  --color-apiKeys: var(--color-amber-500);
+  --color-environmentVariables: var(--color-pink-500);
+  --color-alerts: var(--color-red-500);
+  --color-projectSettings: var(--color-blue-500);
+  --color-orgSettings: var(--color-blue-500);
+  --color-docs: var(--color-blue-500);
+  --color-bulkActions: var(--color-emerald-500);
+  --color-aiPrompts: var(--color-blue-500);
+  --color-aiMetrics: var(--color-green-500);
+  --color-errors: var(--color-amber-500);
+  --color-agents: var(--color-purple-500);
+  --color-sessions: var(--color-pink-500);
+  --color-playgrounds: var(--color-fuchsia-500);
+  --color-models: var(--color-violet-500);
+  --color-previewBranches: var(--color-yellow-500);
+}
+
+/* Callout variant accents (see components/primitives/Callout.tsx) */
+@theme {
+  --color-callout-warning-text: var(--color-yellow-200);
+  --color-callout-error-text: var(--color-rose-200);
+  --color-callout-success-text: var(--color-green-200);
+  --color-callout-docs: var(--color-blue-400);
+  --color-callout-docs-text: var(--color-blue-200);
+  --color-callout-pending: var(--color-blue-400);
+  --color-callout-pending-bg: var(--color-blue-800);
+  --color-callout-pending-text: var(--color-blue-300);
+  --color-callout-pricing: var(--color-indigo-400);
+  --color-callout-pricing-bg: var(--color-indigo-800);
+  --color-callout-pricing-text: var(--color-indigo-300);
+}
+
+/*
+  Code syntax palette - the trigger-dark highlight theme, shared by the shiki
+  theme (streamdown) and the prism theme (CodeBlock). Consumed from JS via
+  var(), so declared static to always be emitted.
+*/
+@theme static {
+  --color-code-background: #212327;
+  --color-code-foreground: #878c99;
+  --color-code-line-number: #484c54;
+  --color-code-plain: #d4d4d4;
+  --color-code-muted: #5f6570;
+  --color-code-comment: #6f736d;
+  --color-code-keyword: #e888f8;
+  --color-code-storage: #8271ed;
+  --color-code-type: #f770c6;
+  --color-code-function: #d9f07c;
+  --color-code-variable: #cccbff;
+  --color-code-constant: #9c9af2;
+  --color-code-language: #9b99ff;
+  --color-code-object-key: #8b89ff;
+  --color-code-string: #afec73;
+  --color-code-template-punctuation: #7a78ea;
+  --color-code-number: #b5cea8;
+  --color-code-builtin: #e5c07b;
+  --color-code-attribute: #c39eff;
+  --color-code-escape: #d7ba7d;
+  --color-code-regexp: #d16969;
+  --color-code-regexp-constant: #646695;
+  --color-code-invalid: #f44747;
+  --color-code-deleted: #f85149;
+  --color-code-jsx-text: #d7d9dd;
+}
+
+/*
+  CodeMirror editor palette (see components/code/codeMirrorTheme.ts).
+  Consumed from JS via var(), so declared static to always be emitted.
+*/
+@theme static {
+  --color-editor-background: var(--color-background-deep);
+  --color-editor-foreground: #abb2bf;
+  --color-editor-keyword: #c678dd;
+  --color-editor-name: #9b99ff;
+  --color-editor-function: #61afef;
+  --color-editor-constant: #d19a66;
+  --color-editor-type: #e5c07b;
+  --color-editor-operator: #56b6c2;
+  --color-editor-comment: #7d8799;
+  --color-editor-heading: #e06c75;
+  --color-editor-string: #afec73;
+  --color-editor-invalid: #ffffff;
+  --color-editor-panel-background: #21252b;
+  --color-editor-highlight-background: rgba(71, 85, 105, 0.2);
+  --color-editor-tooltip-background: #353a42;
+  --color-editor-selection: rgb(71 85 105);
+  --color-editor-cursor: #528bff;
+  --color-editor-search-match: #72a1ff59;
+  --color-editor-search-match-outline: #457dff;
+  --color-editor-search-match-selected: #6199ff2f;
+  --color-editor-selection-match: #aafe661a;
+  --color-editor-matching-bracket: rgba(18, 19, 23, 0.9);
+  --color-editor-matching-bracket-outline: rgba(81, 90, 107, 0.5);
+  --color-editor-fold-placeholder: #dddddd;
+  --color-editor-scrollbar-track-active: #131b2b;
+  --color-editor-scrollbar-thumb: #293649;
+  --color-editor-scrollbar-thumb-active: #3c4b62;
+}
+
+/*
+  Run-status chart colors. In-between shades are intentional - statuses within
+  a family (blues, roses, charcoals) are evenly spaced so chart series stay
+  distinguishable. Referenced from JS via var(--color-run-*), so declared
+  static to always be emitted.
+*/
+@theme static {
+  --color-run-pending: var(--color-charcoal-500);
+  --color-run-delayed: #6b7580;
+  --color-run-pending-version: var(--color-warning);
+  --color-run-waiting-for-deploy: #d97706;
+  --color-run-executing: var(--color-pending);
+  --color-run-retrying-after-failure: #2f6fec;
+  --color-run-dequeued: #4d8ef5;
+  --color-run-waiting-to-resume: #555d67;
+  --color-run-paused: #fbbf24;
+  --color-run-canceled: #78828c;
+  --color-run-expired: #848d96;
+  --color-run-interrupted: #d52c4d;
+  --color-run-completed-successfully: var(--color-success);
+  --color-run-completed-with-errors: #de405c;
+  --color-run-system-failure: #e7536c;
+  --color-run-crashed: #cc193d;
+  --color-run-timed-out: #f0667b;
+}
+
+/*
+  shadcn/ui tokens used by streamdown's internals. Inline so the vars resolve
+  where the utility is used - .streamdown-container redefines them locally.
+*/
+@theme inline {
+  --color-background: var(--background, #121317);
+  --color-foreground: var(--foreground, #d7d9dd);
+  --color-muted: var(--muted, #1c1e21);
+  --color-muted-foreground: var(--muted-foreground, #878c99);
+  --color-border: var(--border, #2c3034);
+  --color-sidebar: var(--sidebar, #15171a);
+  --color-primary-foreground: var(--primary-foreground, #121317);
+}
+
+@custom-variant lg-height (@media (max-height: 750px));
+@custom-variant md-height (@media (max-height: 600px));
+
+/* dark: follows the app theme (data-theme on <html>), not the OS preference */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@utility focus-custom {
+  &:focus-visible {
+    outline: 1px solid var(--color-text-link);
+    outline-offset: 0px;
+    border-radius: 3px;
   }
 }
 
-@layer utilities {
-  .scrollbar-gutter-stable {
-    scrollbar-gutter: stable;
-  }
+@utility scrollbar-gutter-stable {
+  scrollbar-gutter: stable;
+}
 
-  .animated-gradient-glow {
-    position: relative;
-    overflow: visible;
-  }
+/* Shared stop list for the animated glow utilities below. The gradient itself
+   is assembled per-element so the animated --gradient-angle resolves there. */
+:root {
+  --glow-gradient-stops: rgb(99 102 241), rgb(245 158 11), rgb(236 72 153), rgb(245 158 11),
+    rgb(99 102 241);
+}
 
-  .animated-gradient-glow::before {
+@utility animated-gradient-glow {
+  position: relative;
+  overflow: visible;
+
+  &::before {
     content: "";
     position: absolute;
     inset: -8px;
     z-index: -1;
-    background: conic-gradient(
-      from var(--gradient-angle),
-      rgb(99 102 241),
-      rgb(245 158 11),
-      rgb(236 72 153),
-      rgb(245 158 11),
-      rgb(99 102 241)
-    );
+    background: conic-gradient(from var(--gradient-angle), var(--glow-gradient-stops));
     border-radius: inherit;
     animation: gradient-rotation 3s linear infinite;
     pointer-events: none;
     filter: blur(0.5rem);
     opacity: 0.1;
   }
+}
 
-  .animated-gradient-glow-small {
-    position: relative;
-    overflow: visible;
-  }
+@utility animated-gradient-glow-small {
+  position: relative;
+  overflow: visible;
 
-  .animated-gradient-glow-small::before {
+  &::before {
     content: "";
     position: absolute;
     inset: -1px;
     z-index: -1;
-    background: conic-gradient(
-      from var(--gradient-angle),
-      rgb(99 102 241),
-      rgb(245 158 11),
-      rgb(236 72 153),
-      rgb(245 158 11),
-      rgb(99 102 241)
-    );
+    background: conic-gradient(from var(--gradient-angle), var(--glow-gradient-stops));
     border-radius: inherit;
     animation: gradient-rotation 3s linear infinite;
     pointer-events: none;
@@ -140,6 +394,12 @@
   }
 }
 
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
 @keyframes gradient-rotation {
   0% {
     --gradient-angle: 0deg;
@@ -149,24 +409,113 @@
   }
 }
 
+@layer base {
+  /* v4 defaults border color to currentcolor - keep the app-wide default from v3 */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-grid-bright);
+  }
+
+  body {
+    @apply bg-background-dimmed text-text-dimmed;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  /* Text selection styles */
+  ::selection {
+    @apply bg-text-bright/30 text-text-bright;
+  }
+  /* Kept separate from ::selection on purpose: grouping them makes older
+     Firefox drop the whole rule. */
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
+  ::-moz-selection {
+    @apply bg-text-bright/30 text-text-bright;
+  }
+
+  /* Native form controls, scrollbars etc. follow the app theme */
+  :root {
+    color-scheme: dark;
+  }
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+
+  /* shadcn charts: https://ui.shadcn.com/docs/components/chart#add-a-grid */
+  :root {
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  [data-theme="dark"] {
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  /* Override react-grid-layout placeholder color (default is red) */
+  .react-grid-item.react-grid-placeholder {
+    background: rgb(99 102 241) !important; /* indigo-500 */
+    border-radius: 0.375rem !important; /* rounded-md */
+  }
+
+  /* Sidebar reorder grid: subtle placeholder */
+  .sidebar-reorder-grid .react-grid-item.react-grid-placeholder {
+    background: var(--color-background-raised) !important;
+    border-radius: 0.25rem;
+    opacity: 1 !important;
+  }
+
+  /* Sidebar reorder grid: only animate transform (vertical position), not width/height */
+  .sidebar-reorder-grid .react-grid-item {
+    transition: transform 200ms ease !important;
+  }
+
+  /* Override resize handle icon to white */
+  .react-resizable-handle {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiNmZmZmZmYiLz48L2c+PC9zdmc+') !important;
+  }
+  .react-resizable-handle::after {
+    border-bottom-color: rgba(255, 255, 255, 0.4) !important;
+    border-right-color: rgba(255, 255, 255, 0.4) !important;
+    border-top-color: rgba(255, 255, 255, 0.4) !important;
+    border-left-color: rgba(255, 255, 255, 0.4) !important;
+  }
+}
+
+@layer components {
+  @supports (-webkit-hyphens: none) {
+    .safari-only {
+      @apply border-b border-grid-dimmed;
+    }
+  }
+}
+
 /* Streamdown markdown styling */
 .streamdown-container {
-  /* Streamdown uses shadcn/ui CSS variables - define them for our theme.
-     These map Tailwind utility classes like bg-background, bg-primary, etc.
-     that streamdown uses internally for its link safety modal, code blocks,
-     and other interactive elements. */
-  --background: 230 16% 9%; /* charcoal-900 #121317 */
-  --foreground: 215 19% 87%; /* charcoal-200 #D7D9DD */
-  --muted: 220 8% 17%; /* charcoal-775 #1C1E21 */
-  --muted-foreground: 220 8% 57%; /* charcoal-400 #878C99 */
-  --border: 216 7% 27%; /* charcoal-650 #2C3034 */
-  --primary: 95 100% 66%; /* apple-500 #A8FF53 */
-  --primary-foreground: 230 16% 9%; /* charcoal-900 */
-  --sidebar: 228 10% 11%; /* charcoal-850 #15171A */;
+  /* Streamdown uses shadcn/ui CSS variables - derive them from our semantic
+     tokens so they follow the theme. They map Tailwind utility classes like
+     bg-background, bg-primary, etc. that streamdown uses internally for its
+     link safety modal, code blocks, and other interactive elements. */
+  --background: var(--color-background-deep);
+  --foreground: var(--color-text-bright);
+  --muted: var(--color-charcoal-775);
+  --muted-foreground: var(--color-text-dimmed);
+  --border: var(--color-border-bright);
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-background-deep);
+  --sidebar: var(--color-background-dimmed);
 
   /* Code block styling */
   & [data-code-block-container] {
-    @apply rounded border-charcoal-650 my-0;
+    @apply rounded-sm my-2 border-charcoal-700;
   }
   & [data-code-block] {
     border-top: none;
@@ -175,7 +524,12 @@
   & p {
     @apply my-1;
   }
-  & h1, & h2, & h3, & h4, & h5, & h6 {
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
     @apply font-semibold text-text-bright mt-2 mb-1;
   }
   & h1 {
@@ -184,10 +538,14 @@
   & h2 {
     @apply text-sm;
   }
-  & h3, & h4, & h5, & h6 {
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
     @apply text-xs;
   }
-  & ul, & ol {
+  & ul,
+  & ol {
     @apply ml-4 my-1;
   }
   & ul {
@@ -201,7 +559,7 @@
   }
   /* Inline code (not in pre blocks) */
   & code:not(pre code) {
-    @apply bg-charcoal-700 px-1 py-0.5 rounded text-text-bright font-mono;
+    @apply bg-charcoal-700 px-1 py-0.5 rounded-sm text-text-bright font-mono;
   }
   & blockquote {
     @apply border-l-2 border-charcoal-600 pl-3 my-2 italic;
@@ -221,27 +579,17 @@
   & table {
     @apply w-full my-2 border-collapse;
   }
-  & th, & td {
+  & th,
+  & td {
     @apply border border-charcoal-600 px-2 py-1 text-left;
   }
   & th {
     @apply bg-charcoal-700 font-semibold;
   }
 
-  /* Streamdown code block container */
-  & [data-code-block-container] {
-    @apply my-2 border-charcoal-700;
-  }
   & [data-code-block-header] {
     @apply bg-charcoal-800 text-text-dimmed border-b border-charcoal-700;
   }
-  /* Hide light mode code block, show dark mode */
-  & [data-code-block].dark\:hidden {
-    display: none !important;
-  }
-  & [data-code-block].hidden.dark\:block {
-    display: block !important;
-  }
   /* Override the bg-muted/40 class to let inline styles work */
   & [data-code-block] pre {
     background-color: inherit !important;
diff --git a/apps/webapp/app/utils/cn.ts b/apps/webapp/app/utils/cn.ts
index 842542049..c72d8b9f6 100644
--- a/apps/webapp/app/utils/cn.ts
+++ b/apps/webapp/app/utils/cn.ts
@@ -2,75 +2,11 @@ import { clsx, type ClassValue } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 
 const customTwMerge = extendTailwindMerge({
-  classGroups: {
-    text: [
-      {
-        text: [
-          "xxs",
-          "xs",
-          "sm",
-          "2sm",
-          "base",
-          "md",
-          "lg",
-          "xl",
-          "2xl",
-          "3xl",
-          "4xl",
-          "5xl",
-          "6xl",
-          "7xl",
-          "8xl",
-          "9xl",
-        ],
-      },
-    ],
-    size: [
-      {
-        size: [
-          "0",
-          "0.5",
-          "1",
-          "1.5",
-          "2",
-          "2.5",
-          "3",
-          "3.5",
-          "4",
-          "5",
-          "6",
-          "7",
-          "8",
-          "9",
-          "10",
-          "11",
-          "12",
-          "14",
-          "16",
-          "20",
-          "24",
-          "28",
-          "32",
-          "36",
-          "40",
-          "44",
-          "48",
-          "52",
-          "56",
-          "60",
-          "64",
-          "72",
-          "80",
-          "96",
-          "auto",
-          "px",
-          "full",
-          "min",
-          "max",
-          "fit",
-        ],
-      },
-    ],
+  extend: {
+    classGroups: {
+      // Custom font sizes defined in tailwind.css (--text-xxs, --text-2sm)
+      "font-size": [{ text: ["xxs", "2sm"] }],
+    },
   },
 });
 
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index 643093624..ea7352cb3 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -118,7 +118,6 @@
     "@socket.io/redis-adapter": "^8.3.0",
     "@streamdown/code": "^1.1.1",
     "@tabler/icons-react": "^3.36.1",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.0.4",
@@ -126,13 +125,13 @@
     "@trigger.dev/companyicons": "^1.5.35",
     "@trigger.dev/core": "workspace:*",
     "@trigger.dev/database": "workspace:*",
-    "@trigger.dev/plugins": "workspace:*",
-    "@trigger.dev/rbac": "workspace:*",
-    "@trigger.dev/sso": "workspace:*",
     "@trigger.dev/otlp-importer": "workspace:*",
     "@trigger.dev/platform": "1.0.29",
+    "@trigger.dev/plugins": "workspace:*",
+    "@trigger.dev/rbac": "workspace:*",
     "@trigger.dev/redis-worker": "workspace:*",
     "@trigger.dev/sdk": "workspace:*",
+    "@trigger.dev/sso": "workspace:*",
     "@types/pg": "8.6.6",
     "@uiw/react-codemirror": "^4.19.5",
     "@unkey/cache": "^1.5.0",
@@ -226,10 +225,9 @@
     "sqs-consumer": "^7.4.0",
     "streamdown": "^2.5.0",
     "superjson": "^2.2.1",
-    "tailwind-merge": "^1.12.0",
-    "tailwind-scrollbar-hide": "^1.1.7",
-    "tailwindcss-animate": "^1.0.5",
-    "tailwindcss-textshadow": "^2.1.3",
+    "tailwind-merge": "^3.6.0",
+    "tailwind-scrollbar-hide": "^4.0.0",
+    "tw-animate-css": "^1.4.0",
     "tiny-invariant": "^1.2.0",
     "ulid": "^2.3.0",
     "ulidx": "^2.2.1",
@@ -248,8 +246,9 @@
     "@sentry/cli": "2.50.2",
     "@swc/core": "^1.3.4",
     "@swc/helpers": "^0.4.11",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/forms": "^0.5.11",
+    "@tailwindcss/postcss": "^4.3.1",
+    "@tailwindcss/typography": "^0.5.20",
     "@testcontainers/postgresql": "^11.14.0",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/bcryptjs": "^2.4.2",
@@ -276,7 +275,6 @@
     "@types/tar": "^6.1.4",
     "@types/ws": "^8.5.3",
     "autoevals": "^0.0.130",
-    "autoprefixer": "^10.4.13",
     "css-loader": "^6.10.0",
     "datepicker": "link:@types/@react-aria/datepicker",
     "engine.io": "^6.5.4",
@@ -289,8 +287,8 @@
     "rimraf": "^6.0.1",
     "style-loader": "^3.3.4",
     "supertest": "^7.0.0",
-    "tailwind-scrollbar": "^3.0.1",
-    "tailwindcss": "3.4.1",
+    "tailwind-scrollbar": "^4.0.2",
+    "tailwindcss": "^4.3.1",
     "tsconfig-paths": "^3.14.1",
     "tsx": "^4.20.6",
     "vite-tsconfig-paths": "^4.0.5"
diff --git a/apps/webapp/postcss.config.js b/apps/webapp/postcss.config.js
index 12a703d90..786a7160f 100644
--- a/apps/webapp/postcss.config.js
+++ b/apps/webapp/postcss.config.js
@@ -1,6 +1,8 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {
+      // Always flatten nested selectors — the Remix compiler's esbuild can't parse CSS nesting.
+      optimize: { minify: process.env.NODE_ENV === "production" },
+    },
   },
 };
diff --git a/apps/webapp/remix.config.js b/apps/webapp/remix.config.js
index 130c15919..f6bad31aa 100644
--- a/apps/webapp/remix.config.js
+++ b/apps/webapp/remix.config.js
@@ -3,7 +3,9 @@ module.exports = {
   dev: {
     port: 8002,
   },
-  tailwind: true,
+  // Tailwind v4 runs through PostCSS (@tailwindcss/postcss), not the built-in Remix integration
+  tailwind: false,
+  postcss: true,
   cacheDirectory: "./node_modules/.cache/remix",
   ignoredRouteFiles: ["**/.*"],
   serverModuleFormat: "cjs",
diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
deleted file mode 100644
index b74ff5bdb..000000000
--- a/apps/webapp/tailwind.config.js
+++ /dev/null
@@ -1,385 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-const colors = require("tailwindcss/colors");
-
-// V2
-const _slate = {
-  450: "#7E8FA6",
-  500: "#6B7C95",
-  550: "#586981",
-  600: "#45566D",
-  650: "#3C4B62",
-  750: "#293649",
-  850: "#1A2434",
-  900: "#131B2B",
-  950: "#0E1521",
-  1000: "#0B1018",
-};
-
-const _toxic = {
-  50: "#E3FFE6",
-  100: "#C8FFCD",
-  200: "#A9FFAB",
-  300: "#8AFF96",
-  400: "#6DFC7B",
-  500: "#41FF54",
-  600: "#28F03C",
-  700: "#2AE03C",
-  800: "#22D834",
-  900: "#16CC28",
-};
-
-const _acid = {
-  50: "#F9FFD1",
-  100: "#F6FFB6",
-  200: "#F3FF99",
-  300: "#EEFF82",
-  400: "#E7FF52",
-  500: "#DAF437",
-  600: "#C5E118",
-  700: "#B2CD0A",
-  800: "#A5BE07",
-  900: "#9FB802",
-};
-
-const _midnight = {
-  ...colors.slate,
-  450: colors.slate[850],
-  500: colors.slate[650],
-  550: colors.slate[700],
-  600: colors.slate[750],
-  650: colors.slate[800],
-  750: colors.slate[850],
-  800: colors.slate[900],
-  850: "#0E1521",
-  900: "#0B1018",
-};
-
-// V3
-const charcoal = {
-  100: "#E8E9EC",
-  200: "#D7D9DD",
-  300: "#B5B8C0",
-  400: "#878C99",
-  500: "#5F6570",
-  550: "#4D525B",
-  600: "#3B3E45",
-  650: "#2C3034",
-  700: "#272A2E",
-  750: "#212327",
-  775: "#1C1E21",
-  800: "#1A1B1F",
-  850: "#15171A",
-  900: "#121317",
-  950: "#0D0E12",
-  1000: "#0B0C0F",
-};
-
-const apple = {
-  100: "#E4FFC9",
-  200: "#CFFFA0",
-  300: "#BFFF81",
-  400: "#AFFF62",
-  500: "#A8FF53",
-  600: "#82D134",
-  700: "#6FB12F",
-  750: "#5E932A",
-  800: "#45711A",
-  850: "#2E4E10",
-  900: "#20370A",
-  950: "#152506",
-};
-
-const mint = {
-  50: "#F0FDF4",
-  100: "#DDFBE6",
-  200: "#BDF5D0",
-  300: "#87EBA9",
-  400: "#4FD97E",
-  500: "#28BF5C",
-  600: "#1B9E48",
-  700: "#197C3C",
-  800: "#196233",
-  900: "#16512C",
-  950: "#062D15",
-};
-
-const sun = {
-  50: "#FDFEE8",
-  100: "#FDFFC2",
-  200: "#FFFF89",
-  300: "#FFF852",
-  400: "#FDEA12",
-  500: "#ECCF06",
-  600: "#CCA302",
-  700: "#A37505",
-  800: "#865B0D",
-  900: "#724B11",
-  950: "#432705",
-};
-
-const lavender = {
-  50: "##f4f2ff",
-  100: "#eae8ff",
-  200: "#d7d4ff",
-  300: "#bab2ff",
-  400: "#826dff",
-  500: "#7655fd",
-  600: "#6532f5",
-  700: "#5620e1",
-  800: "#481abd",
-  900: "#3d189a",
-  950: "#230c69",
-};
-
-/** Trigger.dev custom palette */
-
-/** Text colors */
-const primary = apple[500];
-const secondary = charcoal[650];
-const tertiary = charcoal[700];
-const textLink = lavender[400];
-const textDimmed = charcoal[400];
-const textBright = charcoal[200];
-const backgroundBright = charcoal[800];
-const backgroundDimmed = charcoal[850];
-const gridBright = charcoal[700];
-const gridDimmed = charcoal[750];
-const success = mint[500];
-const pending = colors.blue[500];
-const warning = colors.amber[500];
-const error = colors.rose[600];
-const devEnv = colors.pink[500];
-const stagingEnv = colors.orange[400];
-const previewEnv = colors.yellow[400];
-const prodEnv = mint[500];
-
-/** Icon colors */
-const tasks = colors.blue[500];
-const runs = colors.indigo[500];
-const batches = colors.pink[500];
-const schedules = colors.yellow[500];
-const queues = colors.purple[500];
-const query = colors.blue[500];
-const metrics = colors.green[500];
-const customDashboards = charcoal[400];
-const deployments = colors.blue[500];
-const concurrency = colors.amber[500];
-const limits = colors.purple[500];
-const regions = colors.green[500];
-const logs = colors.pink[500];
-const tests = colors.pink[500];
-const apiKeys = colors.amber[500];
-const environmentVariables = colors.pink[500];
-const alerts = colors.red[500];
-const projectSettings = colors.blue[500];
-const orgSettings = colors.blue[500];
-const docs = colors.blue[500];
-const bulkActions = colors.emerald[500];
-const aiPrompts = colors.blue[500];
-const aiMetrics = colors.green[500];
-const errors = colors.amber[500];
-const agents = colors.purple[500];
-const sessions = colors.pink[500];
-const playgrounds = colors.fuchsia[500];
-const models = colors.violet[500];
-const previewBranches = colors.yellow[500];
-
-/** Other variables */
-const radius = "0.5rem";
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./app/**/*.{ts,jsx,tsx}", "./node_modules/streamdown/dist/**/*.js"],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      fontFamily: {
-        sans: ["Geist Variable", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"],
-        mono: ["Geist Mono Variable", "monaco", "Consolas", "Lucida Console", "monospace"],
-      },
-      fontSize: {
-        xxs: [
-          "0.65rem",
-          {
-            lineHeight: "0.75rem",
-            letterSpacing: "-0.01em",
-            fontWeight: "500",
-          },
-        ],
-        "2sm": [
-          "0.8125rem",
-          {
-            lineHeight: "0.875rem",
-            letterSpacing: "-0.01em",
-            fontWeight: "500",
-          },
-        ],
-      },
-      colors: {
-        charcoal,
-        apple,
-        lavender,
-        mint,
-        sun,
-        primary,
-        secondary,
-        tertiary,
-        "text-link": textLink,
-        "text-dimmed": textDimmed,
-        "text-bright": textBright,
-        "background-bright": backgroundBright,
-        "background-dimmed": backgroundDimmed,
-        "grid-bright": gridBright,
-        "grid-dimmed": gridDimmed,
-        success,
-        pending,
-        warning,
-        error,
-        dev: devEnv,
-        staging: stagingEnv,
-        prod: prodEnv,
-        preview: previewEnv,
-        tasks,
-        runs,
-        batches,
-        schedules,
-        concurrency,
-        queues,
-        query,
-        regions,
-        limits,
-        deployments,
-        logs,
-        tests,
-        apiKeys,
-        environmentVariables,
-        alerts,
-        projectSettings,
-        orgSettings,
-        docs,
-        bulkActions,
-        metrics,
-        customDashboards,
-        aiPrompts,
-        aiMetrics,
-        errors,
-        agents,
-        sessions,
-        playgrounds,
-        models,
-        previewBranches,
-        // shadcn/ui color tokens used by streamdown's internal components
-        // (link safety modal, code block actions, etc.)
-        // Values are defined via CSS variables in .streamdown-container
-        background: "hsl(var(--background, 230 16% 9%) / <alpha-value>)",
-        foreground: "hsl(var(--foreground, 215 19% 87%) / <alpha-value>)",
-        muted: {
-          DEFAULT: "hsl(var(--muted, 220 8% 17%) / <alpha-value>)",
-          foreground: "hsl(var(--muted-foreground, 220 8% 57%) / <alpha-value>)",
-        },
-        border: "hsl(var(--border, 216 7% 27%) / <alpha-value>)",
-        sidebar: "hsl(var(--sidebar, 228 10% 11%) / <alpha-value>)",
-        "primary-foreground": "hsl(var(--primary-foreground, 230 16% 9%) / <alpha-value>)",
-      },
-      focusStyles: {
-        outline: "1px solid",
-        outlineOffset: "0px",
-        outlineColor: textLink,
-        borderRadius: "3px",
-      },
-      borderRadius: {
-        lg: radius,
-        md: `calc(${radius} - 2px)`,
-        sm: `calc(${radius} - 4px)`,
-      },
-      boxShadow: {
-        "glow-primary": "0 0 10px 5px rgba(218, 244, 55, 0.2)",
-        "glow-secondary": "0 0 10px 5px rgba(79, 70, 229, 0.2)",
-        "glow-pink": "0 0 10px 5px rgba(236, 72, 153, 0.2)",
-      },
-      outlineWidth: {
-        3: "3px",
-      },
-      textShadow: {
-        custom: "1px 1px 1px rgba(0, 0, 0, 0.5)", // Offset-X | Offset-Y | Blur radius | Color
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        float: {
-          "0%": { transform: "translatey(0px)" },
-          "50%": { transform: "translatey(7px)" },
-          "100%": { transform: "translatey(0px)" },
-        },
-        "tile-move": {
-          "0%": { "background-position": "0px" },
-          "100%": { "background-position": "8px" },
-        },
-        "tile-move-offset": {
-          "0%": { "background-position": "-1px" },
-          "100%": { "background-position": "7px" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "tile-scroll": "tile-move 0.5s infinite linear",
-        "tile-scroll-offset": "tile-move-offset 0.5s infinite linear",
-      },
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(closest-side, var(--tw-gradient-stops))",
-        "gradient-primary": `linear-gradient(90deg, acid-500 0%, toxic-500 100%)`,
-        "gradient-primary-hover": `linear-gradient(80deg, acid-600 0%, toxic-600 100%)`,
-        "gradient-secondary": `linear-gradient(90deg, hsl(271 91 65) 0%, hsl(221 83 53) 100%)`,
-        "gradient-radial-secondary ": `radial-gradient(hsl(271 91 65), hsl(221 83 53))`,
-      },
-      gridTemplateColumns: {
-        carousel: "repeat(6, 200px)",
-      },
-      screens: {
-        "lg-height": { raw: "(max-height: 750px)" },
-        "md-height": { raw: "(max-height: 600px)" },
-      },
-      width: {
-        0.75: "0.1875rem",
-        4.5: "1.125rem",
-      },
-      height: {
-        0.75: "0.1875rem",
-        4.5: "1.125rem",
-      },
-      size: {
-        4.5: "1.125rem",
-      },
-    },
-  },
-  plugins: [
-    require("@tailwindcss/container-queries"),
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/typography"),
-    require("tailwindcss-animate"),
-    require("tailwind-scrollbar"),
-    require("tailwind-scrollbar-hide"),
-    require("tailwindcss-textshadow"),
-    function ({ addUtilities, theme }) {
-      const focusStyles = theme("focusStyles", {});
-      addUtilities({
-        ".focus-custom": {
-          "&:focus-visible": focusStyles,
-        },
-      });
-    },
-  ],
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be19cc7c3..717ae7008 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -117,7 +117,7 @@ importers:
         version: 4.1.7(vitest@4.1.7)
       autoprefixer:
         specifier: ^10.4.12
-        version: 10.4.13(postcss@8.5.10)
+        version: 10.4.13(postcss@8.5.15)
       oxfmt:
         specifier: ^0.54.0
         version: 0.54.0
@@ -144,7 +144,7 @@ importers:
         version: 4.0.5(typescript@5.5.4)
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
 
   apps/coordinator:
     dependencies:
@@ -548,9 +548,6 @@ importers:
       '@tabler/icons-react':
         specifier: ^3.36.1
         version: 3.36.1(react@18.3.1)
-      '@tailwindcss/container-queries':
-        specifier: ^0.1.1
-        version: 0.1.1(tailwindcss@3.4.1)
       '@tanstack/match-sorter-utils':
         specifier: ^8.19.4
         version: 8.19.4
@@ -873,20 +870,17 @@ importers:
         specifier: ^2.2.1
         version: 2.2.1
       tailwind-merge:
-        specifier: ^1.12.0
-        version: 1.12.0
+        specifier: ^3.6.0
+        version: 3.6.0
       tailwind-scrollbar-hide:
-        specifier: ^1.1.7
-        version: 1.1.7
-      tailwindcss-animate:
-        specifier: ^1.0.5
-        version: 1.0.5(tailwindcss@3.4.1)
-      tailwindcss-textshadow:
-        specifier: ^2.1.3
-        version: 2.1.3
+        specifier: ^4.0.0
+        version: 4.0.0(tailwindcss@4.3.1)
       tiny-invariant:
         specifier: ^1.2.0
         version: 1.3.1
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       ulid:
         specifier: ^2.3.0
         version: 2.3.0
@@ -920,7 +914,7 @@ importers:
         version: link:../../internal-packages/testcontainers
       '@remix-run/dev':
         specifier: 2.17.5
-        version: 2.17.5(@remix-run/react@2.17.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4))(@remix-run/serve@2.17.5(typescript@5.5.4))(@types/node@22.20.0)(bufferutil@4.0.9)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.20.6)(typescript@5.5.4)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0))(yaml@2.9.0)
+        version: 2.17.5(@remix-run/react@2.17.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4))(@remix-run/serve@2.17.5(typescript@5.5.4))(@types/node@22.20.0)(bufferutil@4.0.9)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.20.6)(typescript@5.5.4)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0))(yaml@2.9.0)
       '@remix-run/testing':
         specifier: ^2.17.5
         version: 2.17.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4)
@@ -934,11 +928,14 @@ importers:
         specifier: ^0.4.11
         version: 0.4.14
       '@tailwindcss/forms':
-        specifier: ^0.5.3
-        version: 0.5.3(tailwindcss@3.4.1)
+        specifier: ^0.5.11
+        version: 0.5.11(tailwindcss@4.3.1)
+      '@tailwindcss/postcss':
+        specifier: ^4.3.1
+        version: 4.3.1
       '@tailwindcss/typography':
-        specifier: ^0.5.9
-        version: 0.5.9(tailwindcss@3.4.1)
+        specifier: ^0.5.20
+        version: 0.5.20(tailwindcss@4.3.1)
       '@testcontainers/postgresql':
         specifier: ^11.14.0
         version: 11.14.0
@@ -1017,9 +1014,6 @@ importers:
       autoevals:
         specifier: ^0.0.130
         version: 0.0.130(encoding@0.1.13)(ws@8.12.0(bufferutil@4.0.9))
-      autoprefixer:
-        specifier: ^10.4.13
-        version: 10.4.13(postcss@8.5.10)
       css-loader:
         specifier: ^6.10.0
         version: 6.10.0(webpack@5.102.1(@swc/core@1.3.26)(esbuild@0.15.18))
@@ -1040,10 +1034,10 @@ importers:
         version: 4.1.5
       postcss-import:
         specifier: ^16.0.1
-        version: 16.0.1(postcss@8.5.10)
+        version: 16.0.1(postcss@8.5.15)
       postcss-loader:
         specifier: ^8.1.1
-        version: 8.1.1(postcss@8.5.10)(typescript@5.5.4)(webpack@5.102.1(@swc/core@1.3.26)(esbuild@0.15.18))
+        version: 8.1.1(postcss@8.5.15)(typescript@5.5.4)(webpack@5.102.1(@swc/core@1.3.26)(esbuild@0.15.18))
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -1057,11 +1051,11 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
       tailwind-scrollbar:
-        specifier: ^3.0.1
-        version: 3.0.1(tailwindcss@3.4.1)
+        specifier: ^4.0.2
+        version: 4.0.2(react@18.3.1)(tailwindcss@4.3.1)
       tailwindcss:
-        specifier: 3.4.1
-        version: 3.4.1
+        specifier: ^4.3.1
+        version: 4.3.1
       tsconfig-paths:
         specifier: ^3.14.1
         version: 3.14.1
@@ -1162,7 +1156,7 @@ importers:
         version: link:../../packages/cli-v3
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/dashboard-agent-db:
     dependencies:
@@ -1253,7 +1247,7 @@ importers:
         version: link:../testcontainers
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/otlp-importer:
     dependencies:
@@ -1399,7 +1393,7 @@ importers:
         version: 6.0.1
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/run-store:
     dependencies:
@@ -1474,7 +1468,7 @@ importers:
         version: 5.5.4
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/sso:
     dependencies:
@@ -2067,7 +2061,7 @@ importers:
         version: 6.0.1
       tsup:
         specifier: ^8.4.0
-        version: 8.4.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(jiti@2.6.1)(postcss@8.5.10)(tsx@4.22.4)(typescript@5.5.4)(yaml@2.9.0)
+        version: 8.4.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(jiti@2.7.0)(postcss@8.5.15)(tsx@4.22.4)(typescript@5.5.4)(yaml@2.9.0)
       typescript:
         specifier: 5.5.4
         version: 5.5.4
@@ -2187,7 +2181,7 @@ importers:
         version: 6.0.1
       tsup:
         specifier: ^8.4.0
-        version: 8.4.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(jiti@2.6.1)(postcss@8.5.10)(tsx@4.17.0)(typescript@5.5.4)(yaml@2.9.0)
+        version: 8.4.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(jiti@2.7.0)(postcss@8.5.15)(tsx@4.17.0)(typescript@5.5.4)(yaml@2.9.0)
       tsx:
         specifier: 4.17.0
         version: 4.17.0
@@ -3071,12 +3065,8 @@ packages:
     resolution: {integrity: sha512-sIyFcoPZkTtNu9xFeEoynMef3bPJIAbOfUh+ueYcfhVl6xm2VRtMcMclSxmZCMnHHd4hlYKJeq/aggmBEWynww==}
     engines: {node: '>=18.0.0'}
 
-  '@babel/code-frame@7.24.7':
-    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/code-frame@7.29.0':
-    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
     engines: {node: '>=6.9.0'}
 
   '@babel/compat-data@7.22.9':
@@ -3087,12 +3077,8 @@ packages:
     resolution: {integrity: sha512-2EENLmhpwplDux5PSsZnSbnSkB3tZ6QTksgO25xwEL7pIDcNOMhF5v/s6RzwjMZzZzw9Ofc30gHv5ChCC8pifQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.24.7':
-    resolution: {integrity: sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.29.1':
-    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-annotate-as-pure@7.22.5':
@@ -3173,10 +3159,6 @@ packages:
     resolution: {integrity: sha512-7pAjK0aSdxOwR+CcYAqgWOGy5dcfvzsTIfFTb2odQqW47MDfv14UaJDY6eng8ylM2EaeKXdxaSWESbkmaQHTmw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.24.7':
-    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/parser@7.24.7':
     resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
     engines: {node: '>=6.0.0'}
@@ -3252,12 +3234,8 @@ packages:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.24.7':
-    resolution: {integrity: sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/template@7.28.6':
-    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
 
   '@babel/traverse@7.27.0':
@@ -3546,23 +3524,18 @@ packages:
 
   '@esbuild-kit/cjs-loader@2.4.1':
     resolution: {integrity: sha512-lhc/XLith28QdW0HpHZvZKkorWgmCNT7sVelMHDj3HFdTfdqkwEKvT+aXVQtNAmCC39VJhunDkWhONWB7335mg==}
-    deprecated: 'Merged into tsx: https://tsx.is'
 
   '@esbuild-kit/core-utils@3.0.0':
     resolution: {integrity: sha512-TXmwH9EFS3DC2sI2YJWJBgHGhlteK0Xyu1VabwetMULfm3oYhbrsWV5yaSr2NTWZIgDGVLHbRf0inxbjXqAcmQ==}
-    deprecated: 'Merged into tsx: https://tsx.is'
 
   '@esbuild-kit/core-utils@3.3.2':
     resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
-    deprecated: 'Merged into tsx: https://tsx.is'
 
   '@esbuild-kit/esm-loader@2.5.4':
     resolution: {integrity: sha512-afmtLf6uqxD5IgwCzomtqCYIgz/sjHzCWZFvfS5+FzeYxOURPUo4QcHtqJxbxWOMOogKriZanN/1bJQE/ZL93A==}
-    deprecated: 'Merged into tsx: https://tsx.is'
 
   '@esbuild-kit/esm-loader@2.6.5':
     resolution: {integrity: sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==}
-    deprecated: 'Merged into tsx: https://tsx.is'
 
   '@esbuild/aix-ppc64@0.19.11':
     resolution: {integrity: sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==}
@@ -4813,9 +4786,6 @@ packages:
   '@formatjs/intl-localematcher@0.5.2':
     resolution: {integrity: sha512-txaaE2fiBMagLrR4jYhxzFO6wEdEG4TPMqrzBAcbr4HFUYzH/YC+lg6OIzKCHm8WgDdyQevxbAAV1OgcXctuGw==}
 
-  '@fullhuman/postcss-purgecss@2.3.0':
-    resolution: {integrity: sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==}
-
   '@google-cloud/precise-date@4.0.0':
     resolution: {integrity: sha512-1TUx3KdaU3cN7nfCdNf+UVqA/PSX29Cjcox3fZZBtINlRrXVTmUkQnCKv2MbBUbCopbK4olAT1IHl76uZyCiVA==}
     engines: {node: '>=14.0.0'}
@@ -4903,7 +4873,6 @@ packages:
   '@hono/node-ws@1.0.4':
     resolution: {integrity: sha512-0j1TMp67U5ym0CIlvPKcKtD0f2ZjaS/EnhOxFLs3bVfV+/4WInBE7hVe2x/7PLEsNIUK9+jVL8lPd28rzTAcZg==}
     engines: {node: '>=18.14.1'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       '@hono/node-server': ^1.11.1
 
@@ -4952,18 +4921,13 @@ packages:
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
-  '@jridgewell/gen-mapping@0.3.8':
-    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
-    engines: {node: '>=6.0.0'}
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
 
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/source-map@0.3.11':
     resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
 
@@ -5904,7 +5868,6 @@ packages:
   '@playwright/test@1.37.0':
     resolution: {integrity: sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ==}
     engines: {node: '>=16'}
-    deprecated: Please update to the latest version of Playwright to test up-to-date browsers.
     hasBin: true
 
   '@polka/url@0.5.0':
@@ -6813,112 +6776,96 @@ packages:
   '@react-email/body@0.3.0':
     resolution: {integrity: sha512-uGo0BOOzjbMUo3lu+BIDWayvn5o6Xyfmnlla5VGf05n8gHMvO1ll7U4FtzWe3hxMLwt53pmc4iE0M+B5slG+Ug==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/button@0.2.1':
     resolution: {integrity: sha512-qXyj7RZLE7POy9BMKSoqQ00tOXThjOZSUnI2Yu9i29IHngPlmrNayIWBoVKtElES7OWwypUcpiajwi1mUWx6/A==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/code-block@0.2.1':
     resolution: {integrity: sha512-M3B7JpVH4ytgn83/ujRR1k1DQHvTeABiDM61OvAbjLRPhC/5KLHU5KkzIbbuGIrjWwxAbL1kSQzU8MhLEtSxyw==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/code-inline@0.0.6':
     resolution: {integrity: sha512-jfhebvv3dVsp3OdPgKXnk8+e2pBiDVZejDOBFzBa/IblrAJ9cQDkN6rBD5IyEg8hTOxwbw3iaI/yZFmDmIguIA==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/column@0.0.14':
     resolution: {integrity: sha512-f+W+Bk2AjNO77zynE33rHuQhyqVICx4RYtGX9NKsGUg0wWjdGP0qAuIkhx9Rnmk4/hFMo1fUrtYNqca9fwJdHg==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/components@1.0.12':
     resolution: {integrity: sha512-tH18JhPDWgE+3jnYkzyB6ZrZdfNnEsFe4PwmuXmlOw4NGIysP8wPY5aXZg++pTG9qUabXg1nzX/FGHGkObH8xQ==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/container@0.0.16':
     resolution: {integrity: sha512-QWBB56RkkU0AJ9h+qy33gfT5iuZknPC7Un/IjZv9B0QmMIK+WWacc0cH6y2SV5Cv/b99hU94fjEMOOO4enpkbQ==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/font@0.0.10':
     resolution: {integrity: sha512-0urVSgCmQIfx5r7Xc586miBnQUVnGp3OTYUm8m5pwtQRdTRO5XrTtEfNJ3JhYhSOruV0nD8fd+dXtKXobum6tA==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/head@0.0.13':
     resolution: {integrity: sha512-AJg6le/08Gz4tm+6MtKXqtNNyKHzmooOCdmtqmWxD7FxoAdU1eVcizhtQ0gcnVaY6ethEyE/hnEzQxt1zu5Kog==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/heading@0.0.16':
     resolution: {integrity: sha512-jmsKnQm1ykpBzw4hCYHwBkt5pW2jScXffPeEH5ZRF5tZeF5b1pvlFTO9han7C0pCkZYo1kEvWiRtx69yfCIwuw==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/hr@0.0.12':
     resolution: {integrity: sha512-TwmOmBDibavUQpXBxpmZYi2Iks/yeZOzFYh+di9EltMSnEabH8dMZXrl+pxNXzCgZ2XE8HY7VmUL65Lenfu5PA==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/html@0.0.12':
     resolution: {integrity: sha512-KTShZesan+UsreU7PDUV90afrZwU5TLwYlALuCSU0OT+/U8lULNNbAUekg+tGwCnOfIKYtpDPKkAMRdYlqUznw==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/img@0.0.12':
     resolution: {integrity: sha512-sRCpEARNVTf3FQhZOC+JTvu5r6ubiYWkT0ucYXg8ctkyi4G8QG+jgYPiNUqVeTLA2STOfmPM/nrk1nb84y6CPQ==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/link@0.0.13':
     resolution: {integrity: sha512-lkWc/NjOcefRZMkQoSDDbuKBEBDES9aXnFEOuPH845wD3TxPwh+QTf0fStuzjoRLUZWpHnio4z7qGGRYusn/sw==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/markdown@0.0.18':
     resolution: {integrity: sha512-gSuYK5fsMbGk87jDebqQ6fa2fKcWlkf2Dkva8kMONqLgGCq8/0d+ZQYMEJsdidIeBo3kmsnHZPrwdFB4HgjUXg==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/preview@0.0.14':
     resolution: {integrity: sha512-aYK8q0IPkBXyMsbpMXgxazwHxYJxTrXrV95GFuu2HbEiIToMwSyUgb8HDFYwPqqfV03/jbwqlsXmFxsOd+VNaw==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
@@ -6943,21 +6890,18 @@ packages:
   '@react-email/row@0.0.13':
     resolution: {integrity: sha512-bYnOac40vIKCId7IkwuLAAsa3fKfSfqCvv6epJKmPE0JBuu5qI4FHFCl9o9dVpIIS08s/ub+Y/txoMt0dYziGw==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/section@0.0.17':
     resolution: {integrity: sha512-qNl65ye3W0Rd5udhdORzTV9ezjb+GFqQQSae03NDzXtmJq6sqVXNWNiVolAjvJNypim+zGXmv6J9TcV5aNtE/w==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
   '@react-email/tailwind@2.0.7':
     resolution: {integrity: sha512-kGw80weVFXikcnCXbigTGXGWQ0MRCSYNCudcdkWxebkWYd0FG6/NPoN3V1p/u68/4+NxZwYPVi2fhnp0x23HdA==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       '@react-email/body': '>=0'
       '@react-email/button': '>=0'
@@ -6996,7 +6940,6 @@ packages:
   '@react-email/text@0.1.6':
     resolution: {integrity: sha512-TYqkioRS45wTR5il3dYk/SbUjjEdhSwh9BtRNB99qNH1pXAwA45H7rAuxehiu8iJQJH0IyIr+6n62gBz9ezmsw==}
     engines: {node: '>=20.0.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: 18.3.1
 
@@ -7723,7 +7666,6 @@ packages:
   '@smithy/core@3.18.3':
     resolution: {integrity: sha512-qqpNskkbHOSfrbFbjhYj5o8VMXO26fvN1K/+HbCzUNlTuxgNcPRouUDNm+7D6CkN244WG7aK533Ne18UtJEgAA==}
     engines: {node: '>=18.0.0'}
-    deprecated: Please upgrade your lockfile to use the latest 3.x version of @smithy/core for various fixes, see https://github.com/smithy-lang/smithy-typescript/blob/main/packages/core/CHANGELOG.md
 
   '@smithy/core@3.18.5':
     resolution: {integrity: sha512-6gnIz3h+PEPQGDj8MnRSjDvKBah042jEoPgjFGJ4iJLBE78L4lY/n98x14XyPF4u3lN179Ub/ZKFY5za9GeLQw==}
@@ -8433,20 +8375,107 @@ packages:
   '@tabler/icons@3.36.1':
     resolution: {integrity: sha512-f4Jg3Fof/Vru5ioix/UO4GX+sdDsF9wQo47FbtvG+utIYYVQ/QVAC0QYgcBbAjQGfbdOh2CCf0BgiFOF9Ixtjw==}
 
-  '@tailwindcss/container-queries@0.1.1':
-    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+  '@tailwindcss/forms@0.5.11':
+    resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==}
     peerDependencies:
-      tailwindcss: '>=3.2.0'
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'
 
-  '@tailwindcss/forms@0.5.3':
-    resolution: {integrity: sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
+  '@tailwindcss/node@4.3.1':
+    resolution: {integrity: sha512-6NDaqRoAMSXD1mr/RXu0HBvNE9a2n5tHPsxu9XHLws8o4Twes5rBM2205SUUiJ9goAtadrN6xTGX0UDEwp/N4A==}
 
-  '@tailwindcss/typography@0.5.9':
-    resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
+  '@tailwindcss/oxide-android-arm64@4.3.1':
+    resolution: {integrity: sha512-SVlyf61g374l5cHyg8x9kf5xmLcOaxvOTsbsqDnSsDJaKOEFZ7GCvi84VAVGpxojYOs1+3K6M0UjXfqPU8vmOQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.1':
+    resolution: {integrity: sha512-hVnWLwv+e/l7c4WKyVtHVrIPvYdqWHjRB3MDIqARynzFtnQg85kmQEFCbV9Ja0VVx4xXTIiDWY60Y7iz/iNoDA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.1':
+    resolution: {integrity: sha512-Cf7abu0WVgbhU7ANgPUnSAvm7nCvMweusHb8FnaHlLfv/Caq4GYaEZg7ZImzzmjx4lIAfuS8q+eLIS7A7IzxIg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.1':
+    resolution: {integrity: sha512-ZZqzX2Y+GXtXXfqSfpJhDm60OoZfvLHLCgm+J7NVqgHHJjG/m9ugZI77RwTsVd4fnBJuCFP6Ae6kTJb71UdS8g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.1':
+    resolution: {integrity: sha512-/Ah/xik0LaMYfv9DZ0S/t4pBlBNYOcqtRwusjgovHkvT8ixueWCLyJjsaF5kQIckjb4IT8Q6K6p/iPmZMixYgg==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.1':
+    resolution: {integrity: sha512-gqdFoVJlw444GvpnheZLHmvTzSxI/cOUUh2KSNejQjTcYkW062SVD+En0rUgD+QV91bz1XGIGtt1HJd48xUGbQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.1':
+    resolution: {integrity: sha512-Bwv9KwOvE0VKa86xPFif9b9c3Y1NxOV1P0gLti/IYaWEsQYZXDlxfGEtA8mdDZ7SG3wyNXAWYT5SIn3giL57oA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.1':
+    resolution: {integrity: sha512-Ymi8O8T15HYQdOUWUtTI6ldN0neHP85FC+Qz32xTcZ7iJXtem/x8ITev0o1e9e5rkqj4lONZfTRLvkmin1+tKg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.1':
+    resolution: {integrity: sha512-M+P/91qJ6uILLw4k2G93GMDRAXj61SMvFQYt39AqvUqYgExXpLL5aepfns7sj4HiAQeolirQF9E0lzRvdf4zPQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.1':
+    resolution: {integrity: sha512-zsM8uOeqvVGHsAXsJxsT28ttosFahLJKCLOTUBqRAtKnVgGSRitds9T432QiT8b77Yga7JIBkulIRRlJPtYhRA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.1':
+    resolution: {integrity: sha512-aiNvSq9BsVk8V513lDKlrCFAgf8qBMPZTpgEhInL+NwQqs97mYmupVMrPrgBBSL8Pv/0zXu9MrMF9rMun1ZeNg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.1':
+    resolution: {integrity: sha512-xDEyu1rg290472FEGaKHnzyDyh5QH+AlWvsU5hMoMtPpzmKlRI0jaYKCgSHDYtaQWZOYbMaduSyCwFwY4n1HmA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.1':
+    resolution: {integrity: sha512-yVPyo8RNkabVr3O2EhHEE0Rewu7YKzc1DhIqfL46LKveFrmu9XbDazNOJY7/GRuvw1h6u3utWnR29H/p5JPlgA==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.3.1':
+    resolution: {integrity: sha512-dNJuNbdEJT/SWRuXTYP1WSamelsz3ztkUsdtWQPjrexysrTpaEPM40P/71knXiXLYEojqPOEGitVLLpPMS5T6A==}
+
+  '@tailwindcss/typography@0.5.20':
+    resolution: {integrity: sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==}
     peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
+      tailwindcss: '>=3.0.0 || >=4.0.0 || insiders'
 
   '@tanstack/match-sorter-utils@8.19.4':
     resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
@@ -8482,7 +8511,6 @@ packages:
 
   '@team-plain/typescript-sdk@3.5.0':
     resolution: {integrity: sha512-9kweiSlYAN31VI7yzILGxdlZqsGJ+FmCEfXyEZ/0/i3r6vOwq45FDqtjadnQJVtFm+rf/8vCFRN+wEYMIEv6Aw==}
-    deprecated: This package is now deprecated. Please use @team-plain/graphql, @team-plain/webhooks and @team-plain/ui-components (https://github.com/team-plain/sdk)
 
   '@testcontainers/postgresql@11.14.0':
     resolution: {integrity: sha512-wYbJn8GRTj8qfqzfVubxioYWlHJU/ImIjuzPwyy9C5Qfo6g3GLduPZAj+BifvqTZjgT3gd4gFVLCPhBji7dc1w==}
@@ -8648,7 +8676,6 @@ packages:
 
   '@types/decimal.js@7.4.3':
     resolution: {integrity: sha512-7MpxcJPHqQ637FCZwJLtJMaDZkcD/iyUxj0m8A+m06slFeqRiK9QtgEyuocWNRbEtCrOZOEbZPTSSR88hMZVsg==}
-    deprecated: This is a stub types definition. decimal.js provides its own type definitions, so you do not need this installed.
 
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
@@ -8862,7 +8889,6 @@ packages:
 
   '@types/rimraf@4.0.5':
     resolution: {integrity: sha512-DTCZoIQotB2SUJnYgrEx43cQIUYOlNZz0AZPbKU4PSLYTUdML5Gox0++z4F9kQocxStrCmRNhi4x5x/UlwtKUA==}
-    deprecated: This is a stub types definition. rimraf provides its own type definitions, so you do not need this installed.
 
   '@types/scheduler@0.16.2':
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
@@ -9177,18 +9203,6 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-node@1.8.2:
-    resolution: {integrity: sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==}
-
-  acorn-walk@7.2.0:
-    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
-    engines: {node: '>=0.4.0'}
-
-  acorn@7.4.1:
-    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   acorn@8.12.1:
     resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
     engines: {node: '>=0.4.0'}
@@ -9427,10 +9441,6 @@ packages:
     peerDependencies:
       postcss: ^8.5.10
 
-  autoprefixer@9.8.8:
-    resolution: {integrity: sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==}
-    hasBin: true
-
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -9595,11 +9605,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  browserslist@4.24.4:
-    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
   browserslist@4.28.1:
     resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -9712,10 +9717,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase-keys@6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
     engines: {node: '>=8'}
@@ -9727,9 +9728,6 @@ packages:
   caniuse-lite@1.0.30001577:
     resolution: {integrity: sha512-rs2ZygrG1PNXMfmncM0B5H1hndY5ZCC9b5TkFaVNfZ+AUlyqcMyVIQtc3fsezi0NUCk5XZfDf9WS6WxMxnfdrg==}
 
-  caniuse-lite@1.0.30001754:
-    resolution: {integrity: sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==}
-
   caniuse-lite@1.0.30001793:
     resolution: {integrity: sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==}
 
@@ -9918,12 +9916,6 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  color-string@1.9.1:
-    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
-
-  color@3.2.1:
-    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
-
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -9946,10 +9938,6 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
-  commander@5.1.0:
-    resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
-    engines: {node: '>= 6'}
-
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -10138,7 +10126,6 @@ packages:
 
   cronstrue@2.61.0:
     resolution: {integrity: sha512-ootN5bvXbIQI9rW94+QsXN5eROtXWwew6NkdGxIRpS/UFWRggL0G5Al7a9GTBFEsuvVhJ2K3CntIIVt7L2ILhA==}
-    deprecated: Non-backwards compatible Breaking changes
     hasBin: true
 
   cross-env@7.0.3:
@@ -10190,9 +10177,6 @@ packages:
     resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
-  css-unit-converter@1.1.2:
-    resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==}
-
   css-what@5.1.0:
     resolution: {integrity: sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==}
     engines: {node: '>= 6'}
@@ -10226,7 +10210,6 @@ packages:
 
   cuid@2.1.8:
     resolution: {integrity: sha512-xiEMER6E7TlTPnDxrM4eRiC6TRgjNX9xzEZ5U/Se2YJKr7Mq4pJn/2XEHjl3STcSh96GmkHPcBXLES8M29wyyg==}
-    deprecated: Cuid and other k-sortable and non-cryptographic ids (Ulid, ObjectId, KSUID, all UUIDs) are all insecure. Use @paralleldrive/cuid2 instead.
 
   cytoscape-cose-bilkent@4.1.0:
     resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
@@ -10538,9 +10521,6 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
-  defined@1.0.1:
-    resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
-
   defu@6.1.7:
     resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
 
@@ -10589,20 +10569,12 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
-  detective@5.2.1:
-    resolution: {integrity: sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==}
-    engines: {node: '>=0.8.0'}
-    hasBin: true
-
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
   dezalgo@1.0.4:
     resolution: {integrity: sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff@5.1.0:
     resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
     engines: {node: '>=0.3.1'}
@@ -10614,9 +10586,6 @@ packages:
   discontinuous-range@1.0.0:
     resolution: {integrity: sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   docker-compose@1.4.2:
     resolution: {integrity: sha512-rPHigTKGaEHpkUmfd69QgaOp+Os5vGJwG/Ry8lcr8W/382AmI+z/D7qoa9BybKIkqNppaIbs8RYeHSevdQjWww==}
     engines: {node: '>= 6.0.0'}
@@ -10824,9 +10793,6 @@ packages:
   electron-to-chromium@1.4.433:
     resolution: {integrity: sha512-MGO1k0w1RgrfdbLVwmXcDhHHuxCn2qRgR7dYsJvWFKDttvYPx6FNzCGG0c/fBBvzK2LDh3UV7Tt9awnHnvAAUQ==}
 
-  electron-to-chromium@1.5.252:
-    resolution: {integrity: sha512-53uTpjtRgS7gjIxZ4qCgFdNO2q+wJt/Z8+xAvxbCqXPJrY6h7ighUkadQmNMXH96crtpa6gPFNP7BF4UBGDuaA==}
-
   electron-to-chromium@1.5.325:
     resolution: {integrity: sha512-PwfIw7WQSt3xX7yOf5OE/unLzsK9CaN2f/FvV3WjPR1Knoc1T9vePRVV4W1EM301JzzysK51K7FNKcusCr0zYA==}
 
@@ -10875,8 +10841,8 @@ packages:
     resolution: {integrity: sha512-2agL3ueZhqxoVrfmntO8yuVj+uNSlIOnhykYHk3Cq0ShYPdUjjUiSJrQvXjq01I9jAuI0Zl2YO8Evv5Mqytm5g==}
     engines: {node: '>=10.2.0'}
 
-  enhanced-resolve@5.18.3:
-    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+  enhanced-resolve@5.21.6:
+    resolution: {integrity: sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==}
     engines: {node: '>=10.13.0'}
 
   enquirer@2.3.6:
@@ -11504,7 +11470,6 @@ packages:
   form-data@2.5.4:
     resolution: {integrity: sha512-Y/3MmRiR8Nd+0CUtrbvcKtKzLWiUfpQ7DFVggH8PwmGt/0r7RSy32GuP4hpCJlQNEBusisSx1DLtD8uD386HJQ==}
     engines: {node: '>= 0.12'}
-    deprecated: This version has an incorrect dependency; please use v2.5.5
 
   form-data@3.0.4:
     resolution: {integrity: sha512-f0cRzm6dkyVYV3nPoooP8XlccPQukegwhAnpoLcXy+X+A8KfpGOoXwDr9FLZd3wzgLaBGQBE3lY93Zm/i1JvIQ==}
@@ -11577,9 +11542,6 @@ packages:
     resolution: {integrity: sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -11690,32 +11652,22 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@11.1.0:
     resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
     engines: {node: 20 || >=22}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@13.0.6:
     resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
     engines: {node: 18 || 20 || >=22}
 
-  glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
-
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -11784,7 +11736,6 @@ packages:
   har-validator@5.1.5:
     resolution: {integrity: sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==}
     engines: {node: '>=6'}
-    deprecated: this library is no longer supported
 
   hard-rejection@2.1.0:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
@@ -11807,7 +11758,6 @@ packages:
 
   has-own@1.0.1:
     resolution: {integrity: sha512-RDKhzgQTQfMaLvIFhjahU+2gGnRBK6dYOd5Gd9BzkmnBneOCRYjRC003RIMrdAbH52+l+CnMS4bBCXGer8tEhg==}
-    deprecated: This project is not maintained. Use Object.hasOwn() instead.
 
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
@@ -11897,10 +11847,6 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
-  html-tags@3.3.1:
-    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
-    engines: {node: '>=8'}
-
   html-to-text@9.0.5:
     resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==}
     engines: {node: '>=14'}
@@ -12012,10 +11958,6 @@ packages:
     resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
     engines: {node: '>=12'}
 
-  inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
-
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -12114,9 +12056,6 @@ packages:
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  is-arrayish@0.3.2:
-    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
-
   is-bigint@1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
 
@@ -12364,6 +12303,10 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
   joi@17.7.0:
     resolution: {integrity: sha512-1/ugc8djfn93rTE3WRKdCzGGt/EtiYKxITMO4Wiv6q5JL1gl9ePt4kBsl1S499nbosspfctIQTpYIhSmHA3WAg==}
 
@@ -12419,11 +12362,6 @@ packages:
     resolution: {integrity: sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw==}
     engines: {node: '>= 10.16.0'}
 
-  jsesc@2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   jsesc@3.0.2:
     resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
     engines: {node: '>=6'}
@@ -12567,78 +12505,80 @@ packages:
   light-my-request@6.6.0:
     resolution: {integrity: sha512-CHYbu8RtboSIoVsHZ6Ye4cj4Aw/yg2oAFimlF7mNvfDV192LR7nDiKtSIfCuLT7KokPSTn/9kfVLm5OGN0A28A==}
 
-  lightningcss-darwin-arm64@1.29.2:
-    resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.29.2:
-    resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.29.2:
-    resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.29.2:
-    resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.29.2:
-    resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  lightningcss-linux-arm64-musl@1.29.2:
-    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  lightningcss-linux-x64-gnu@1.29.2:
-    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  lightningcss-linux-x64-musl@1.29.2:
-    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  lightningcss-win32-arm64-msvc@1.29.2:
-    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.29.2:
-    resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.29.2:
-    resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
-  lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -12695,9 +12635,6 @@ packages:
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
-  lodash.castarray@4.4.0:
-    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
-
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
@@ -12725,12 +12662,8 @@ packages:
   lodash.isstring@4.0.1:
     resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
 
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-
   lodash.omit@4.5.0:
     resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==}
-    deprecated: This package is deprecated. Use destructuring assignment syntax instead.
 
   lodash.once@4.1.1:
     resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
@@ -13425,6 +13358,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.12:
+    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -13482,10 +13420,6 @@ packages:
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
-    deprecated: Use your platform's native DOMException instead
-
-  node-emoji@1.11.0:
-    resolution: {integrity: sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==}
 
   node-emoji@2.1.3:
     resolution: {integrity: sha512-E2WEOVsgs7O16zsURJ/eH8BqhF029wGpEOnv7Urwdo2wmQanOACwJQh0devF9D9RhoZru0+9JXIS0dBXIAz+lA==}
@@ -13519,9 +13453,6 @@ packages:
   node-releases@2.0.12:
     resolution: {integrity: sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==}
 
-  node-releases@2.0.27:
-    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
-
   node-releases@2.0.36:
     resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
 
@@ -13556,9 +13487,6 @@ packages:
     resolution: {integrity: sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==}
     engines: {node: '>=8'}
 
-  normalize.css@8.0.1:
-    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
-
   notepack.io@3.0.1:
     resolution: {integrity: sha512-TKC/8zH5pXIAMVQio2TvVDTtPRX+DJPHDqjRbxogtFiByHyzKmy96RA0JtCQJ+WouyyL4A10xomQzgbUT+1jCg==}
 
@@ -13595,9 +13523,6 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
-  num2fraction@1.2.2:
-    resolution: {integrity: sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==}
-
   nypm@0.3.9:
     resolution: {integrity: sha512-BI2SdqqTHg2d4wJh8P9A1W+bslg33vOE9IZDY6eR2QC+Pu1iNBVZUqczrd43rJb+fMzHU7ltAYKsEFY/kHMFcw==}
     engines: {node: ^14.16.0 || >=16.10.0}
@@ -13948,10 +13873,6 @@ packages:
     resolution: {integrity: sha512-cbrerZV+6rvdQrrD+iGMcZFEiiSrbv9Tfdkvnusy6y0x0GKBXREFg/Y65GhIfm0tnLntThhzCnfKwp1WRjeCyQ==}
     engines: {node: '>=14.0.0'}
 
-  path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-
   path-key@2.0.1:
     resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
     engines: {node: '>=4'}
@@ -14080,9 +14001,6 @@ packages:
   pgpass@1.0.5:
     resolution: {integrity: sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==}
 
-  picocolors@0.2.1:
-    resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
-
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -14186,30 +14104,12 @@ packages:
     peerDependencies:
       postcss: ^8.5.10
 
-  postcss-functions@3.0.0:
-    resolution: {integrity: sha512-N5yWXWKA+uhpLQ9ZhBRl2bIAdM6oVJYpDojuI1nF2SzXBimJcdjFwiAouBVbO5VuOF3qA6BSFWFc3wXbbj72XQ==}
-
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.5.10
-
   postcss-import@16.0.1:
     resolution: {integrity: sha512-i2Pci0310NaLHr/5JUFSw1j/8hf1CzwMY13g6ZDxgOavmRHQi2ba3PmUHoihO+sjaum+KmCNzskNsw7JDrg03g==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       postcss: ^8.5.10
 
-  postcss-js@2.0.3:
-    resolution: {integrity: sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==}
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.5.10
-
   postcss-load-config@4.0.2:
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
     engines: {node: '>= 14'}
@@ -14282,15 +14182,6 @@ packages:
     peerDependencies:
       postcss: ^8.5.10
 
-  postcss-nested@4.2.3:
-    resolution: {integrity: sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==}
-
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.5.10
-
   postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
@@ -14299,28 +14190,17 @@ packages:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
-  postcss-value-parser@3.3.1:
-    resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@6.0.23:
-    resolution: {integrity: sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==}
-    engines: {node: '>=4.0.0'}
-
-  postcss@7.0.32:
-    resolution: {integrity: sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==}
-    engines: {node: '>=6.0.0'}
-
-  postcss@7.0.39:
-    resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==}
-    engines: {node: '>=6.0.0'}
-
   postcss@8.5.10:
     resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.15:
+    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postgres-array@2.0.0:
     resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
     engines: {node: '>=4'}
@@ -14362,7 +14242,6 @@ packages:
 
   posthog-js@1.93.3:
     resolution: {integrity: sha512-jEOWwaQpTRbqLPrDLY6eZr7t95h+LyXqN7Yq1/K6u3V0Y1C9xHtYhpuGzYamirVnCDTbVq22RM++OBUaIpp9Wg==}
-    deprecated: This version of posthog-js is deprecated, please update posthog-js, and do not use this version! Check out our JS docs at https://posthog.com/docs/libraries/js
 
   posthog-node@5.35.6:
     resolution: {integrity: sha512-LwoXnR89A0l75jvFrXjtsAs0BbpyCjnwY8YIUkZT91rt1YnIUfBYiLj7qoUYApdNgesgWQQHqLXxLYX59a6ZYw==}
@@ -14397,10 +14276,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  pretty-hrtime@1.0.3:
-    resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
-    engines: {node: '>= 0.8'}
-
   pretty-ms@7.0.1:
     resolution: {integrity: sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==}
     engines: {node: '>=10'}
@@ -14414,6 +14289,11 @@ packages:
     peerDependencies:
       react: 18.3.1
 
+  prism-react-renderer@2.4.1:
+    resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
+    peerDependencies:
+      react: 18.3.1
+
   prisma@6.14.0:
     resolution: {integrity: sha512-QEuCwxu+Uq9BffFw7in8In+WfbSUN0ewnaSUKloLkbJd42w6EyFckux4M0f7VwwHlM3A8ssaz4OyniCXlsn0WA==}
     engines: {node: '>=18.18'}
@@ -14534,10 +14414,6 @@ packages:
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
-  purgecss@2.3.0:
-    resolution: {integrity: sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==}
-    hasBin: true
-
   qrcode.react@4.2.0:
     resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
     peerDependencies:
@@ -14853,9 +14729,6 @@ packages:
     resolution: {integrity: sha512-2RDWXg5jgRptDrB1w9O/JgSZC0j7y4SlaXnor93H/UJm/QyDiFgBKNtrh0TI6oCXqYSaSoXxFh6Sd3VtYfhRXw==}
     engines: {node: '>=12'}
 
-  reduce-css-calc@2.1.8:
-    resolution: {integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==}
-
   regenerator-runtime@0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 
@@ -15009,7 +14882,6 @@ packages:
   request@2.88.2:
     resolution: {integrity: sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==}
     engines: {node: '>= 6'}
-    deprecated: request has been deprecated, see https://github.com/request/request/issues/3142
 
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
@@ -15340,9 +15212,6 @@ packages:
   simple-oauth2@5.0.0:
     resolution: {integrity: sha512-8291lo/z5ZdpmiOFzOs1kF3cxn22bMj5FFH+DNUppLJrpoIlM1QnFiE7KpshHu3J3i21TVcx4yW+gXYjdCKDLQ==}
 
-  simple-swizzle@0.2.2:
-    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
-
   simplur@3.0.1:
     resolution: {integrity: sha512-bBAoTn75tuKh83opmZ1VoyVoQIsvLCKzSxuasAxbnKofrT8eGyOEIaXSuNfhi/hI160+fwsR7ObcbBpOyzDvXg==}
 
@@ -15427,7 +15296,6 @@ packages:
   source-map@0.8.0-beta.0:
     resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
     engines: {node: '>= 8'}
-    deprecated: The work that was done in this beta branch won't be included in future versions
 
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
@@ -15671,7 +15539,6 @@ packages:
   superagent@9.0.2:
     resolution: {integrity: sha512-xuW7dzkUpcJq7QnhOsnNUgtYp3xRwpt2F7abdRYIpCsAt0hhUqia0EdxyXZQQpNmGtsCzYHryaKSV3q3GJnq7w==}
     engines: {node: '>=14.18.0'}
-    deprecated: Please upgrade to superagent v10.2.2+, see release notes at https://github.com/forwardemail/superagent/releases/tag/v10.2.2 - maintenance is supported by Forward Email @ https://forwardemail.net
 
   superjson@2.2.1:
     resolution: {integrity: sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==}
@@ -15684,7 +15551,6 @@ packages:
   supertest@7.0.0:
     resolution: {integrity: sha512-qlsr7fIC0lSddmA3tzojvzubYxvlGtzumcdHgPwbFWMISQwL22MhM2Y3LNt+6w9Yyx7559VW5ab70dgphm8qQA==}
     engines: {node: '>=14.18.0'}
-    deprecated: Please upgrade to supertest v7.1.3+, see release notes at https://github.com/forwardemail/supertest/releases/tag/v7.1.3 - maintenance is supported by Forward Email @ https://forwardemail.net
 
   supports-color@10.0.0:
     resolution: {integrity: sha512-HRVVSbCCMbj7/kdWF9Q+bbckjBHLtHMEoJWlkmYzzdwhYMkjkOwubLM6t7NbWKjgKamGDrWL1++KrjUO1t9oAQ==}
@@ -15694,10 +15560,6 @@ packages:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
 
-  supports-color@6.1.0:
-    resolution: {integrity: sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==}
-    engines: {node: '>=6'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -15738,41 +15600,22 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
-  tailwind-merge@1.12.0:
-    resolution: {integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==}
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
 
-  tailwind-merge@3.5.0:
-    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+  tailwind-scrollbar-hide@4.0.0:
+    resolution: {integrity: sha512-gobtvVcThB2Dxhy0EeYSS1RKQJ5baDFkamkhwBvzvevwX6L4XQfpZ3me9s25Ss1ecFVT5jPYJ50n+7xTBJG9WQ==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 4.0.0 || >= 4.0.0-beta.8 || >= 4.0.0-alpha.20'
 
-  tailwind-scrollbar-hide@1.1.7:
-    resolution: {integrity: sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==}
-
-  tailwind-scrollbar@3.0.1:
-    resolution: {integrity: sha512-mM0ecSf/RGRGWw/qB0Zg1bWhuXIkpmleNAFgMxdb4eERgA6eQ0kVouYsF3/OvBqDSK8RJikZC/ynGPxnfXeddw==}
+  tailwind-scrollbar@4.0.2:
+    resolution: {integrity: sha512-wAQiIxAPqk0MNTPptVe/xoyWi27y+NRGnTwvn4PQnbvB9kp8QUBiGl/wsfoVBHnQxTmhXJSNt9NHTmcz9EivFA==}
     engines: {node: '>=12.13.0'}
     peerDependencies:
-      tailwindcss: 3.x
+      tailwindcss: 4.x
 
-  tailwindcss-animate@1.0.5:
-    resolution: {integrity: sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
-
-  tailwindcss-textshadow@2.1.3:
-    resolution: {integrity: sha512-FGVHfK+xnV879VSQDeRvY61Aa+b0GDiGaFBPwCOKvqIrK57GyepWJL1GydjtGOLHE9qqphFucRNj9fHramCzNg==}
-
-  tailwindcss@1.9.6:
-    resolution: {integrity: sha512-nY8WYM/RLPqGsPEGEV2z63riyQPcHYZUJpAwdyBzVpxQHOHqHE+F/fvbCeXhdF1+TA5l72vSkZrtYCB9hRcwkQ==}
-    engines: {node: '>=8.9.0'}
-    hasBin: true
-
-  tailwindcss@3.4.1:
-    resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
-  tailwindcss@4.3.0:
-    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
+  tailwindcss@4.3.1:
+    resolution: {integrity: sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==}
 
   tapable@2.3.3:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
@@ -15797,12 +15640,10 @@ packages:
   tar@6.1.13:
     resolution: {integrity: sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==}
     engines: {node: '>=10'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   tar@7.5.13:
     resolution: {integrity: sha512-tOG/7GyXpFevhXVh8jOPJrmtRpOTsYqUIkVdVooZYJS/z8WhfQUX8RJILmeuJNinGAMSu1veBr4asSHFt5/hng==}
@@ -16163,6 +16004,9 @@ packages:
     resolution: {integrity: sha512-U4gKCWcKgLcCjQd4Pl8KJdfEKumpyWbzRu75A6FCj6Ctea1PIm58W6Ltw1QXKqHrl2pF9e1raAskf/h6dlrPCA==}
     hasBin: true
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   tweetnacl@0.14.5:
     resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
 
@@ -16365,12 +16209,6 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
-  update-browserslist-db@1.1.4:
-    resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
   update-browserslist-db@1.2.3:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
@@ -16450,7 +16288,6 @@ packages:
 
   uuid@3.4.0:
     resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
-    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
     hasBin: true
 
   uuid@8.3.2:
@@ -19035,12 +18872,7 @@ snapshots:
 
   '@aws/lambda-invoke-store@0.2.1': {}
 
-  '@babel/code-frame@7.24.7':
-    dependencies:
-      '@babel/highlight': 7.24.7
-      picocolors: 1.1.1
-
-  '@babel/code-frame@7.29.0':
+  '@babel/code-frame@7.29.7':
     dependencies:
       '@babel/helper-validator-identifier': 7.29.7
       js-tokens: 4.0.0
@@ -19051,13 +18883,13 @@ snapshots:
   '@babel/core@7.22.17':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.7
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
       '@babel/helper-compilation-targets': 7.22.15
       '@babel/helper-module-transforms': 7.22.17(@babel/core@7.22.17)
       '@babel/helpers': 7.22.15
       '@babel/parser': 7.29.7
-      '@babel/template': 7.24.7
+      '@babel/template': 7.29.7
       '@babel/traverse': 7.27.0
       '@babel/types': 7.29.7
       convert-source-map: 1.9.0
@@ -19068,14 +18900,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.24.7':
-    dependencies:
-      '@babel/types': 7.29.7
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 2.5.2
-
-  '@babel/generator@7.29.1':
+  '@babel/generator@7.29.7':
     dependencies:
       '@babel/parser': 7.29.7
       '@babel/types': 7.29.7
@@ -19114,7 +18939,7 @@ snapshots:
 
   '@babel/helper-function-name@7.24.7':
     dependencies:
-      '@babel/template': 7.24.7
+      '@babel/template': 7.29.7
       '@babel/types': 7.29.7
 
   '@babel/helper-member-expression-to-functions@7.23.0':
@@ -19167,19 +18992,12 @@ snapshots:
 
   '@babel/helpers@7.22.15':
     dependencies:
-      '@babel/template': 7.24.7
+      '@babel/template': 7.29.7
       '@babel/traverse': 7.27.0
       '@babel/types': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/highlight@7.24.7':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.29.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
   '@babel/parser@7.24.7':
     dependencies:
       '@babel/types': 7.29.7
@@ -19251,24 +19069,18 @@ snapshots:
 
   '@babel/runtime@7.28.4': {}
 
-  '@babel/template@7.24.7':
+  '@babel/template@7.29.7':
     dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/parser': 7.29.7
-      '@babel/types': 7.29.7
-
-  '@babel/template@7.28.6':
-    dependencies:
-      '@babel/code-frame': 7.29.0
+      '@babel/code-frame': 7.29.7
       '@babel/parser': 7.29.7
       '@babel/types': 7.29.7
 
   '@babel/traverse@7.27.0':
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
       '@babel/parser': 7.29.7
-      '@babel/template': 7.28.6
+      '@babel/template': 7.29.7
       '@babel/types': 7.29.7
       debug: 4.4.3(supports-color@10.0.0)
       globals: 11.12.0
@@ -20411,11 +20223,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@fullhuman/postcss-purgecss@2.3.0':
-    dependencies:
-      postcss: 7.0.32
-      purgecss: 2.3.0
-
   '@google-cloud/precise-date@4.0.0': {}
 
   '@graphile/logger@0.2.0': {}
@@ -20575,16 +20382,13 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.5
       '@jridgewell/trace-mapping': 0.3.31
 
-  '@jridgewell/gen-mapping@0.3.8':
+  '@jridgewell/remapping@2.3.5':
     dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@jridgewell/set-array@1.2.1': {}
-
   '@jridgewell/source-map@0.3.11':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -23176,7 +22980,7 @@ snapshots:
     dependencies:
       '@react-email/text': 0.1.6(react@18.3.1)
       react: 18.3.1
-      tailwindcss: 4.3.0
+      tailwindcss: 4.3.1
     optionalDependencies:
       '@react-email/body': 0.3.0(react@18.3.1)
       '@react-email/button': 0.2.1(react@18.3.1)
@@ -23554,10 +23358,10 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@remix-run/dev@2.17.5(@remix-run/react@2.17.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4))(@remix-run/serve@2.17.5(typescript@5.5.4))(@types/node@22.20.0)(bufferutil@4.0.9)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.20.6)(typescript@5.5.4)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0))(yaml@2.9.0)':
+  '@remix-run/dev@2.17.5(@remix-run/react@2.17.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4))(@remix-run/serve@2.17.5(typescript@5.5.4))(@types/node@22.20.0)(bufferutil@4.0.9)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.20.6)(typescript@5.5.4)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0))(yaml@2.9.0)':
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/generator': 7.24.7
+      '@babel/generator': 7.29.7
       '@babel/parser': 7.29.7
       '@babel/plugin-syntax-decorators': 7.22.10(@babel/core@7.22.17)
       '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.17)
@@ -23571,7 +23375,7 @@ snapshots:
       '@remix-run/router': 1.23.3(patch_hash=33e2966e9ef36aa09955cec9922c5063227b83429157a71ba226369a08627ac9)
       '@remix-run/server-runtime': 2.17.5(typescript@5.5.4)
       '@types/mdx': 2.0.5
-      '@vanilla-extract/integration': 6.2.1(@types/node@22.20.0)(lightningcss@1.29.2)(terser@5.46.1)
+      '@vanilla-extract/integration': 6.2.1(@types/node@22.20.0)(lightningcss@1.32.0)(terser@5.46.1)
       arg: 5.0.2
       cacache: 17.1.4
       chalk: 4.1.2
@@ -23611,12 +23415,12 @@ snapshots:
       tar-fs: 2.1.4
       tsconfig-paths: 4.2.0
       valibot: 1.3.1(typescript@5.5.4)
-      vite-node: 3.1.4(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0)
+      vite-node: 3.1.4(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0)
       ws: 7.5.10(bufferutil@4.0.9)
     optionalDependencies:
       '@remix-run/serve': 2.17.5(typescript@5.5.4)
       typescript: 5.5.4
-      vite: 6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0)
+      vite: 6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0)
     transitivePeerDependencies:
       - '@types/node'
       - bluebird
@@ -25120,22 +24924,84 @@ snapshots:
 
   '@tabler/icons@3.36.1': {}
 
-  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.1)':
-    dependencies:
-      tailwindcss: 3.4.1
-
-  '@tailwindcss/forms@0.5.3(tailwindcss@3.4.1)':
+  '@tailwindcss/forms@0.5.11(tailwindcss@4.3.1)':
     dependencies:
       mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.4.1
+      tailwindcss: 4.3.1
 
-  '@tailwindcss/typography@0.5.9(tailwindcss@3.4.1)':
+  '@tailwindcss/node@4.3.1':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.21.6
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.1
+
+  '@tailwindcss/oxide-android-arm64@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.1
+      '@tailwindcss/oxide-darwin-arm64': 4.3.1
+      '@tailwindcss/oxide-darwin-x64': 4.3.1
+      '@tailwindcss/oxide-freebsd-x64': 4.3.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.1
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.1
+
+  '@tailwindcss/postcss@4.3.1':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.3.1
+      '@tailwindcss/oxide': 4.3.1
+      postcss: 8.5.15
+      tailwindcss: 4.3.1
+
+  '@tailwindcss/typography@0.5.20(tailwindcss@4.3.1)':
     dependencies:
-      lodash.castarray: 4.4.0
-      lodash.isplainobject: 4.0.6
-      lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.1
+      tailwindcss: 4.3.1
 
   '@tanstack/match-sorter-utils@8.19.4':
     dependencies:
@@ -25796,7 +25662,7 @@ snapshots:
       media-query-parser: 2.0.2
       outdent: 0.8.0
 
-  '@vanilla-extract/integration@6.2.1(@types/node@22.20.0)(lightningcss@1.29.2)(terser@5.46.1)':
+  '@vanilla-extract/integration@6.2.1(@types/node@22.20.0)(lightningcss@1.32.0)(terser@5.46.1)':
     dependencies:
       '@babel/core': 7.22.17
       '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.22.17)
@@ -25809,8 +25675,8 @@ snapshots:
       lodash: 4.18.1
       mlly: 1.7.4
       outdent: 0.8.0
-      vite: 4.4.9(@types/node@22.20.0)(lightningcss@1.29.2)(terser@5.46.1)
-      vite-node: 0.28.5(@types/node@22.20.0)(lightningcss@1.29.2)(terser@5.46.1)
+      vite: 4.4.9(@types/node@22.20.0)(lightningcss@1.32.0)(terser@5.46.1)
+      vite-node: 0.28.5(@types/node@22.20.0)(lightningcss@1.32.0)(terser@5.46.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -25847,7 +25713,7 @@ snapshots:
       obug: 2.1.1
       std-env: 4.1.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
+      vitest: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
 
   '@vitest/expect@4.1.7':
     dependencies:
@@ -25858,21 +25724,21 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.7(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))':
+  '@vitest/mocker@4.1.7(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))':
     dependencies:
       '@vitest/spy': 4.1.7
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0)
+      vite: 6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0)
 
-  '@vitest/mocker@4.1.7(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))':
+  '@vitest/mocker@4.1.7(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))':
     dependencies:
       '@vitest/spy': 4.1.7
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0)
+      vite: 6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0)
 
   '@vitest/pretty-format@4.1.7':
     dependencies:
@@ -26050,16 +25916,6 @@ snapshots:
     dependencies:
       acorn: 8.16.0
 
-  acorn-node@1.8.2:
-    dependencies:
-      acorn: 7.4.1
-      acorn-walk: 7.2.0
-      xtend: 4.0.2
-
-  acorn-walk@7.2.0: {}
-
-  acorn@7.4.1: {}
-
   acorn@8.12.1: {}
 
   acorn@8.14.1: {}
@@ -26305,24 +26161,14 @@ snapshots:
       - encoding
       - ws
 
-  autoprefixer@10.4.13(postcss@8.5.10):
+  autoprefixer@10.4.13(postcss@8.5.15):
     dependencies:
       browserslist: 4.21.4
       caniuse-lite: 1.0.30001577
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.5.10
-      postcss-value-parser: 4.2.0
-
-  autoprefixer@9.8.8:
-    dependencies:
-      browserslist: 4.28.1
-      caniuse-lite: 1.0.30001754
-      normalize-range: 0.1.2
-      num2fraction: 1.2.2
-      picocolors: 0.2.1
-      postcss: 7.0.39
+      postcss: 8.5.15
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
@@ -26522,13 +26368,6 @@ snapshots:
       node-releases: 2.0.12
       update-browserslist-db: 1.0.11(browserslist@4.21.4)
 
-  browserslist@4.24.4:
-    dependencies:
-      caniuse-lite: 1.0.30001754
-      electron-to-chromium: 1.5.252
-      node-releases: 2.0.27
-      update-browserslist-db: 1.1.4(browserslist@4.24.4)
-
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.10.11
@@ -26676,8 +26515,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase-css@2.0.1: {}
-
   camelcase-keys@6.2.2:
     dependencies:
       camelcase: 5.3.1
@@ -26688,8 +26525,6 @@ snapshots:
 
   caniuse-lite@1.0.30001577: {}
 
-  caniuse-lite@1.0.30001754: {}
-
   caniuse-lite@1.0.30001793: {}
 
   case-anything@2.1.13: {}
@@ -26871,16 +26706,6 @@ snapshots:
 
   color-name@1.1.4: {}
 
-  color-string@1.9.1:
-    dependencies:
-      color-name: 1.1.4
-      simple-swizzle: 0.2.2
-
-  color@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
-      color-string: 1.9.1
-
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -26895,8 +26720,6 @@ snapshots:
 
   commander@4.1.1: {}
 
-  commander@5.1.0: {}
-
   commander@7.2.0: {}
 
   commander@8.3.0: {}
@@ -27162,8 +26985,6 @@ snapshots:
       mdn-data: 2.27.1
       source-map-js: 1.2.1
 
-  css-unit-converter@1.1.2: {}
-
   css-what@5.1.0: {}
 
   cssesc@3.0.0: {}
@@ -27501,8 +27322,6 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
-  defined@1.0.1: {}
-
   defu@6.1.7: {}
 
   delaunator@5.0.1:
@@ -27527,17 +27346,10 @@ snapshots:
 
   detect-libc@1.0.3: {}
 
-  detect-libc@2.1.2:
-    optional: true
+  detect-libc@2.1.2: {}
 
   detect-node-es@1.1.0: {}
 
-  detective@5.2.1:
-    dependencies:
-      acorn-node: 1.8.2
-      defined: 1.0.1
-      minimist: 1.2.8
-
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
@@ -27547,8 +27359,6 @@ snapshots:
       asap: 2.0.6
       wrappy: 1.0.2
 
-  didyoumean@1.2.2: {}
-
   diff@5.1.0: {}
 
   dir-glob@3.0.1:
@@ -27557,8 +27367,6 @@ snapshots:
 
   discontinuous-range@1.0.0: {}
 
-  dlv@1.1.3: {}
-
   docker-compose@1.4.2:
     dependencies:
       yaml: 2.9.0
@@ -27731,8 +27539,6 @@ snapshots:
 
   electron-to-chromium@1.4.433: {}
 
-  electron-to-chromium@1.5.252: {}
-
   electron-to-chromium@1.5.325: {}
 
   emoji-regex@8.0.0: {}
@@ -27807,7 +27613,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  enhanced-resolve@5.18.3:
+  enhanced-resolve@5.21.6:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.3
@@ -28850,8 +28656,6 @@ snapshots:
     dependencies:
       minipass: 7.1.3
 
-  fs.realpath@1.0.0: {}
-
   fsevents@2.3.2:
     optional: true
 
@@ -28977,10 +28781,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
   glob-to-regexp@0.4.1: {}
 
   glob@10.4.5:
@@ -29007,15 +28807,6 @@ snapshots:
       minipass: 7.1.3
       path-scurry: 2.0.2
 
-  glob@7.2.3:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.5
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-
   globals@11.12.0: {}
 
   globals@15.15.0: {}
@@ -29225,7 +29016,7 @@ snapshots:
 
   hast-util-to-jsx-runtime@2.3.6:
     dependencies:
-      '@types/estree': 1.0.9
+      '@types/estree': 1.0.8
       '@types/hast': 3.0.4
       '@types/unist': 3.0.3
       comma-separated-tokens: 2.0.3
@@ -29289,8 +29080,6 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
-  html-tags@3.3.1: {}
-
   html-to-text@9.0.5:
     dependencies:
       '@selderee/plugin-htmlparser2': 0.11.0
@@ -29406,11 +29195,6 @@ snapshots:
 
   indent-string@5.0.0: {}
 
-  inflight@1.0.6:
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-
   inherits@2.0.4: {}
 
   ini@1.3.8: {}
@@ -29511,8 +29295,6 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
-  is-arrayish@0.3.2: {}
-
   is-bigint@1.0.4:
     dependencies:
       has-bigints: 1.0.2
@@ -29710,6 +29492,8 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  jiti@2.7.0: {}
+
   joi@17.7.0:
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -29760,8 +29544,6 @@ snapshots:
 
   jsep@1.4.0: {}
 
-  jsesc@2.5.2: {}
-
   jsesc@3.0.2: {}
 
   json-buffer@3.0.0: {}
@@ -29904,53 +29686,54 @@ snapshots:
       process-warning: 4.0.1
       set-cookie-parser: 2.6.0
 
-  lightningcss-darwin-arm64@1.29.2:
+  lightningcss-android-arm64@1.32.0:
     optional: true
 
-  lightningcss-darwin-x64@1.29.2:
+  lightningcss-darwin-arm64@1.32.0:
     optional: true
 
-  lightningcss-freebsd-x64@1.29.2:
+  lightningcss-darwin-x64@1.32.0:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.29.2:
+  lightningcss-freebsd-x64@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.29.2:
+  lightningcss-linux-arm-gnueabihf@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.29.2:
+  lightningcss-linux-arm64-gnu@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.29.2:
+  lightningcss-linux-arm64-musl@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-musl@1.29.2:
+  lightningcss-linux-x64-gnu@1.32.0:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.29.2:
+  lightningcss-linux-x64-musl@1.32.0:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.29.2:
+  lightningcss-win32-arm64-msvc@1.32.0:
     optional: true
 
-  lightningcss@1.29.2:
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
     dependencies:
       detect-libc: 2.1.2
     optionalDependencies:
-      lightningcss-darwin-arm64: 1.29.2
-      lightningcss-darwin-x64: 1.29.2
-      lightningcss-freebsd-x64: 1.29.2
-      lightningcss-linux-arm-gnueabihf: 1.29.2
-      lightningcss-linux-arm64-gnu: 1.29.2
-      lightningcss-linux-arm64-musl: 1.29.2
-      lightningcss-linux-x64-gnu: 1.29.2
-      lightningcss-linux-x64-musl: 1.29.2
-      lightningcss-win32-arm64-msvc: 1.29.2
-      lightningcss-win32-x64-msvc: 1.29.2
-    optional: true
-
-  lilconfig@2.1.0: {}
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
 
   lilconfig@3.1.3: {}
 
@@ -30007,8 +29790,6 @@ snapshots:
 
   lodash.camelcase@4.3.0: {}
 
-  lodash.castarray@4.4.0: {}
-
   lodash.debounce@4.0.8: {}
 
   lodash.defaults@4.2.0: {}
@@ -30027,8 +29808,6 @@ snapshots:
 
   lodash.isstring@4.0.1: {}
 
-  lodash.merge@4.6.2: {}
-
   lodash.omit@4.5.0: {}
 
   lodash.once@4.1.1: {}
@@ -31110,6 +30889,8 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  nanoid@3.3.12: {}
+
   nanoid@3.3.8: {}
 
   nanoid@5.0.6: {}
@@ -31151,10 +30932,6 @@ snapshots:
 
   node-domexception@1.0.0: {}
 
-  node-emoji@1.11.0:
-    dependencies:
-      lodash: 4.18.1
-
   node-emoji@2.1.3:
     dependencies:
       '@sindresorhus/is': 4.6.0
@@ -31181,8 +30958,6 @@ snapshots:
 
   node-releases@2.0.12: {}
 
-  node-releases@2.0.27: {}
-
   node-releases@2.0.36: {}
 
   nodemailer@8.0.6: {}
@@ -31213,8 +30988,6 @@ snapshots:
 
   normalize-url@4.5.1: {}
 
-  normalize.css@8.0.1: {}
-
   notepack.io@3.0.1: {}
 
   npm-install-checks@6.2.0:
@@ -31262,8 +31035,6 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
-  num2fraction@1.2.2: {}
-
   nypm@0.3.9:
     dependencies:
       citty: 0.1.6
@@ -31302,7 +31073,8 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@2.2.0: {}
+  object-hash@2.2.0:
+    optional: true
 
   object-hash@3.0.0: {}
 
@@ -31616,7 +31388,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.24.7
+      '@babel/code-frame': 7.29.7
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -31656,8 +31428,6 @@ snapshots:
 
   path-expression-matcher@1.5.0: {}
 
-  path-is-absolute@1.0.1: {}
-
   path-key@2.0.1: {}
 
   path-key@3.1.1: {}
@@ -31777,8 +31547,6 @@ snapshots:
     dependencies:
       split2: 4.2.0
 
-  picocolors@0.2.1: {}
-
   picocolors@1.0.0: {}
 
   picocolors@1.1.1: {}
@@ -31869,37 +31637,13 @@ snapshots:
     dependencies:
       postcss: 8.5.10
 
-  postcss-functions@3.0.0:
+  postcss-import@16.0.1(postcss@8.5.15):
     dependencies:
-      glob: 7.2.3
-      object-assign: 4.1.1
-      postcss: 6.0.23
-      postcss-value-parser: 3.3.1
-
-  postcss-import@15.1.0(postcss@8.5.10):
-    dependencies:
-      postcss: 8.5.10
+      postcss: 8.5.15
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-import@16.0.1(postcss@8.5.10):
-    dependencies:
-      postcss: 8.5.10
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
-  postcss-js@2.0.3:
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 7.0.39
-
-  postcss-js@4.0.1(postcss@8.5.10):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.10
-
   postcss-load-config@4.0.2(postcss@8.5.10):
     dependencies:
       lilconfig: 3.1.3
@@ -31907,29 +31651,29 @@ snapshots:
     optionalDependencies:
       postcss: 8.5.10
 
-  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.10)(tsx@4.17.0)(yaml@2.9.0):
+  postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.17.0)(yaml@2.9.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
-      jiti: 2.6.1
-      postcss: 8.5.10
+      jiti: 2.7.0
+      postcss: 8.5.15
       tsx: 4.17.0
       yaml: 2.9.0
 
-  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.10)(tsx@4.22.4)(yaml@2.9.0):
+  postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.22.4)(yaml@2.9.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
-      jiti: 2.6.1
-      postcss: 8.5.10
+      jiti: 2.7.0
+      postcss: 8.5.15
       tsx: 4.22.4
       yaml: 2.9.0
 
-  postcss-loader@8.1.1(postcss@8.5.10)(typescript@5.5.4)(webpack@5.102.1(@swc/core@1.3.26)(esbuild@0.15.18)):
+  postcss-loader@8.1.1(postcss@8.5.15)(typescript@5.5.4)(webpack@5.102.1(@swc/core@1.3.26)(esbuild@0.15.18)):
     dependencies:
       cosmiconfig: 9.0.0(typescript@5.5.4)
       jiti: 1.21.0
-      postcss: 8.5.10
+      postcss: 8.5.15
       semver: 7.6.3
     optionalDependencies:
       webpack: 5.102.1(@swc/core@1.3.26)(esbuild@0.15.18)
@@ -31969,16 +31713,6 @@ snapshots:
       postcss-modules-values: 4.0.0(postcss@8.5.10)
       string-hash: 1.1.3
 
-  postcss-nested@4.2.3:
-    dependencies:
-      postcss: 7.0.39
-      postcss-selector-parser: 6.1.2
-
-  postcss-nested@6.2.0(postcss@8.5.10):
-    dependencies:
-      postcss: 8.5.10
-      postcss-selector-parser: 6.1.2
-
   postcss-selector-parser@6.0.10:
     dependencies:
       cssesc: 3.0.0
@@ -31989,33 +31723,20 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-value-parser@3.3.1: {}
-
   postcss-value-parser@4.2.0: {}
 
-  postcss@6.0.23:
-    dependencies:
-      chalk: 2.4.2
-      source-map: 0.6.1
-      supports-color: 5.5.0
-
-  postcss@7.0.32:
-    dependencies:
-      chalk: 2.4.2
-      source-map: 0.6.1
-      supports-color: 6.1.0
-
-  postcss@7.0.39:
-    dependencies:
-      picocolors: 0.2.1
-      source-map: 0.6.1
-
   postcss@8.5.10:
     dependencies:
       nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.15:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postgres-array@2.0.0: {}
 
   postgres-array@3.0.4: {}
@@ -32079,8 +31800,6 @@ snapshots:
 
   prettier@3.8.3: {}
 
-  pretty-hrtime@1.0.3: {}
-
   pretty-ms@7.0.1:
     dependencies:
       parse-ms: 2.1.0
@@ -32095,6 +31814,12 @@ snapshots:
       clsx: 2.1.1
       react: 18.3.1
 
+  prism-react-renderer@2.4.1(react@18.3.1):
+    dependencies:
+      '@types/prismjs': 1.26.0
+      clsx: 2.1.1
+      react: 18.3.1
+
   prisma@6.14.0(magicast@0.3.5)(typescript@5.5.4):
     dependencies:
       '@prisma/config': 6.14.0(magicast@0.3.5)
@@ -32217,13 +31942,6 @@ snapshots:
 
   pure-rand@6.1.0: {}
 
-  purgecss@2.3.0:
-    dependencies:
-      commander: 5.1.0
-      glob: 7.2.3
-      postcss: 7.0.32
-      postcss-selector-parser: 6.1.2
-
   qrcode.react@4.2.0(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -32395,7 +32113,7 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       socket.io: 4.8.3(bufferutil@4.0.9)
-      tailwindcss: 4.3.0
+      tailwindcss: 4.3.1
       tsconfig-paths: 4.2.0
     transitivePeerDependencies:
       - bufferutil
@@ -32693,11 +32411,6 @@ snapshots:
     dependencies:
       node-abort-controller: 3.1.1
 
-  reduce-css-calc@2.1.8:
-    dependencies:
-      css-unit-converter: 1.1.2
-      postcss-value-parser: 3.3.1
-
   regenerator-runtime@0.13.11: {}
 
   regenerator-runtime@0.14.1: {}
@@ -33343,10 +33056,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  simple-swizzle@0.2.2:
-    dependencies:
-      is-arrayish: 0.3.2
-
   simplur@3.0.1: {}
 
   sisteransi@1.0.5: {}
@@ -33588,7 +33297,7 @@ snapshots:
       remark-parse: 11.0.0
       remark-rehype: 11.1.2
       remend: 1.3.0
-      tailwind-merge: 3.5.0
+      tailwind-merge: 3.6.0
       unified: 11.0.5
       unist-util-visit: 5.0.0
       unist-util-visit-parents: 6.0.1
@@ -33731,7 +33440,7 @@ snapshots:
 
   sucrase@3.35.0:
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/gen-mapping': 0.3.13
       commander: 4.1.1
       glob: 10.4.5
       lines-and-columns: 1.2.4
@@ -33772,10 +33481,6 @@ snapshots:
     dependencies:
       has-flag: 3.0.0
 
-  supports-color@6.1.0:
-    dependencies:
-      has-flag: 3.0.0
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -33817,77 +33522,20 @@ snapshots:
 
   tagged-tag@1.0.0: {}
 
-  tailwind-merge@1.12.0: {}
+  tailwind-merge@3.6.0: {}
 
-  tailwind-merge@3.5.0: {}
-
-  tailwind-scrollbar-hide@1.1.7: {}
-
-  tailwind-scrollbar@3.0.1(tailwindcss@3.4.1):
+  tailwind-scrollbar-hide@4.0.0(tailwindcss@4.3.1):
     dependencies:
-      tailwindcss: 3.4.1
+      tailwindcss: 4.3.1
 
-  tailwindcss-animate@1.0.5(tailwindcss@3.4.1):
+  tailwind-scrollbar@4.0.2(react@18.3.1)(tailwindcss@4.3.1):
     dependencies:
-      tailwindcss: 3.4.1
-
-  tailwindcss-textshadow@2.1.3:
-    dependencies:
-      tailwindcss: 1.9.6
-
-  tailwindcss@1.9.6:
-    dependencies:
-      '@fullhuman/postcss-purgecss': 2.3.0
-      autoprefixer: 9.8.8
-      browserslist: 4.24.4
-      bytes: 3.1.2
-      chalk: 4.1.2
-      color: 3.2.1
-      detective: 5.2.1
-      fs-extra: 8.1.0
-      html-tags: 3.3.1
-      lodash: 4.18.1
-      node-emoji: 1.11.0
-      normalize.css: 8.0.1
-      object-hash: 2.2.0
-      postcss: 7.0.39
-      postcss-functions: 3.0.0
-      postcss-js: 2.0.3
-      postcss-nested: 4.2.3
-      postcss-selector-parser: 6.1.2
-      postcss-value-parser: 4.2.0
-      pretty-hrtime: 1.0.3
-      reduce-css-calc: 2.1.8
-      resolve: 1.22.8
-
-  tailwindcss@3.4.1:
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.10
-      postcss-import: 15.1.0(postcss@8.5.10)
-      postcss-js: 4.0.1(postcss@8.5.10)
-      postcss-load-config: 4.0.2(postcss@8.5.10)
-      postcss-nested: 6.2.0(postcss@8.5.10)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
-      sucrase: 3.35.0
+      prism-react-renderer: 2.4.1(react@18.3.1)
+      tailwindcss: 4.3.1
     transitivePeerDependencies:
-      - ts-node
+      - react
 
-  tailwindcss@4.3.0: {}
+  tailwindcss@4.3.1: {}
 
   tapable@2.3.3: {}
 
@@ -34209,7 +33857,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.4.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(jiti@2.6.1)(postcss@8.5.10)(tsx@4.17.0)(typescript@5.5.4)(yaml@2.9.0):
+  tsup@8.4.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(jiti@2.7.0)(postcss@8.5.15)(tsx@4.17.0)(typescript@5.5.4)(yaml@2.9.0):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.1)
       cac: 6.7.14
@@ -34219,7 +33867,7 @@ snapshots:
       esbuild: 0.25.1
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.10)(tsx@4.17.0)(yaml@2.9.0)
+      postcss-load-config: 6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.17.0)(yaml@2.9.0)
       resolve-from: 5.0.0
       rollup: 4.60.1
       source-map: 0.8.0-beta.0
@@ -34229,7 +33877,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       '@swc/core': 1.3.101(@swc/helpers@0.5.15)
-      postcss: 8.5.10
+      postcss: 8.5.15
       typescript: 5.5.4
     transitivePeerDependencies:
       - jiti
@@ -34237,7 +33885,7 @@ snapshots:
       - tsx
       - yaml
 
-  tsup@8.4.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(jiti@2.6.1)(postcss@8.5.10)(tsx@4.22.4)(typescript@5.5.4)(yaml@2.9.0):
+  tsup@8.4.0(@swc/core@1.3.101(@swc/helpers@0.5.15))(jiti@2.7.0)(postcss@8.5.15)(tsx@4.22.4)(typescript@5.5.4)(yaml@2.9.0):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.1)
       cac: 6.7.14
@@ -34247,7 +33895,7 @@ snapshots:
       esbuild: 0.25.1
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.10)(tsx@4.22.4)(yaml@2.9.0)
+      postcss-load-config: 6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.22.4)(yaml@2.9.0)
       resolve-from: 5.0.0
       rollup: 4.60.1
       source-map: 0.8.0-beta.0
@@ -34257,7 +33905,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       '@swc/core': 1.3.101(@swc/helpers@0.5.15)
-      postcss: 8.5.10
+      postcss: 8.5.15
       typescript: 5.5.4
     transitivePeerDependencies:
       - jiti
@@ -34343,6 +33991,8 @@ snapshots:
       turbo-windows-64: 1.10.3
       turbo-windows-arm64: 1.10.3
 
+  tw-animate-css@1.4.0: {}
+
   tweetnacl@0.14.5: {}
 
   type-fest@0.13.1: {}
@@ -34563,12 +34213,6 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
-  update-browserslist-db@1.1.4(browserslist@4.24.4):
-    dependencies:
-      browserslist: 4.24.4
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
   update-browserslist-db@1.2.3(browserslist@4.28.1):
     dependencies:
       browserslist: 4.28.1
@@ -34727,7 +34371,7 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-node@0.28.5(@types/node@22.20.0)(lightningcss@1.29.2)(terser@5.46.1):
+  vite-node@0.28.5(@types/node@22.20.0)(lightningcss@1.32.0)(terser@5.46.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3(supports-color@10.0.0)
@@ -34736,7 +34380,7 @@ snapshots:
       picocolors: 1.1.1
       source-map: 0.6.1
       source-map-support: 0.5.21
-      vite: 4.4.9(@types/node@22.20.0)(lightningcss@1.29.2)(terser@5.46.1)
+      vite: 4.4.9(@types/node@22.20.0)(lightningcss@1.32.0)(terser@5.46.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -34747,13 +34391,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@3.1.4(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0):
+  vite-node@3.1.4(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3(supports-color@10.0.0)
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0)
+      vite: 6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -34777,7 +34421,7 @@ snapshots:
       - supports-color
       - typescript
 
-  vite@4.4.9(@types/node@22.20.0)(lightningcss@1.29.2)(terser@5.46.1):
+  vite@4.4.9(@types/node@22.20.0)(lightningcss@1.32.0)(terser@5.46.1):
     dependencies:
       esbuild: 0.18.20
       postcss: 8.5.10
@@ -34785,10 +34429,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.20.0
       fsevents: 2.3.3
-      lightningcss: 1.29.2
+      lightningcss: 1.32.0
       terser: 5.46.1
 
-  vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0):
+  vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.4)
@@ -34799,13 +34443,13 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.20.0
       fsevents: 2.3.3
-      jiti: 2.6.1
-      lightningcss: 1.29.2
+      jiti: 2.7.0
+      lightningcss: 1.32.0
       terser: 5.46.1
       tsx: 3.12.2
       yaml: 2.9.0
 
-  vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0):
+  vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.4)
@@ -34816,13 +34460,13 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.20.0
       fsevents: 2.3.3
-      jiti: 2.6.1
-      lightningcss: 1.29.2
+      jiti: 2.7.0
+      lightningcss: 1.32.0
       terser: 5.46.1
       tsx: 4.20.6
       yaml: 2.9.0
 
-  vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0):
+  vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.4)
@@ -34833,16 +34477,16 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.20.0
       fsevents: 2.3.3
-      jiti: 2.6.1
-      lightningcss: 1.29.2
+      jiti: 2.7.0
+      lightningcss: 1.32.0
       terser: 5.46.1
       tsx: 4.22.4
       yaml: 2.9.0
 
-  vitest@4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0)):
+  vitest@4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.7
-      '@vitest/mocker': 4.1.7(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
+      '@vitest/mocker': 4.1.7(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
       '@vitest/pretty-format': 4.1.7
       '@vitest/runner': 4.1.7
       '@vitest/snapshot': 4.1.7
@@ -34859,7 +34503,7 @@ snapshots:
       tinyexec: 1.2.3
       tinyglobby: 0.2.16
       tinyrainbow: 3.1.0
-      vite: 6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0)
+      vite: 6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
@@ -34868,10 +34512,10 @@ snapshots:
     transitivePeerDependencies:
       - msw
 
-  vitest@4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0)):
+  vitest@4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.20.0)(@vitest/coverage-v8@4.1.7)(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.7
-      '@vitest/mocker': 4.1.7(vite@6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+      '@vitest/mocker': 4.1.7(vite@6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
       '@vitest/pretty-format': 4.1.7
       '@vitest/runner': 4.1.7
       '@vitest/snapshot': 4.1.7
@@ -34888,7 +34532,7 @@ snapshots:
       tinyexec: 1.2.3
       tinyglobby: 0.2.16
       tinyrainbow: 3.1.0
-      vite: 6.4.2(@types/node@22.20.0)(jiti@2.6.1)(lightningcss@1.29.2)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0)
+      vite: 6.4.2(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
@@ -34961,7 +34605,7 @@ snapshots:
       acorn-import-phases: 1.0.4(acorn@8.16.0)
       browserslist: 4.28.1
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.18.3
+      enhanced-resolve: 5.21.6
       es-module-lexer: 1.7.0
       eslint-scope: 5.1.1
       events: 3.3.0