From 89bc27bf8a4796888880a4083b500840f8f4a0c2 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 11:50:20 +0000
Subject: [PATCH 01/10] chore(webapp): migrate to tailwind v4

CSS-first @theme in app/tailwind.css: static palettes plus semantic color
tokens as CSS variables, overridable per theme. Tailwind runs through
@tailwindcss/postcss (Remix integration off). Plugins upgraded or replaced
with v4 equivalents; tailwind-merge bumped to v3. Utility classes codemodded
by the official upgrade tool. Fixed two invalid arbitrary variants the
upgrade surfaced (table sticky cell :has(), number input attribute variant).
---
 .server-changes/tailwind-v4-migration.md      |    6 +
 apps/webapp/app/components/AskAI.tsx          |    6 +-
 .../app/components/BackgroundWrapper.tsx      |    6 +-
 .../app/components/DefinitionTooltip.tsx      |    2 +-
 apps/webapp/app/components/Feedback.tsx       |    2 +-
 apps/webapp/app/components/GitMetadata.tsx    |    6 +-
 apps/webapp/app/components/ListPagination.tsx |    4 +-
 .../app/components/ProductHuntBanner.tsx      |    2 +-
 apps/webapp/app/components/WarmStarts.tsx     |    6 +-
 .../app/components/code/AIQueryInput.tsx      |    2 +-
 .../app/components/code/ChartConfigPanel.tsx  |    2 +-
 .../app/components/code/TSQLResultsTable.tsx  |   12 +-
 .../DashboardAgentComposer.tsx                |    2 +-
 .../dashboard-agent/DashboardAgentHistory.tsx |    2 +-
 apps/webapp/app/components/logs/LogsTable.tsx |    2 +-
 .../app/components/metrics/BigNumber.tsx      |    2 +-
 .../app/components/metrics/QueryWidget.tsx    |    4 +-
 .../metrics/SaveToDashboardDialog.tsx         |    4 +-
 .../app/components/metrics/TitleWidget.tsx    |    4 +-
 .../navigation/EnvironmentSelector.tsx        |    8 +-
 .../navigation/HelpAndFeedbackPopover.tsx     |    6 +-
 .../navigation/NotificationPanel.tsx          |    4 +-
 .../app/components/navigation/SideMenu.tsx    |   16 +-
 .../components/navigation/SideMenuItem.tsx    |    6 +-
 .../onboarding/TechnologyPicker.tsx           |    8 +-
 .../app/components/primitives/Alert.tsx       |    2 +-
 .../components/primitives/AnimatingArrow.tsx  |   10 +-
 .../components/primitives/AppliedFilter.tsx   |    2 +-
 .../app/components/primitives/Avatar.tsx      |    4 +-
 .../app/components/primitives/Buttons.tsx     |   12 +-
 .../app/components/primitives/Calendar.tsx    |   10 +-
 .../app/components/primitives/Callout.tsx     |    6 +-
 .../app/components/primitives/Checkbox.tsx    |    8 +-
 .../app/components/primitives/ClientTabs.tsx  |    2 +-
 .../components/primitives/ClipboardField.tsx  |   12 +-
 .../app/components/primitives/DateField.tsx   |    4 +-
 .../components/primitives/DateTimePicker.tsx  |    2 +-
 .../app/components/primitives/Dialog.tsx      |    6 +-
 .../app/components/primitives/Input.tsx       |    4 +-
 .../primitives/InputNumberStepper.tsx         |   12 +-
 .../app/components/primitives/InputOTP.tsx    |    6 +-
 .../primitives/LoadingBarDivider.tsx          |    2 +-
 .../app/components/primitives/Pagination.tsx  |    4 +-
 .../app/components/primitives/Popover.tsx     |    6 +-
 .../app/components/primitives/RadioButton.tsx |   16 +-
 .../app/components/primitives/Resizable.tsx   |    4 +-
 .../primitives/SegmentedControl.tsx           |    2 +-
 .../app/components/primitives/Select.tsx      |   12 +-
 .../app/components/primitives/ShortcutKey.tsx |    4 +-
 .../components/primitives/SimpleSelect.tsx    |    6 +-
 .../app/components/primitives/Slider.tsx      |    4 +-
 .../app/components/primitives/Switch.tsx      |   12 +-
 .../app/components/primitives/Table.tsx       |   14 +-
 .../app/components/primitives/Tooltip.tsx     |    2 +-
 .../primitives/TreeView/TreeView.tsx          |    2 +-
 .../components/primitives/UsageSparkline.tsx  |    2 +-
 .../primitives/charts/BigNumberCard.tsx       |    6 +-
 .../components/primitives/charts/Chart.tsx    |    6 +-
 .../primitives/charts/ChartCard.tsx           |    2 +-
 .../primitives/charts/ChartLegendCompound.tsx |    2 +-
 .../primitives/charts/ChartRoot.tsx           |    2 +-
 .../primitives/charts/ChartZoom.tsx           |    4 +-
 .../app/components/query/QueryEditor.tsx      |    4 +-
 .../webapp/app/components/run/RunTimeline.tsx |   22 +-
 .../app/components/runs/v3/AIFilterInput.tsx  |    4 +-
 .../components/runs/v3/ReplayRunDialog.tsx    |    2 +-
 .../runs/v3/RunStatusCellTooltip.tsx          |    2 +-
 apps/webapp/app/components/runs/v3/RunTag.tsx |   10 +-
 .../app/components/runs/v3/SharedFilters.tsx  |    2 +-
 .../app/components/runs/v3/TaskRunsTable.tsx  |   20 +-
 .../components/runs/v3/TaskTriggerSource.tsx  |   14 +-
 .../runs/v3/agent/AgentMessageView.tsx        |    2 +-
 .../components/runs/v3/ai/AIChatMessages.tsx  |    2 +-
 .../components/runs/v3/ai/AIModelSummary.tsx  |    2 +-
 .../components/runs/v3/ai/AISpanDetails.tsx   |    2 +-
 .../components/runs/v3/ai/SpanMetricRow.tsx   |    2 +-
 .../components/sessions/v1/SessionsTable.tsx  |    2 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    4 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |    4 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |   12 +-
 .../AITabContent.tsx                          |    2 +-
 .../QueryHistoryPopover.tsx                   |    6 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |    4 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    2 +-
 .../AIPayloadTabContent.tsx                   |   24 +-
 .../route.tsx                                 |   12 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    2 +-
 .../webapp/app/routes/_app.orgs.new/route.tsx |    2 +-
 .../app/routes/_app.timezones/route.tsx       |    4 +-
 .../route.tsx                                 |    2 +-
 .../app/routes/account.security/route.tsx     |    2 +-
 .../app/routes/confirm-basic-details.tsx      |    2 +-
 apps/webapp/app/routes/invites.tsx            |    2 +-
 apps/webapp/app/routes/login._index/route.tsx |    2 +-
 .../webapp/app/routes/resources.incidents.tsx |    6 +-
 .../route.tsx                                 |    6 +-
 ...cts.$projectParam.env.$envParam.vercel.tsx |    2 +-
 ...ctParam.schedules.new.natural-language.tsx |    2 +-
 ...ces.orgs.$organizationSlug.select-plan.tsx |    4 +-
 .../app/routes/storybook.agent-ui/route.tsx   |    2 +-
 .../app/routes/storybook.popover/route.tsx    |    2 +-
 .../app/routes/storybook.table/route.tsx      |    2 +-
 .../app/routes/storybook.timeline/route.tsx   |    8 +-
 .../app/routes/unsubscribe.$userId.$token.tsx |    2 +-
 apps/webapp/app/routes/vercel.onboarding.tsx  |    6 +-
 .../resolveRealtimeStreamClient.server.ts     |    4 +-
 .../shadowRealtimeClientInstance.server.ts    |    2 +-
 apps/webapp/app/tailwind.css                  |  408 +++++--
 apps/webapp/app/utils/cn.ts                   |   74 +-
 apps/webapp/app/utils/randomWords.ts          |    6 +-
 apps/webapp/app/v3/featureFlags.ts            |    4 +-
 .../computeTemplateCreation.server.ts         |   12 +-
 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                                | 1005 ++++++-----------
 133 files changed, 1039 insertions(+), 1517 deletions(-)
 create mode 100644 .server-changes/tailwind-v4-migration.md
 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 00000000000..c1675ff21b7
--- /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/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index bf76654cced..0276695f79d 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>
@@ -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"
@@ -531,7 +531,7 @@ 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 ${
diff --git a/apps/webapp/app/components/BackgroundWrapper.tsx b/apps/webapp/app/components/BackgroundWrapper.tsx
index aaf06d56aaf..c13983a12af 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/DefinitionTooltip.tsx b/apps/webapp/app/components/DefinitionTooltip.tsx
index d91cce92c99..813f73cb524 100644
--- a/apps/webapp/app/components/DefinitionTooltip.tsx
+++ b/apps/webapp/app/components/DefinitionTooltip.tsx
@@ -21,7 +21,7 @@ export function DefinitionTip({
             {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 683f39d34ab..ebd61180de5 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 fb53ee6bfea..3057de10425 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 6e26330677f..5d2459e39b8 100644
--- a/apps/webapp/app/components/ListPagination.tsx
+++ b/apps/webapp/app/components/ListPagination.tsx
@@ -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/ProductHuntBanner.tsx b/apps/webapp/app/components/ProductHuntBanner.tsx
index b85893836a1..3508104e2d9 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-charcoal-100 hover:decoration-2"
         variant="tertiary/small"
       >
         Vote for us today only!
diff --git a/apps/webapp/app/components/WarmStarts.tsx b/apps/webapp/app/components/WarmStarts.tsx
index 07a894b9e7b..50ffeee7997 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/code/AIQueryInput.tsx b/apps/webapp/app/components/code/AIQueryInput.tsx
index 8e804958db2..39dfaf338ac 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-charcoal-600 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();
diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index 1b61e46a752..73a2c94ac92 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -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-charcoal-700"
           title="Change series color"
         >
           <span
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 8e10f8e6faa..b1188712cd8 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -835,7 +835,7 @@ function CopyableCell({
         "relative flex h-full w-full items-center overflow-hidden px-2",
         "bg-background-bright group-hover/row:bg-charcoal-750",
         "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)}
@@ -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" />}
@@ -1006,7 +1006,7 @@ function FilterCell({
         className={cn(
           "w-full rounded border border-charcoal-700 bg-charcoal-800 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>
@@ -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-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"
         >
           {rowVirtualizer.getVirtualItems().map((virtualRow) => {
             const row = tableRows[virtualRow.index];
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
index 6f681346175..8d800aa2870 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
@@ -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-charcoal-600 field-sizing-content focus:outline-hidden focus:ring-0"
             )}
           />
           {isStreaming ? (
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
index af19d0d69c7..e6eee3d4f66 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
@@ -53,7 +53,7 @@ export function DashboardAgentHistory({
                   <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/logs/LogsTable.tsx b/apps/webapp/app/components/logs/LogsTable.tsx
index 8593670f8e5..118098cfd34 100644
--- a/apps/webapp/app/components/logs/LogsTable.tsx
+++ b/apps/webapp/app/components/logs/LogsTable.tsx
@@ -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 df3fa9e0a43..db98668e22f 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 cde5465721b..9f821816046 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 8f525a227cf..5cdc9e3e48d 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>
diff --git a/apps/webapp/app/components/metrics/TitleWidget.tsx b/apps/webapp/app/components/metrics/TitleWidget.tsx
index 0a5a7590e4d..23662db8e3d 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/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index 58c3aae5a0a..ebdb849990d 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -64,7 +64,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-charcoal-750",
               isCollapsed ? "justify-center pr-0.5" : "justify-between pr-1",
               className
             )}
@@ -98,12 +98,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-charcoal-600"
         side={isCollapsed ? "right" : "bottom"}
         sideOffset={isCollapsed ? 8 : 4}
         align="start"
@@ -258,7 +258,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-charcoal-600"
           align="start"
           style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
           side="right"
diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index 4264906d22d..ae45075e396 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-charcoal-750 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-charcoal-600"
           side={isCollapsed ? "right" : "top"}
           sideOffset={isCollapsed ? 8 : 4}
           align="start"
diff --git a/apps/webapp/app/components/navigation/NotificationPanel.tsx b/apps/webapp/app/components/navigation/NotificationPanel.tsx
index c9dfbcc43be..bb07b54da9a 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/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 395932f39e2..b0882da8a25 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} />
@@ -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-charcoal-750",
               isCollapsed ? "justify-center pr-0.5" : "w-full justify-between pr-1"
             )}
           >
@@ -876,12 +876,12 @@ 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-charcoal-600"
         side={isCollapsed ? "right" : "bottom"}
         sideOffset={isCollapsed ? 8 : 4}
         align="start"
@@ -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-charcoal-600"
           align="start"
           style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
           side="right"
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index f2349fc1e6e..ff442dd2e42 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -56,7 +56,7 @@ 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"
@@ -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
@@ -147,7 +147,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/onboarding/TechnologyPicker.tsx b/apps/webapp/app/components/onboarding/TechnologyPicker.tsx
index 9c9f9a6b24a..21bb39fd48a 100644
--- a/apps/webapp/app/components/onboarding/TechnologyPicker.tsx
+++ b/apps/webapp/app/components/onboarding/TechnologyPicker.tsx
@@ -293,18 +293,18 @@ 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-charcoal-700 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>
 
@@ -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/Alert.tsx b/apps/webapp/app/components/primitives/Alert.tsx
index a4dcd85c757..b9caf1b4549 100644
--- a/apps/webapp/app/components/primitives/Alert.tsx
+++ b/apps/webapp/app/components/primitives/Alert.tsx
@@ -23,7 +23,7 @@ const AlertOverlay = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background-dimmed/80 backdrop-blur-sm transition-opacity animate-in fade-in",
+      "fixed inset-0 z-50 bg-background-dimmed/80 backdrop-blur-xs transition-opacity animate-in fade-in",
       className
     )}
     {...props}
diff --git a/apps/webapp/app/components/primitives/AnimatingArrow.tsx b/apps/webapp/app/components/primitives/AnimatingArrow.tsx
index 68dbf5c4d82..7f9a28343ce 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 2eab4b772f6..f7b3659d12c 100644
--- a/apps/webapp/app/components/primitives/AppliedFilter.tsx
+++ b/apps/webapp/app/components/primitives/AppliedFilter.tsx
@@ -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 9bc95d55b16..0d000a9a372 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/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx
index 38ebafdf13e..d7da379a568 100644
--- a/apps/webapp/app/components/primitives/Buttons.tsx
+++ b/apps/webapp/app/components/primitives/Buttons.tsx
@@ -92,7 +92,7 @@ const theme = {
   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-charcoal-700 border border-charcoal-600/50 shadow-sm group-hover/button:bg-charcoal-650 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",
@@ -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-charcoal-750 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 5b72bd1c97a..047426d5a98 100644
--- a/apps/webapp/app/components/primitives/Calendar.tsx
+++ b/apps/webapp/app/components/primitives/Calendar.tsx
@@ -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-charcoal-600 bg-charcoal-750 px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 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-charcoal-600 bg-charcoal-750 px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-hidden"
           value={calendarMonth.date.getFullYear()}
           onChange={(e) => {
             const newDate = new Date(calendarMonth.date);
@@ -94,11 +94,11 @@ 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-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_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",
+          "focus:bg-charcoal-700 focus:text-text-bright focus:outline-hidden",
           "aria-selected:opacity-100"
         ),
         range_start: "day-range-start rounded-l-md",
@@ -113,7 +113,7 @@ export function Calendar({
         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-charcoal-750 border border-charcoal-600 rounded px-2 py-1 text-sm text-text-bright focus:outline-hidden focus:border-charcoal-500",
         ...classNames,
       }}
       components={{
diff --git a/apps/webapp/app/components/primitives/Callout.tsx b/apps/webapp/app/components/primitives/Callout.tsx
index d3b7a0892b8..c45bf9bdef3 100644
--- a/apps/webapp/app/components/primitives/Callout.tsx
+++ b/apps/webapp/app/components/primitives/Callout.tsx
@@ -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 51486062fa1..37bcb9f4c94 100644
--- a/apps/webapp/app/components/primitives/Checkbox.tsx
+++ b/apps/webapp/app/components/primitives/Checkbox.tsx
@@ -27,7 +27,7 @@ const variants = {
     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-charcoal-850 border-charcoal-750 hover:bg-charcoal-850!",
     isDisabled: "opacity-70 hover:bg-transparent",
   },
   button: {
@@ -36,7 +36,7 @@ const variants = {
     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-charcoal-850 border-charcoal-750 hover:bg-charcoal-850!",
     isDisabled: "opacity-70 hover:bg-transparent",
   },
   description: {
@@ -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-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 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-charcoal-700!"
           )}
           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-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 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-charcoal-700!"
         )}
         {...props}
         ref={ref}
diff --git a/apps/webapp/app/components/primitives/ClientTabs.tsx b/apps/webapp/app/components/primitives/ClientTabs.tsx
index c992c25e7dd..b6f7ab230af 100644
--- a/apps/webapp/app/components/primitives/ClientTabs.tsx
+++ b/apps/webapp/app/components/primitives/ClientTabs.tsx
@@ -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 3d4028d926d..d9c46e1e96d 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-charcoal-750 text-xs transition hover:bg-charcoal-700 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,7 +14,7 @@ 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-charcoal-750 text-xs transition hover:bg-charcoal-700 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,
@@ -23,7 +23,7 @@ const variants = {
   },
   "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-charcoal-700 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,
@@ -33,7 +33,7 @@ const variants = {
   },
   "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-charcoal-750 text-sm transition hover:bg-charcoal-700 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,7 +42,7 @@ 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-charcoal-750 text-sm transition hover:bg-charcoal-700 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,
@@ -51,7 +51,7 @@ const variants = {
   },
   "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-charcoal-700 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,
diff --git a/apps/webapp/app/components/primitives/DateField.tsx b/apps/webapp/app/components/primitives/DateField.tsx
index a30ce91b6b1..9b6a08786ad 100644
--- a/apps/webapp/app/components/primitives/DateField.tsx
+++ b/apps/webapp/app/components/primitives/DateField.tsx
@@ -227,7 +227,7 @@ 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-charcoal-600 focus:text-text-bright",
         sizeVariant.fieldStyles,
         !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
       )}
@@ -275,7 +275,7 @@ 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 ${
+      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums text-rose-500 outline-hidden ${
         !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
       }`}
     >
diff --git a/apps/webapp/app/components/primitives/DateTimePicker.tsx b/apps/webapp/app/components/primitives/DateTimePicker.tsx
index 20e62caf0e1..2457ff63858 100644
--- a/apps/webapp/app/components/primitives/DateTimePicker.tsx
+++ b/apps/webapp/app/components/primitives/DateTimePicker.tsx
@@ -109,7 +109,7 @@ export function DateTimePicker({
         className={cn(
           "h-[1.8rem] rounded border border-charcoal-650 bg-charcoal-750 px-2 text-xs tabular-nums transition hover:border-charcoal-600",
           value ? "text-text-bright" : "text-text-dimmed",
-          "focus:border-charcoal-500 focus:outline-none",
+          "focus:border-charcoal-500 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/Dialog.tsx b/apps/webapp/app/components/primitives/Dialog.tsx
index bf485bbf1a2..3001830a009 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-charcoal-750 hover:opacity-100 focus-visible:focus-custom disabled:pointer-events-none">
           <ShortcutKey
             shortcut={{
               key: "esc",
diff --git a/apps/webapp/app/components/primitives/Input.tsx b/apps/webapp/app/components/primitives/Input.tsx
index 15a7592c32f..7a5ed414f2c 100644
--- a/apps/webapp/app/components/primitives/Input.tsx
+++ b/apps/webapp/app/components/primitives/Input.tsx
@@ -4,10 +4,10 @@ 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-charcoal-650 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: {
diff --git a/apps/webapp/app/components/primitives/InputNumberStepper.tsx b/apps/webapp/app/components/primitives/InputNumberStepper.tsx
index b434bb1d30a..5323e1fc1d3 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;
 
@@ -130,7 +130,7 @@ export function InputNumberStepper({
       className={cn(
         "flex items-center rounded border border-charcoal-600 bg-tertiary transition hover:border-charcoal-550/80 hover:bg-charcoal-600/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 54ca070ac05..59aad6b2a29 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-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-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-charcoal-600 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 52b4ff1da9c..713240177a5 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/Pagination.tsx b/apps/webapp/app/components/primitives/Pagination.tsx
index 7354febc227..aa207bb9285 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"
               )}
             />
@@ -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"
               )}
             />
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index 0d88ad968c1..e49361155da 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-charcoal-700 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={{
@@ -102,7 +102,7 @@ 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"
+          ? "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-charcoal-700",
         isSelected ? "bg-charcoal-750 group-hover:bg-charcoal-600/50" : undefined,
         className
@@ -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}
diff --git a/apps/webapp/app/components/primitives/RadioButton.tsx b/apps/webapp/app/components/primitives/RadioButton.tsx
index 87fb7a59f17..ab750400e81 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-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",
     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-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition data-[state=checked]:bg-charcoal-850 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-charcoal-600 border-charcoal-650 hover:data-[state=checked]:border-charcoal-600 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-charcoal-850 transition data-disabled:opacity-70 data-[state=checked]:bg-charcoal-850 border-charcoal-600 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",
   },
diff --git a/apps/webapp/app/components/primitives/Resizable.tsx b/apps/webapp/app/components/primitives/Resizable.tsx
index b2964c8e958..0d4b3f8dcea 100644
--- a/apps/webapp/app/components/primitives/Resizable.tsx
+++ b/apps/webapp/app/components/primitives/Resizable.tsx
@@ -53,13 +53,13 @@ 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>
         {/* 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" />
           ))}
diff --git a/apps/webapp/app/components/primitives/SegmentedControl.tsx b/apps/webapp/app/components/primitives/SegmentedControl.tsx
index 4001ec6d3b8..167bddc36d5 100644
--- a/apps/webapp/app/components/primitives/SegmentedControl.tsx
+++ b/apps/webapp/app/components/primitives/SegmentedControl.tsx
@@ -21,7 +21,7 @@ const theme = {
     base: "bg-charcoal-700",
     active: "text-text-bright hover:bg-charcoal-750/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",
diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx
index 25a646af559..1b00ca16cf9 100644
--- a/apps/webapp/app/components/primitives/Select.tsx
+++ b/apps/webapp/app/components/primitives/Select.tsx
@@ -619,7 +619,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-charcoal-700 bg-charcoal-750 px-2.5 text-xxs uppercase text-text-bright",
         props.className
       )}
     />
@@ -629,7 +629,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-charcoal-700 bg-charcoal-750 px-2.5 text-xxs uppercase text-text-bright">
       <Ariakit.SelectHeading render={render} />
     </div>
   );
@@ -649,11 +649,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-charcoal-700 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 +678,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/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx
index a8a7741c06b..572932f7f21 100644
--- a/apps/webapp/app/components/primitives/ShortcutKey.tsx
+++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx
@@ -9,10 +9,10 @@ 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(
diff --git a/apps/webapp/app/components/primitives/SimpleSelect.tsx b/apps/webapp/app/components/primitives/SimpleSelect.tsx
index d7b9e4cccb2..72accc6b551 100644
--- a/apps/webapp/app/components/primitives/SimpleSelect.tsx
+++ b/apps/webapp/app/components/primitives/SimpleSelect.tsx
@@ -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-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",
       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-charcoal-750 focus:bg-charcoal-750/50",
         className
       )}
       {...props}
diff --git a/apps/webapp/app/components/primitives/Slider.tsx b/apps/webapp/app/components/primitives/Slider.tsx
index fe1129c5910..739c67d1263 100644
--- a/apps/webapp/app/components/primitives/Slider.tsx
+++ b/apps/webapp/app/components/primitives/Slider.tsx
@@ -12,7 +12,7 @@ const variants = {
     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/Switch.tsx b/apps/webapp/app/components/primitives/Switch.tsx
index 10fb0bf2975..3171003020c 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-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",
   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,12 +25,12 @@ 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-charcoal-600 group-hover:group-data-[state=unchecked]:bg-charcoal-500/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": {
@@ -40,10 +40,10 @@ const variations = {
     ),
     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-charcoal-550 group-hover:group-data-[state=unchecked]:bg-charcoal-500"
     ),
     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-charcoal-700 group-hover:group-data-[state=unchecked]:bg-charcoal-500/50",
           root
         )}
       >
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index bf827de5efe..09e55a868bb 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -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
@@ -313,12 +313,11 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
             ? "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-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",
           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}
@@ -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-charcoal-600"
                   align="end"
                 >
                   {typeof popoverContent === "function" ? (
diff --git a/apps/webapp/app/components/primitives/Tooltip.tsx b/apps/webapp/app/components/primitives/Tooltip.tsx
index 92f95babce0..41233783167 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 f6b5ad85d70..5579aeddd43 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-charcoal-600 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 2ffc1936a1d..6576cb5a3f2 100644
--- a/apps/webapp/app/components/primitives/UsageSparkline.tsx
+++ b/apps/webapp/app/components/primitives/UsageSparkline.tsx
@@ -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 />
diff --git a/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx b/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
index 7ea88b3fe96..d36fe540898 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 57a2692e677..ed23d41cd10 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -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/ChartCard.tsx b/apps/webapp/app/components/primitives/charts/ChartCard.tsx
index 507092e40b5..367bb703ea4 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 2efb6ac4dc8..199f2751c2b 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -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
diff --git a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
index 5b2b1b6cefa..2b8f630d878 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 3f797fc872d..42e134e3bd5 100644
--- a/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
@@ -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]"
@@ -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-charcoal-600 bg-charcoal-700" />
     </div>
   );
 }
diff --git a/apps/webapp/app/components/query/QueryEditor.tsx b/apps/webapp/app/components/query/QueryEditor.tsx
index 8520d2a7a0b..396eaa07e50 100644
--- a/apps/webapp/app/components/query/QueryEditor.tsx
+++ b/apps/webapp/app/components/query/QueryEditor.tsx
@@ -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
             }
           >
@@ -1078,7 +1078,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 839d94417c6..53ddb321f63 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 f2a01d27c6c..f46467ebcc5 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();
@@ -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/ReplayRunDialog.tsx b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
index d165afcb0a7..88ca9d2cd4e 100644
--- a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
@@ -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/RunStatusCellTooltip.tsx b/apps/webapp/app/components/runs/v3/RunStatusCellTooltip.tsx
index fad6b15bcf7..789572d7d83 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 14baeca1a3e..025e228b62e 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-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed group-hover:rounded-r-none group-hover:group-has-[[href]]:border-charcoal-650 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-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed group-hover:group-has-[[href]]:border-charcoal-650 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-charcoal-700 bg-charcoal-750 px-1.5 text-text-dimmed group-hover:rounded-r-none group-hover:group-has-[[href]]:border-charcoal-650 group-hover:group-has-[[href]]:bg-charcoal-700 group-hover:group-has-[[href]]:text-charcoal-300">
             {tagResult.value}
           </span>
         </>
diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index 17a84f711ae..39e9f5b0382 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -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/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index 069e0c891a1..e2c3015bd17 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
diff --git a/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx b/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx
index adb41dd9fe2..2e834c3b33e 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-[1.125rem] 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-[1.125rem] 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-[1.125rem] min-w-4.5 text-agents", className)} />;
     }
   }
 }
diff --git a/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx b/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx
index 8fecc26635d..e42672e5eea 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>
     );
diff --git a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
index bc8c21f0adb..b974083f4e3 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
@@ -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>
diff --git a/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx b/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx
index 5b3fedd4191..1ace3140ff8 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-charcoal-750/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 616adb44b34..9fde41d8cfe 100644
--- a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
@@ -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}
diff --git a/apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx b/apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx
index 81a96affdb6..af2c8d9e351 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-charcoal-750/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/sessions/v1/SessionsTable.tsx b/apps/webapp/app/components/sessions/v1/SessionsTable.tsx
index 7b74a6fa6c5..4669986446d 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>
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 e6173da559f..e6a2e658a66 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
@@ -304,7 +304,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 10dab7333c7..9da5a03c176 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"
                           >
@@ -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));
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 47318edd355..8d0e1bba0fb 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
@@ -201,7 +201,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.bulk-actions/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx
index ff209f417bf..e21efb4b9ef 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
@@ -229,7 +229,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>
@@ -238,7 +238,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>
@@ -246,7 +246,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._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards._index/route.tsx
index f2ecef08e52..16f00ae5854 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,7 +93,7 @@ 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",
+  "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-charcoal-600 hover:bg-charcoal-750"
 );
 
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 edf91e8ffbc..8aa6427afbf 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 36ca0f335e8..4990fb88003 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
@@ -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-charcoal-800/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 e860c312317..5fdb2af256d 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.environment-variables/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx
index d2b2a733c40..c2cd50164df 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
@@ -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 3abde6802c3..dfcf3384306 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
@@ -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}
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 4c6a4ee692f..5d296280753 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
@@ -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 />
@@ -763,7 +763,7 @@ 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]" />
       ))}
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 b797e6434f0..e4e85a47f65 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
@@ -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="w-fit! gap-1.75 px-0! pb-0! pt-0! 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-charcoal-600 [&_tbody_tr:last-child]:after:hidden">
             <Table stickyHeader showTopBorder={false}>
               <TableHeader>
                 <TableRow>
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 9b394570912..e8db1c9ecb0 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
@@ -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-charcoal-600 field-sizing-content focus:border-0 focus:outline-hidden focus:ring-0",
             minHeightClassName,
             maxHeightClassName
           )}
@@ -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}
@@ -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 bbd53d78e83..1c8af95fff6 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
@@ -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>
@@ -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-charcoal-650 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) => ({
@@ -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>
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 5d8b0b457de..1ce0ee7c808 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 />
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 baba6db6559..14a9a5cf3ab 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-charcoal-600 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/QueryHistoryPopover.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
index de7e7a79e03..b4e84001971 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-charcoal-700 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-charcoal-600">
           <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-charcoal-750"
                 >
                   <div className="flex w-full flex-col items-start">
                     {item.title ? (
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 877b1235a97..f8063b812dd 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 f6b3f9e4d7f..43c27a07c34 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>
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 d72655900be..b29be90264d 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">
@@ -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-charcoal-600"
                 align="start"
               >
                 <Header3 spacing>Keyboard shortcuts</Header3>
@@ -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}
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 7d07cb92872..3fc88c9899a 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
@@ -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}
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 614d7ce4bfd..e53261adb38 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
@@ -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"
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 c5ec45b4efb..5c3f4301d59 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="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-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();
@@ -369,18 +369,18 @@ export function AIPayloadTabContent({
                   "streamdown-container max-h-96 overflow-y-auto text-xs text-text-dimmed",
                   "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
                   // 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-charcoal-600"
                 )}
               >
                 <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-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"
             >
               <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/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
index 582f7f8ef47..61239b60601 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
@@ -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" />
@@ -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" />
@@ -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-charcoal-900	"
               >
                 <div className="flex flex-col items-start">
                   <Paragraph variant="small/bright">
@@ -1589,7 +1589,7 @@ function RunTemplatesPopover({
               {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-charcoal-900"
                 >
                   <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-charcoal-700 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-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-['']"
           >
             <CheckCircleIcon className="h-4 w-4 shrink-0 text-success" /> Template saved
             successfully
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 b5b97a0bb69..273390520d8 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
@@ -363,7 +363,7 @@ export default function Page() {
       <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
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 f5658bc4d8b..2a50bdcca6d 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
@@ -64,7 +64,7 @@ export default function ChoosePlanPage() {
     <AppContainer>
       <PageBody className="bg-charcoal-900">
         <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 d917265d9e6..4609de25fbf 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -145,7 +145,7 @@ export default function NewOrganizationPage() {
       <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 b9e2704ff6e..23eeaaf4e92 100644
--- a/apps/webapp/app/routes/_app.timezones/route.tsx
+++ b/apps/webapp/app/routes/_app.timezones/route.tsx
@@ -15,10 +15,10 @@ 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">
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 18035a0230e..5bd9550e66e 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 68dc8d1fcf4..4dc6fa76f73 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/confirm-basic-details.tsx b/apps/webapp/app/routes/confirm-basic-details.tsx
index ae7a5cbce16..0ee118979d5 100644
--- a/apps/webapp/app/routes/confirm-basic-details.tsx
+++ b/apps/webapp/app/routes/confirm-basic-details.tsx
@@ -243,7 +243,7 @@ export default function Page() {
       <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
diff --git a/apps/webapp/app/routes/invites.tsx b/apps/webapp/app/routes/invites.tsx
index 917813e581e..3bc77f2d21b 100644
--- a/apps/webapp/app/routes/invites.tsx
+++ b/apps/webapp/app/routes/invites.tsx
@@ -136,7 +136,7 @@ export default function Page() {
       <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
diff --git a/apps/webapp/app/routes/login._index/route.tsx b/apps/webapp/app/routes/login._index/route.tsx
index ca418e2d7f8..8fe521591e5 100644
--- a/apps/webapp/app/routes/login._index/route.tsx
+++ b/apps/webapp/app/routes/login._index/route.tsx
@@ -30,7 +30,7 @@ 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
       )}
     >
diff --git a/apps/webapp/app/routes/resources.incidents.tsx b/apps/webapp/app/routes/resources.incidents.tsx
index d9e107e5454..84f8dfc1da6 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 72b4d614ad2..86caf1fb5b8 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
@@ -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>
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 7e8648b3fa2..7a5f61a48dc 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.schedules.new.natural-language.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx
index 99c16f2b52c..18ec5322dc5 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-charcoal-600 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 02bd91cb9d5..3b49cba3416 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -755,7 +755,7 @@ 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={
@@ -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
       )}
diff --git a/apps/webapp/app/routes/storybook.agent-ui/route.tsx b/apps/webapp/app/routes/storybook.agent-ui/route.tsx
index e43015a361c..24017b2b9cc 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.popover/route.tsx b/apps/webapp/app/routes/storybook.popover/route.tsx
index d379d0a361c..27fdc774a2e 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-charcoal-600"
           align="start"
         >
           <Fragment>
diff --git a/apps/webapp/app/routes/storybook.table/route.tsx b/apps/webapp/app/routes/storybook.table/route.tsx
index f7ea4fef4ed..f2bee4fa429 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.timeline/route.tsx b/apps/webapp/app/routes/storybook.timeline/route.tsx
index 6aa28301ae1..8a95daf6894 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-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-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-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-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-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-hidden"
               aria-label="Concurrent runs slider"
             />
           </Slider.Root>
@@ -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/unsubscribe.$userId.$token.tsx b/apps/webapp/app/routes/unsubscribe.$userId.$token.tsx
index cca9c4c9f31..076a6155a40 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 94fd8f53476..ab9182ba079 100644
--- a/apps/webapp/app/routes/vercel.onboarding.tsx
+++ b/apps/webapp/app/routes/vercel.onboarding.tsx
@@ -331,7 +331,7 @@ export default function VercelOnboardingPage() {
         <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">
@@ -362,7 +362,7 @@ export default function VercelOnboardingPage() {
         <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" />}
@@ -442,7 +442,7 @@ export default function VercelOnboardingPage() {
       <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/services/realtime/resolveRealtimeStreamClient.server.ts b/apps/webapp/app/services/realtime/resolveRealtimeStreamClient.server.ts
index 4b2207fe190..a9079f3fd23 100644
--- a/apps/webapp/app/services/realtime/resolveRealtimeStreamClient.server.ts
+++ b/apps/webapp/app/services/realtime/resolveRealtimeStreamClient.server.ts
@@ -11,7 +11,7 @@ import { type RealtimeStreamClient } from "./nativeRealtimeClient.server";
 import { getNativeRealtimeClient } from "./nativeRealtimeClientInstance.server";
 import { getShadowRealtimeClient } from "./shadowRealtimeClientInstance.server";
 
-type RealtimeBackend = "electric" | "native" | "shadow";
+type RealtimeBackend = "electric" | "native" | "shadow-sm";
 
 // Two gates, both defaulting to the Electric path: the env master switch, then the
 // per-org `realtimeBackend` feature flag (cached so long-polls don't hit the DB per request).
@@ -43,7 +43,7 @@ export async function resolveRealtimeStreamClient(
   switch (await getRealtimeBackend(environment.organizationId, orgFeatureFlags)) {
     case "native":
       return getNativeRealtimeClient();
-    case "shadow":
+    case "shadow-sm":
       // The client is still served Electric; the native path is diffed in the background.
       return getShadowRealtimeClient();
     case "electric":
diff --git a/apps/webapp/app/services/realtime/shadowRealtimeClientInstance.server.ts b/apps/webapp/app/services/realtime/shadowRealtimeClientInstance.server.ts
index 7453b107837..c31ca79eb97 100644
--- a/apps/webapp/app/services/realtime/shadowRealtimeClientInstance.server.ts
+++ b/apps/webapp/app/services/realtime/shadowRealtimeClientInstance.server.ts
@@ -12,7 +12,7 @@ import { ShadowRealtimeClient } from "./shadowRealtimeClient.server";
 
 /**
  * Process-singleton wiring for the shadow-compare client. Only constructed
- * when an org's `realtimeBackend` flag is set to "shadow".
+ * when an org's `realtimeBackend` flag is set to "shadow-sm".
  */
 function initializeShadowRealtimeClient(): ShadowRealtimeClient {
   const compares = getMeter("realtime-shadow").createCounter("realtime_shadow.compares", {
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 68b7c635dc8..56c73bcbe6f 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -1,100 +1,236 @@
 @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;
+
+  --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;
+
+  --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;
+
+  --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;
+    }
+  }
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+  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-dimmed: var(--color-charcoal-400);
+  --color-text-bright: var(--color-charcoal-200);
+  --color-background-bright: var(--color-charcoal-800);
+  --color-background-dimmed: var(--color-charcoal-850);
+  --color-grid-bright: var(--color-charcoal-700);
+  --color-grid-dimmed: var(--color-charcoal-750);
+  --color-success: var(--color-mint-500);
+  --color-pending: var(--color-blue-500);
+  --color-warning: var(--color-amber-500);
+  --color-error: var(--color-rose-600);
 
-@property --gradient-angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
+  /* 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);
 }
 
-@supports (-webkit-hyphens: none) {
-  .safari-only {
-    @apply border-b border-grid-dimmed;
-  }
+/*
+  shadcn/ui tokens used by streamdown's internals. Inline so the HSL vars
+  resolve where the utility is used - .streamdown-container redefines them locally.
+*/
+@theme inline {
+  --color-background: hsl(var(--background, 230 16% 9%));
+  --color-foreground: hsl(var(--foreground, 215 19% 87%));
+  --color-muted: hsl(var(--muted, 220 8% 17%));
+  --color-muted-foreground: hsl(var(--muted-foreground, 220 8% 57%));
+  --color-border: hsl(var(--border, 216 7% 27%));
+  --color-sidebar: hsl(var(--sidebar, 228 10% 11%));
+  --color-primary-foreground: hsl(var(--primary-foreground, 230 16% 9%));
 }
 
-@layer base {
-  * {
-    @apply border-grid-bright;
-  }
-  body {
-    @apply bg-background-dimmed text-text-dimmed;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
+@custom-variant lg-height (@media (max-height: 750px));
+@custom-variant md-height (@media (max-height: 600px));
 
-  /* 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%;
+@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;
-  }
+@utility animated-gradient-glow {
+  position: relative;
+  overflow: visible;
 
-  .animated-gradient-glow::before {
+  &::before {
     content: "";
     position: absolute;
     inset: -8px;
@@ -113,13 +249,13 @@
     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;
@@ -140,6 +276,12 @@
   }
 }
 
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
 @keyframes gradient-rotation {
   0% {
     --gradient-angle: 0deg;
@@ -149,6 +291,84 @@
   }
 }
 
+@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;
+  }
+  ::-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%;
+  }
+
+  /* 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: rgb(39 42 46) !important; /* charcoal-700 */
+    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.
@@ -162,11 +382,11 @@
   --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 */;
+  --sidebar: 228 10% 11%; /* charcoal-850 #15171A */
 
   /* Code block styling */
   & [data-code-block-container] {
-    @apply rounded border-charcoal-650 my-0;
+    @apply rounded-sm border-charcoal-650 my-0;
   }
   & [data-code-block] {
     border-top: none;
@@ -175,7 +395,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 +409,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 +430,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,7 +450,8 @@
   & table {
     @apply w-full my-2 border-collapse;
   }
-  & th, & td {
+  & th,
+  & td {
     @apply border border-charcoal-600 px-2 py-1 text-left;
   }
   & th {
diff --git a/apps/webapp/app/utils/cn.ts b/apps/webapp/app/utils/cn.ts
index 842542049d2..c72d8b9f621 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/app/utils/randomWords.ts b/apps/webapp/app/utils/randomWords.ts
index 600065457f4..23343c853c7 100644
--- a/apps/webapp/app/utils/randomWords.ts
+++ b/apps/webapp/app/utils/randomWords.ts
@@ -1177,7 +1177,7 @@ var wordList = [
   "ourselves",
   "out",
   "outer",
-  "outline",
+  "outline-solid",
   "outside",
   "over",
   "own",
@@ -1396,7 +1396,7 @@ var wordList = [
   "ride",
   "riding",
   "right",
-  "ring",
+  "ring-3",
   "rise",
   "rising",
   "river",
@@ -1483,7 +1483,7 @@ var wordList = [
   "seven",
   "several",
   "shade",
-  "shadow",
+  "shadow-sm",
   "shake",
   "shaking",
   "shall",
diff --git a/apps/webapp/app/v3/featureFlags.ts b/apps/webapp/app/v3/featureFlags.ts
index 46434bebf30..6a16a19191b 100644
--- a/apps/webapp/app/v3/featureFlags.ts
+++ b/apps/webapp/app/v3/featureFlags.ts
@@ -35,8 +35,8 @@ export const FeatureFlagCatalog = {
   [FEATURE_FLAG.workerQueueScheduledSplitEnabled]: z.coerce.boolean(),
   // Which backend serves the realtime run feed. Controllable
   // globally and per-org (org wins). Defaults to "electric" when unset.
-  // "shadow" serves Electric but diffs the native path in the background.
-  [FEATURE_FLAG.realtimeBackend]: z.enum(["electric", "native", "shadow"]),
+  // "shadow-sm" serves Electric but diffs the native path in the background.
+  [FEATURE_FLAG.realtimeBackend]: z.enum(["electric", "native", "shadow-sm"]),
   // Strict z.boolean() (not z.coerce.boolean()): coercion turns the string "false"
   // into true, which would silently flip this kill switch / per-org exclude the wrong
   // way if written as a string via the admin PAT route. The admin toggle sends a real
diff --git a/apps/webapp/app/v3/services/computeTemplateCreation.server.ts b/apps/webapp/app/v3/services/computeTemplateCreation.server.ts
index 5f561c33632..10605a1bca3 100644
--- a/apps/webapp/app/v3/services/computeTemplateCreation.server.ts
+++ b/apps/webapp/app/v3/services/computeTemplateCreation.server.ts
@@ -15,7 +15,7 @@ import { globalFlagsRegistry } from "~/v3/globalFlagsRegistry.server";
 import { getEntitlement } from "~/services/platform.v3.server";
 import { startActiveSpan, attributesFromAuthenticatedEnv } from "~/v3/tracer.server";
 
-type TemplateCreationMode = "required" | "shadow" | "skip";
+type TemplateCreationMode = "required" | "shadow-sm" | "skip";
 
 // Why the mode was chosen — slices the compute.template.create span by path.
 type TemplateModeReason =
@@ -95,7 +95,7 @@ export class ComputeTemplateCreationService {
         return;
       }
 
-      if (mode === "shadow") {
+      if (mode === "shadow-sm") {
         // Shadow is fire-and-forget (background build), so the span only records
         // that it was dispatched — the build outcome lands server-side later.
         span.setAttribute("compute.template.result", "shadow_dispatched");
@@ -226,7 +226,7 @@ export class ComputeTemplateCreationService {
         try {
           planType = (await getEntitlement(project.organization.id))?.plan?.type;
         } catch (error) {
-          logger.warn("compute migration: entitlement lookup failed; skipping shadow template", {
+          logger.warn("compute migration: entitlement lookup failed; skipping shadow-sm template", {
             organizationId: project.organization.id,
             error: error instanceof Error ? error.message : String(error),
           });
@@ -236,7 +236,7 @@ export class ComputeTemplateCreationService {
       if (migrated) {
         // required => template built at deploy (deploy fails on error); off => shadow.
         return {
-          mode: decision.flags?.computeMigrationRequireTemplate ? "required" : "shadow",
+          mode: decision.flags?.computeMigrationRequireTemplate ? "required" : "shadow-sm",
           migrated: true,
           reason: "migrated",
         };
@@ -246,12 +246,12 @@ export class ComputeTemplateCreationService {
     const hasComputeAccess = await resolveComputeAccess(prisma, project.organization.featureFlags);
 
     if (hasComputeAccess) {
-      return { mode: "shadow", migrated: false, reason: "compute-access" };
+      return { mode: "shadow-sm", migrated: false, reason: "compute-access" };
     }
 
     const rolloutPct = Number(env.COMPUTE_TEMPLATE_SHADOW_ROLLOUT_PCT ?? "0");
     if (rolloutPct > 0 && Math.random() * 100 < rolloutPct) {
-      return { mode: "shadow", migrated: false, reason: "rollout" };
+      return { mode: "shadow-sm", migrated: false, reason: "rollout" };
     }
 
     return { mode: "skip", migrated: false, reason: "none" };
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index cede9262817..855b675040b 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -117,7 +117,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",
@@ -125,13 +124,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",
@@ -225,10 +224,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",
@@ -247,8 +245,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",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/bcryptjs": "^2.4.2",
     "@types/compression": "^1.7.2",
@@ -274,7 +273,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",
@@ -287,8 +285,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 12a703d900d..786a7160f4d 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 130c1591962..f6bad31aa77 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 b74ff5bdb5e..00000000000
--- 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 9268e8f396e..2922d075716 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:
@@ -545,9 +545,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
@@ -870,20 +867,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
@@ -917,7 +911,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)
@@ -931,11 +925,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)
       '@total-typescript/ts-reset':
         specifier: ^0.4.2
         version: 0.4.2
@@ -1011,9 +1008,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))
@@ -1034,10 +1028,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
@@ -1051,11 +1045,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
@@ -1156,7 +1150,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:
@@ -1247,7 +1241,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:
@@ -1449,7 +1443,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:
@@ -2039,7 +2033,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
@@ -2159,7 +2153,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
@@ -4769,9 +4763,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'}
@@ -4908,18 +4899,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==}
 
@@ -8389,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/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/typography@0.5.9':
-    resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
+  '@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==}
@@ -9133,18 +9206,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'}
@@ -9383,10 +9444,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'}
@@ -9551,11 +9608,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}
@@ -9668,10 +9720,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'}
@@ -9683,9 +9731,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==}
 
@@ -9874,12 +9919,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'}
@@ -9902,10 +9941,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'}
@@ -10146,9 +10181,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'}
@@ -10494,9 +10526,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==}
 
@@ -10545,20 +10574,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'}
@@ -10570,9 +10591,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'}
@@ -10780,9 +10798,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==}
 
@@ -10831,8 +10846,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:
@@ -11541,9 +11556,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}
@@ -11654,10 +11666,6 @@ 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==}
 
@@ -11675,10 +11683,6 @@ packages:
     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'}
@@ -11860,10 +11864,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'}
@@ -11975,10 +11975,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==}
 
@@ -12077,9 +12073,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==}
 
@@ -12327,6 +12320,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==}
 
@@ -12525,78 +12522,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'}
@@ -12653,9 +12652,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==}
 
@@ -12683,9 +12679,6 @@ 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.
@@ -13383,6 +13376,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}
@@ -13442,9 +13440,6 @@ packages:
     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==}
     engines: {node: '>=18'}
@@ -13477,9 +13472,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==}
 
@@ -13514,9 +13506,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==}
 
@@ -13553,9 +13542,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}
@@ -13906,10 +13892,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'}
@@ -14038,9 +14020,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==}
 
@@ -14144,30 +14123,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'}
@@ -14240,15 +14201,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'}
@@ -14257,28 +14209,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'}
@@ -14355,10 +14296,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'}
@@ -14372,6 +14309,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'}
@@ -14492,10 +14434,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:
@@ -14811,9 +14749,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==}
 
@@ -15298,9 +15233,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==}
 
@@ -15652,10 +15584,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'}
@@ -15696,42 +15624,26 @@ 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.5.0:
-    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
 
-  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==}
-    engines: {node: '>=12.13.0'}
+  tailwind-scrollbar-hide@4.0.0:
+    resolution: {integrity: sha512-gobtvVcThB2Dxhy0EeYSS1RKQJ5baDFkamkhwBvzvevwX6L4XQfpZ3me9s25Ss1ecFVT5jPYJ50n+7xTBJG9WQ==}
     peerDependencies:
-      tailwindcss: 3.x
+      tailwindcss: '>=3.0.0 || >= 4.0.0 || >= 4.0.0-beta.8 || >= 4.0.0-alpha.20'
 
-  tailwindcss-animate@1.0.5:
-    resolution: {integrity: sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==}
+  tailwind-scrollbar@4.0.2:
+    resolution: {integrity: sha512-wAQiIxAPqk0MNTPptVe/xoyWi27y+NRGnTwvn4PQnbvB9kp8QUBiGl/wsfoVBHnQxTmhXJSNt9NHTmcz9EivFA==}
+    engines: {node: '>=12.13.0'}
     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.x
 
   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==}
     engines: {node: '>=6'}
@@ -16121,6 +16033,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==}
 
@@ -16323,12 +16238,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
@@ -20344,11 +20253,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': {}
@@ -20508,16 +20412,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
@@ -23109,7 +23010,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)
@@ -23487,7 +23388,7 @@ 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.29.7
@@ -23504,7 +23405,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
@@ -23544,12 +23445,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
@@ -25053,22 +24954,84 @@ snapshots:
 
   '@tabler/icons@3.36.1': {}
 
-  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.1)':
+  '@tailwindcss/forms@0.5.11(tailwindcss@4.3.1)':
     dependencies:
-      tailwindcss: 3.4.1
+      mini-svg-data-uri: 1.4.4
+      tailwindcss: 4.3.1
 
-  '@tailwindcss/forms@0.5.3(tailwindcss@3.4.1)':
+  '@tailwindcss/node@4.3.1':
     dependencies:
-      mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.4.1
+      '@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/typography@0.5.9(tailwindcss@3.4.1)':
+  '@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:
@@ -25729,7 +25692,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)
@@ -25742,8 +25705,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
@@ -25780,7 +25743,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:
@@ -25791,21 +25754,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:
@@ -25983,16 +25946,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: {}
@@ -26238,24 +26191,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:
@@ -26455,13 +26398,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
@@ -26609,8 +26545,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase-css@2.0.1: {}
-
   camelcase-keys@6.2.2:
     dependencies:
       camelcase: 5.3.1
@@ -26621,8 +26555,6 @@ snapshots:
 
   caniuse-lite@1.0.30001577: {}
 
-  caniuse-lite@1.0.30001754: {}
-
   caniuse-lite@1.0.30001793: {}
 
   case-anything@2.1.13: {}
@@ -26804,16 +26736,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
@@ -26828,8 +26750,6 @@ snapshots:
 
   commander@4.1.1: {}
 
-  commander@5.1.0: {}
-
   commander@7.2.0: {}
 
   commander@8.3.0: {}
@@ -27095,8 +27015,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: {}
@@ -27434,8 +27352,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:
@@ -27460,17 +27376,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
@@ -27480,8 +27389,6 @@ snapshots:
       asap: 2.0.6
       wrappy: 1.0.2
 
-  didyoumean@1.2.2: {}
-
   diff@5.1.0: {}
 
   dir-glob@3.0.1:
@@ -27490,8 +27397,6 @@ snapshots:
 
   discontinuous-range@1.0.0: {}
 
-  dlv@1.1.3: {}
-
   docker-compose@1.4.2:
     dependencies:
       yaml: 2.9.0
@@ -27664,8 +27569,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: {}
@@ -27740,7 +27643,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
@@ -28787,8 +28690,6 @@ snapshots:
     dependencies:
       minipass: 7.1.3
 
-  fs.realpath@1.0.0: {}
-
   fsevents@2.3.2:
     optional: true
 
@@ -28914,10 +28815,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:
@@ -28944,15 +28841,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: {}
@@ -29226,8 +29114,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
@@ -29343,11 +29229,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: {}
@@ -29448,8 +29329,6 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
-  is-arrayish@0.3.2: {}
-
   is-bigint@1.0.4:
     dependencies:
       has-bigints: 1.0.2
@@ -29647,6 +29526,8 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  jiti@2.7.0: {}
+
   joi@17.7.0:
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -29839,53 +29720,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-arm64@1.32.0:
     optional: true
 
-  lightningcss-darwin-x64@1.29.2:
+  lightningcss-darwin-x64@1.32.0:
     optional: true
 
-  lightningcss-freebsd-x64@1.29.2:
+  lightningcss-freebsd-x64@1.32.0:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.29.2:
+  lightningcss-linux-arm-gnueabihf@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.29.2:
+  lightningcss-linux-arm64-gnu@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.29.2:
+  lightningcss-linux-arm64-musl@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.29.2:
+  lightningcss-linux-x64-gnu@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-musl@1.29.2:
+  lightningcss-linux-x64-musl@1.32.0:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.29.2:
+  lightningcss-win32-arm64-msvc@1.32.0:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.29.2:
+  lightningcss-win32-x64-msvc@1.32.0:
     optional: true
 
-  lightningcss@1.29.2:
+  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: {}
 
@@ -29942,8 +29824,6 @@ snapshots:
 
   lodash.camelcase@4.3.0: {}
 
-  lodash.castarray@4.4.0: {}
-
   lodash.debounce@4.0.8: {}
 
   lodash.defaults@4.2.0: {}
@@ -29962,8 +29842,6 @@ snapshots:
 
   lodash.isstring@4.0.1: {}
 
-  lodash.merge@4.6.2: {}
-
   lodash.omit@4.5.0: {}
 
   lodash.once@4.1.1: {}
@@ -31045,6 +30923,8 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  nanoid@3.3.12: {}
+
   nanoid@3.3.8: {}
 
   nanoid@5.0.6: {}
@@ -31086,10 +30966,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
@@ -31116,8 +30992,6 @@ snapshots:
 
   node-releases@2.0.12: {}
 
-  node-releases@2.0.27: {}
-
   node-releases@2.0.36: {}
 
   nodemailer@8.0.6: {}
@@ -31148,8 +31022,6 @@ snapshots:
 
   normalize-url@4.5.1: {}
 
-  normalize.css@8.0.1: {}
-
   notepack.io@3.0.1: {}
 
   npm-install-checks@6.2.0:
@@ -31197,8 +31069,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
@@ -31237,7 +31107,8 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@2.2.0: {}
+  object-hash@2.2.0:
+    optional: true
 
   object-hash@3.0.0: {}
 
@@ -31591,8 +31462,6 @@ snapshots:
 
   path-expression-matcher@1.5.0: {}
 
-  path-is-absolute@1.0.1: {}
-
   path-key@2.0.1: {}
 
   path-key@3.1.1: {}
@@ -31712,8 +31581,6 @@ snapshots:
     dependencies:
       split2: 4.2.0
 
-  picocolors@0.2.1: {}
-
   picocolors@1.0.0: {}
 
   picocolors@1.1.1: {}
@@ -31804,37 +31671,13 @@ snapshots:
     dependencies:
       postcss: 8.5.10
 
-  postcss-functions@3.0.0:
-    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):
+  postcss-import@16.0.1(postcss@8.5.15):
     dependencies:
-      postcss: 8.5.10
-      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: 8.5.15
       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
@@ -31842,29 +31685,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)
@@ -31904,16 +31747,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
@@ -31924,33 +31757,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: {}
@@ -32014,8 +31834,6 @@ snapshots:
 
   prettier@3.8.3: {}
 
-  pretty-hrtime@1.0.3: {}
-
   pretty-ms@7.0.1:
     dependencies:
       parse-ms: 2.1.0
@@ -32030,6 +31848,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)
@@ -32152,13 +31976,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
@@ -32628,11 +32445,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: {}
@@ -33278,10 +33090,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  simple-swizzle@0.2.2:
-    dependencies:
-      is-arrayish: 0.3.2
-
   simplur@3.0.1: {}
 
   sisteransi@1.0.5: {}
@@ -33523,7 +33331,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
@@ -33666,7 +33474,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
@@ -33707,10 +33515,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
@@ -33752,78 +33556,23 @@ snapshots:
 
   tagged-tag@1.0.0: {}
 
-  tailwind-merge@1.12.0: {}
-
-  tailwind-merge@3.5.0: {}
-
-  tailwind-scrollbar-hide@1.1.7: {}
+  tailwind-merge@3.6.0: {}
 
-  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: {}
 
   tar-fs@2.1.3:
@@ -34144,7 +33893,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
@@ -34154,7 +33903,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
@@ -34164,7 +33913,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
@@ -34172,7 +33921,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
@@ -34182,7 +33931,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
@@ -34192,7 +33941,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
@@ -34278,6 +34027,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: {}
@@ -34498,12 +34249,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
@@ -34662,7 +34407,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)
@@ -34671,7 +34416,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
@@ -34682,13 +34427,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
@@ -34712,7 +34457,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
@@ -34720,10 +34465,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)
@@ -34734,13 +34479,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)
@@ -34751,13 +34496,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)
@@ -34768,16 +34513,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
@@ -34794,7 +34539,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
@@ -34803,10 +34548,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
@@ -34823,7 +34568,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
@@ -34896,7 +34641,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

From 3fe9d3b373d551f838f8afa259fe8612b4695570 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 11:50:30 +0000
Subject: [PATCH 02/10] fix(webapp): don't pass key through code block prop
 getters

prism-react-renderer passes extra props through, so key ended up in the
spread and triggered a React warning. Key is already set directly on the
elements.
---
 apps/webapp/app/components/code/CodeBlock.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index 4cab68edce6..95c47857d4b 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -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"
               >
@@ -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;
 
@@ -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);

From 5e8303981b10ea2a13325c758177fe02d9f56f02 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 11:55:55 +0000
Subject: [PATCH 03/10] chore: fix lockfile resolution after tailwind v4 deps

---
 pnpm-lock.yaml | 47 -----------------------------------------------
 1 file changed, 47 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2922d075716..35828f36c6d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3496,23 +3496,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==}
@@ -4850,7 +4845,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
 
@@ -5846,7 +5840,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':
@@ -6755,112 +6748,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
 
@@ -6885,21 +6862,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'
@@ -6938,7 +6912,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
 
@@ -7665,7 +7638,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==}
@@ -8511,7 +8483,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==}
@@ -8677,7 +8648,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==}
@@ -8891,7 +8861,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==}
@@ -10129,7 +10098,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:
@@ -10214,7 +10182,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==}
@@ -11483,7 +11450,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==}
@@ -11671,7 +11637,6 @@ packages:
 
   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:
@@ -11751,7 +11716,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==}
@@ -11774,7 +11738,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==}
@@ -12681,7 +12644,6 @@ packages:
 
   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==}
@@ -13438,7 +13400,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@2.1.3:
     resolution: {integrity: sha512-E2WEOVsgs7O16zsURJ/eH8BqhF029wGpEOnv7Urwdo2wmQanOACwJQh0devF9D9RhoZru0+9JXIS0dBXIAz+lA==}
@@ -14261,7 +14222,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==}
@@ -14902,7 +14862,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==}
@@ -15317,7 +15276,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==}
@@ -15561,7 +15519,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==}
@@ -15574,7 +15531,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==}
@@ -15667,12 +15623,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==}
@@ -16317,7 +16271,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:

From d70dfcbe51c42ffe94630f2c3b0dfda3e1ba4ab1 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 12:27:23 +0000
Subject: [PATCH 04/10] chore(webapp): replace raw charcoal classes with
 semantic theme tokens

Adds surface (background-deep/hover/raised, surface-control/-hover/-active),
border (border-bright/brighter/brightest) and text (text-faint) tokens to the
themable layer, and sweeps ~930 raw charcoal-* usages across the dashboard to
use them. Remaining raw charcoal usages are contrast-fixed decoration on
colored accents, intentionally theme-independent.
---
 .server-changes/theme-color-tokens.md         |  6 +++
 apps/webapp/app/components/AskAI.tsx          | 10 ++---
 .../app/components/BlankStatePanels.tsx       |  2 +-
 .../app/components/DefinitionTooltip.tsx      |  2 +-
 apps/webapp/app/components/ListPagination.tsx |  2 +-
 .../webapp/app/components/LoginPageLayout.tsx |  2 +-
 .../app/components/ProductHuntBanner.tsx      |  2 +-
 .../app/components/UserProfilePhoto.tsx       |  2 +-
 .../components/admin/FeatureFlagsDialog.tsx   | 12 +++---
 .../admin/backOffice/MaxProjectsSection.tsx   |  2 +-
 .../admin/backOffice/RateLimitSection.tsx     |  2 +-
 .../app/components/billing/FreePlanUsage.tsx  |  2 +-
 .../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 | 18 ++++-----
 .../webapp/app/components/code/InlineCode.tsx |  2 +-
 .../webapp/app/components/code/TSQLEditor.tsx |  4 +-
 .../app/components/code/TSQLResultsTable.tsx  | 18 ++++-----
 .../components/dashboard-agent/AgentChart.tsx |  4 +-
 .../DashboardAgentComposer.tsx                |  4 +-
 .../DashboardAgentContextBanner.tsx           |  2 +-
 .../dashboard-agent/DashboardAgentHeader.tsx  |  4 +-
 .../dashboard-agent/DashboardAgentHistory.tsx |  8 ++--
 .../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 |  4 +-
 .../metrics/SaveToDashboardDialog.tsx         |  4 +-
 .../app/components/metrics/ScopeFilter.tsx    |  2 +-
 .../components/navigation/AccountSideMenu.tsx |  2 +-
 .../navigation/DashboardDialogs.tsx           |  2 +-
 .../components/navigation/DashboardList.tsx   |  2 +-
 .../navigation/EnvironmentSelector.tsx        | 10 ++---
 .../navigation/HelpAndFeedbackPopover.tsx     |  4 +-
 .../navigation/NotificationCard.tsx           |  6 +--
 .../OrganizationSettingsSideMenu.tsx          |  2 +-
 .../app/components/navigation/SideMenu.tsx    | 30 +++++++-------
 .../components/navigation/SideMenuHeader.tsx  |  4 +-
 .../components/navigation/SideMenuItem.tsx    |  6 ++-
 .../components/navigation/SideMenuSection.tsx |  4 +-
 .../onboarding/TechnologyPicker.tsx           | 10 ++---
 .../components/primitives/AppliedFilter.tsx   |  4 +-
 .../app/components/primitives/Badge.tsx       |  6 +--
 .../app/components/primitives/Buttons.tsx     | 14 +++----
 .../app/components/primitives/Calendar.tsx    | 20 +++++-----
 .../app/components/primitives/Callout.tsx     |  4 +-
 .../app/components/primitives/Checkbox.tsx    | 16 ++++----
 .../primitives/CheckboxIndicator.tsx          |  2 +-
 .../app/components/primitives/ClientTabs.tsx  | 12 +++---
 .../components/primitives/ClipboardField.tsx  | 20 +++++-----
 .../app/components/primitives/CopyButton.tsx  |  4 +-
 .../components/primitives/CopyableText.tsx    |  4 +-
 .../app/components/primitives/DateField.tsx   | 12 +++---
 .../components/primitives/DateTimePicker.tsx  |  8 ++--
 .../app/components/primitives/DetailCell.tsx  |  4 +-
 .../app/components/primitives/Dialog.tsx      |  2 +-
 .../webapp/app/components/primitives/Icon.tsx |  2 +-
 .../app/components/primitives/Input.tsx       | 18 ++++-----
 .../primitives/InputNumberStepper.tsx         |  2 +-
 .../app/components/primitives/InputOTP.tsx    |  4 +-
 .../app/components/primitives/PageHeader.tsx  |  2 +-
 .../app/components/primitives/Pagination.tsx  |  5 ++-
 .../app/components/primitives/Popover.tsx     | 20 +++++-----
 .../app/components/primitives/RadioButton.tsx | 12 +++---
 .../app/components/primitives/Resizable.tsx   |  4 +-
 .../app/components/primitives/SearchInput.tsx |  2 +-
 .../primitives/SegmentedControl.tsx           |  8 ++--
 .../app/components/primitives/Select.tsx      | 20 +++++-----
 .../app/components/primitives/Sheet.tsx       |  4 +-
 .../app/components/primitives/SheetV3.tsx     |  2 +-
 .../app/components/primitives/ShortcutKey.tsx |  6 +--
 .../components/primitives/SimpleSelect.tsx    | 10 ++---
 .../app/components/primitives/Slider.tsx      |  2 +-
 .../app/components/primitives/StepNumber.tsx  |  2 +-
 .../app/components/primitives/Switch.tsx      | 10 ++---
 .../app/components/primitives/Table.tsx       | 40 +++++++++----------
 .../webapp/app/components/primitives/Tabs.tsx | 13 +++---
 .../app/components/primitives/TextArea.tsx    |  2 +-
 .../primitives/TreeView/TreeView.tsx          |  2 +-
 .../components/primitives/UsageSparkline.tsx  |  2 +-
 .../primitives/charts/ChartBlankState.tsx     |  2 +-
 .../primitives/charts/ChartLegendCompound.tsx |  8 ++--
 .../primitives/charts/ChartLoading.tsx        | 10 ++---
 .../primitives/charts/ChartZoom.tsx           |  4 +-
 .../app/components/query/QueryEditor.tsx      | 19 +++++----
 .../app/components/runs/v3/AIFilterInput.tsx  |  2 +-
 .../app/components/runs/v3/BatchFilters.tsx   |  8 ++--
 .../components/runs/v3/DeploymentStatus.tsx   |  4 +-
 .../components/runs/v3/PromptSpanDetails.tsx  |  8 ++--
 .../components/runs/v3/ReplayRunDialog.tsx    |  4 +-
 .../app/components/runs/v3/RunFilters.tsx     | 10 ++---
 apps/webapp/app/components/runs/v3/RunTag.tsx | 14 +++----
 .../components/runs/v3/ScheduleFilters.tsx    |  4 +-
 .../app/components/runs/v3/SharedFilters.tsx  |  6 +--
 .../runs/v3/SpanHorizontalTimeline.tsx        | 10 ++---
 .../app/components/runs/v3/SpanTitle.tsx      | 12 +++---
 .../runs/v3/TaskRunAttemptStatus.tsx          | 10 ++---
 .../app/components/runs/v3/TaskRunStatus.tsx  |  6 +--
 .../app/components/runs/v3/TaskRunsTable.tsx  | 10 ++---
 .../runs/v3/WaitpointTokenFilters.tsx         | 16 ++++----
 .../runs/v3/agent/AgentMessageView.tsx        | 16 ++++----
 .../components/runs/v3/ai/AIChatMessages.tsx  | 12 +++---
 .../runs/v3/ai/AIEmbedSpanDetails.tsx         |  4 +-
 .../components/runs/v3/ai/AIModelSummary.tsx  |  2 +-
 .../components/runs/v3/ai/AISpanDetails.tsx   |  8 ++--
 .../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  |  4 +-
 .../route.tsx                                 |  4 +-
 .../route.tsx                                 |  8 ++--
 .../route.tsx                                 | 22 +++++-----
 .../route.tsx                                 |  8 ++--
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  8 ++--
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 | 14 +++----
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 | 10 ++---
 .../route.tsx                                 |  4 +-
 .../route.tsx                                 |  8 ++--
 .../route.tsx                                 |  4 +-
 .../route.tsx                                 | 14 +++----
 .../route.tsx                                 | 26 ++++++------
 .../route.tsx                                 | 30 +++++++-------
 .../route.tsx                                 |  2 +-
 .../AITabContent.tsx                          |  2 +-
 .../QueryHelpSidebar.tsx                      | 10 ++---
 .../QueryHistoryPopover.tsx                   |  8 ++--
 .../TRQLGuideContent.tsx                      |  4 +-
 .../TableSchemaContent.tsx                    |  4 +-
 .../route.tsx                                 |  6 +--
 .../route.tsx                                 | 18 ++++-----
 .../route.tsx                                 | 24 +++++------
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  8 ++--
 .../route.tsx                                 |  6 +--
 .../AIPayloadTabContent.tsx                   | 12 +++---
 .../TestSidebarTabs.tsx                       |  8 ++--
 .../route.tsx                                 | 14 +++----
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 | 18 +++++----
 ...zationSlug.settings.integrations.slack.tsx |  2 +-
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 | 24 +++++------
 .../route.tsx                                 |  4 +-
 .../route.tsx                                 |  4 +-
 .../route.tsx                                 |  4 +-
 .../route.tsx                                 |  6 +--
 .../route.tsx                                 |  2 +-
 .../webapp/app/routes/_app.orgs.new/route.tsx |  2 +-
 .../app/routes/_app.timezones/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      |  6 +--
 apps/webapp/app/routes/invites.tsx            |  4 +-
 apps/webapp/app/routes/login._index/route.tsx |  6 +--
 .../route.tsx                                 | 12 +++---
 .../route.tsx                                 |  8 ++--
 ...ectParam.env.$envParam.runs.bulkaction.tsx |  2 +-
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  4 +-
 ...ctParam.schedules.new.natural-language.tsx |  2 +-
 ...ces.orgs.$organizationSlug.select-plan.tsx | 10 ++---
 .../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 +-
 .../storybook.tabs.$tabNumber/route.tsx       |  2 +-
 .../app/routes/storybook.tabs/route.tsx       | 18 ++++-----
 .../app/routes/storybook.timeline/route.tsx   |  8 ++--
 .../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 +-
 apps/webapp/app/routes/vercel.onboarding.tsx  |  6 +--
 apps/webapp/app/tailwind.css                  | 18 ++++++++-
 199 files changed, 735 insertions(+), 693 deletions(-)
 create mode 100644 .server-changes/theme-color-tokens.md

diff --git a/.server-changes/theme-color-tokens.md b/.server-changes/theme-color-tokens.md
new file mode 100644
index 00000000000..1766a74d2f4
--- /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 0276695f79d..d62ffa5b33d 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -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: {
@@ -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>
@@ -534,8 +534,8 @@ function GradientSpinnerBackground({
       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/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx
index 7b5bdc63109..56a7c0da45d 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 813f73cb524..13505e2d57f 100644
--- a/apps/webapp/app/components/DefinitionTooltip.tsx
+++ b/apps/webapp/app/components/DefinitionTooltip.tsx
@@ -17,7 +17,7 @@ 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>
diff --git a/apps/webapp/app/components/ListPagination.tsx b/apps/webapp/app/components/ListPagination.tsx
index 5d2459e39b8..32d73d68322 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"
         )}
       />
diff --git a/apps/webapp/app/components/LoginPageLayout.tsx b/apps/webapp/app/components/LoginPageLayout.tsx
index 323faf4ea26..089b324a9c5 100644
--- a/apps/webapp/app/components/LoginPageLayout.tsx
+++ b/apps/webapp/app/components/LoginPageLayout.tsx
@@ -77,7 +77,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 3508104e2d9..abb5a146355 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 99febd1c240..4676594dbcc 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/admin/FeatureFlagsDialog.tsx b/apps/webapp/app/components/admin/FeatureFlagsDialog.tsx
index b1050e60f78..88710370082 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 8aa4b5c93c9..6b0185e33a1 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 efbd162dfb0..09d51e69fa3 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 9f51754a11c..5c6cad62f93 100644
--- a/apps/webapp/app/components/billing/FreePlanUsage.tsx
+++ b/apps/webapp/app/components/billing/FreePlanUsage.tsx
@@ -17,7 +17,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 e570a029e27..49346492287 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 39dfaf338ac..f9ceb3384ab 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-hidden focus:ring-0 focus-visible:outline-hidden 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 73a2c94ac92..1c915c2a449 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="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 95c47857d4b..26ed5e23da5 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -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={{
@@ -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
@@ -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={{
diff --git a/apps/webapp/app/components/code/InlineCode.tsx b/apps/webapp/app/components/code/InlineCode.tsx
index 120e8642503..1150e8d5b8e 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/TSQLEditor.tsx b/apps/webapp/app/components/code/TSQLEditor.tsx
index f59c2a74673..3b4bf202954 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 b1188712cd8..87d2003d385 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -833,7 +833,7 @@ 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-hidden",
         alignment === "right" && "justify-end"
@@ -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 ? (
@@ -1004,7 +1004,7 @@ 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-hidden focus:ring-1 focus:ring-indigo-500/50"
         )}
@@ -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/dashboard-agent/AgentChart.tsx b/apps/webapp/app/components/dashboard-agent/AgentChart.tsx
index c9810071f70..6e082231eb6 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 8d800aa2870..308a87ebab1 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-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 field-sizing-content focus:outline-hidden 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 bbe16a5d7ea..d7a48af850f 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 8b96dd06c01..11d486bc1d3 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 e6eee3d4f66..bc40327447b 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,8 +46,8 @@ 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
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx
index f5475d863c4..1d02bf46621 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 912081a395d..f78bc5a663a 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 2fef1f3deb7..77aea48065a 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 90d5a60eb9e..41b87ae3b89 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 52e1f499cbe..34ef4a6ebbf 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 587dffb299d..d6affafd3b7 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 8449d342f53..1abd54b0121 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 ec608d71037..85c7816b73e 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 41b95450d83..e0bb94179bd 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 01db46483d2..c0f52b76a46 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 c61da4d3084..fdd96ad0340 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 118098cfd34..9034ce906ea 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}
                 >
diff --git a/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx b/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
index 5cdc9e3e48d..19f50436dc1 100644
--- a/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
+++ b/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
@@ -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 0cdaa4adb32..846591d44e3 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/navigation/AccountSideMenu.tsx b/apps/webapp/app/components/navigation/AccountSideMenu.tsx
index 10c7a886842..ba7938adde6 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 e676bab07f0..42fadbf1622 100644
--- a/apps/webapp/app/components/navigation/DashboardDialogs.tsx
+++ b/apps/webapp/app/components/navigation/DashboardDialogs.tsx
@@ -90,7 +90,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>
diff --git a/apps/webapp/app/components/navigation/DashboardList.tsx b/apps/webapp/app/components/navigation/DashboardList.tsx
index 57ac8aeff16..7f3b6e3bacb 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 ebdb849990d..dfc83109cb8 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -64,7 +64,7 @@ export function EnvironmentSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center rounded pl-1.75 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
             )}
@@ -103,7 +103,7 @@ export function EnvironmentSelector({
         disableHoverableContent
       />
       <PopoverContent
-        className="min-w-56 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"
@@ -248,7 +248,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
@@ -258,7 +258,7 @@ function Branches({
           </ButtonContent>
         </PopoverTrigger>
         <PopoverContent
-          className="min-w-64 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"
@@ -330,7 +330,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 ae45075e396..2159fa5fe27 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-1.75 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"
               )}
             >
@@ -94,7 +94,7 @@ export function HelpAndFeedback({
           disableHoverableContent
         />
         <PopoverContent
-          className="min-w-56 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 8b03c27fff9..e9ad1e07e65 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/OrganizationSettingsSideMenu.tsx b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
index ada3aac5e5a..dc59cc720b6 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 b0882da8a25..bf193fa3843 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -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}
         >
@@ -844,7 +844,7 @@ function ProjectSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center rounded pl-1.75 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"
             )}
           >
@@ -881,17 +881,17 @@ function ProjectSelector({
         disableHoverableContent
       />
       <PopoverContent
-        className="min-w-64 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-64 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"
@@ -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 8d975cba436..80143e9e0d9 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 ff442dd2e42..c47f949ab40 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -60,7 +60,7 @@ export function SideMenuItem({
         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
@@ -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}
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index 1564716512d..70b5e099538 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 21bb39fd48a..7236f9fa8b9 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,7 +293,7 @@ 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-hidden 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))]"
@@ -308,7 +308,7 @@ export function TechnologyPicker({
               />
             </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"
diff --git a/apps/webapp/app/components/primitives/AppliedFilter.tsx b/apps/webapp/app/components/primitives/AppliedFilter.tsx
index f7b3659d12c..c8fbc4d3ac3 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": {
diff --git a/apps/webapp/app/components/primitives/Badge.tsx b/apps/webapp/app/components/primitives/Badge.tsx
index a92957e268d..f21a544a4cd 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 d7da379a568..323f3743826 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-sm 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-2 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,
diff --git a/apps/webapp/app/components/primitives/Calendar.tsx b/apps/webapp/app/components/primitives/Calendar.tsx
index 047426d5a98..22ddc7d4149 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-hidden"
+          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-hidden"
+          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-hidden",
+          "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-hidden 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 c45bf9bdef3..69ad6a0fefe 100644
--- a/apps/webapp/app/components/primitives/Callout.tsx
+++ b/apps/webapp/app/components/primitives/Callout.tsx
@@ -18,10 +18,10 @@ 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",
diff --git a/apps/webapp/app/components/primitives/Checkbox.tsx b/apps/webapp/app/components/primitives/Checkbox.tsx
index 37bcb9f4c94..75850b304d9 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 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-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 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-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 0fe0f83b9aa..1d4c59e2549 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 b6f7ab230af..533a09c84e6 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}
diff --git a/apps/webapp/app/components/primitives/ClipboardField.tsx b/apps/webapp/app/components/primitives/ClipboardField.tsx
index d9c46e1e96d..0304e5bca6b 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-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden 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-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden 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-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden 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-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden 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-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden 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-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden 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 2a93cb2c79f..91d47c29668 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 9be81d4d64e..f8e19402aed 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 9b6a08786ad..56cf5086493 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-hidden 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,
@@ -276,10 +276,10 @@ function DateSegmentGuide({ segment }: { segment: DateSegment }) {
         minWidth: minWidthForSegment(segment),
       }}
       className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums text-rose-500 outline-hidden ${
-        !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
+        !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 2457ff63858..ec2e3375dbf 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-hidden",
+          "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 59b9bb8fae5..90b1410a452 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 3001830a009..3a7666eb80b 100644
--- a/apps/webapp/app/components/primitives/Dialog.tsx
+++ b/apps/webapp/app/components/primitives/Dialog.tsx
@@ -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-2.25 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 ecb3cf7bfb6..4b8197f93ce 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 7a5ed414f2c..4f20c0c11d6 100644
--- a/apps/webapp/app/components/primitives/Input.tsx
+++ b/apps/webapp/app/components/primitives/Input.tsx
@@ -4,7 +4,7 @@ import { cn } from "~/utils/cn";
 import { Icon, type RenderIcon } from "./Icon";
 
 const containerBase =
-  "has-focus-visible:outline-hidden has-focus-visible:ring-1 has-focus-visible:ring-charcoal-650 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";
+  "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-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]";
@@ -12,52 +12,52 @@ const inputBase =
 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 5323e1fc1d3..6869b4424ff 100644
--- a/apps/webapp/app/components/primitives/InputNumberStepper.tsx
+++ b/apps/webapp/app/components/primitives/InputNumberStepper.tsx
@@ -128,7 +128,7 @@ 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-solid has-focus-visible:outline-1 has-focus-visible:outline-offset-0 has-focus-visible:outline-text-link",
         disabled && "cursor-not-allowed opacity-50",
diff --git a/apps/webapp/app/components/primitives/InputOTP.tsx b/apps/webapp/app/components/primitives/InputOTP.tsx
index 59aad6b2a29..50b14f43c1a 100644
--- a/apps/webapp/app/components/primitives/InputOTP.tsx
+++ b/apps/webapp/app/components/primitives/InputOTP.tsx
@@ -15,12 +15,12 @@ const variants = {
   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-hidden 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-hidden 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/PageHeader.tsx b/apps/webapp/app/components/primitives/PageHeader.tsx
index 08cc068cfa5..a7c68f059f5 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 aa207bb9285..80fce8bdd06 100644
--- a/apps/webapp/app/components/primitives/Pagination.tsx
+++ b/apps/webapp/app/components/primitives/Pagination.tsx
@@ -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"
             )}
           />
@@ -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 e49361155da..21ff5cd9045 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-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",
+        "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>
   );
@@ -103,8 +103,8 @@ const PopoverMenuItem = React.forwardRef<
       className: cn(
         danger
           ? "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-charcoal-700",
-        isSelected ? "bg-charcoal-750 group-hover:bg-charcoal-600/50" : undefined,
+          : "group-hover:bg-background-raised",
+        isSelected ? "bg-background-hover group-hover:bg-surface-control/50" : undefined,
         className
       ),
     } as const;
@@ -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 ab750400e81..c52389f788f 100644
--- a/apps/webapp/app/components/primitives/RadioButton.tsx
+++ b/apps/webapp/app/components/primitives/RadioButton.tsx
@@ -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,7 +38,7 @@ 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",
     inputPosition: "mt-0",
@@ -46,7 +46,7 @@ const variants = {
   },
   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",
     inputPosition: "mt-0",
@@ -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 0d4b3f8dcea..59550332c26 100644
--- a/apps/webapp/app/components/primitives/Resizable.tsx
+++ b/apps/webapp/app/components/primitives/Resizable.tsx
@@ -55,13 +55,13 @@ const ResizableHandle = ({
         {/* Horizontal orientation dots (vertical arrangement) */}
         <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.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 9d93ff36ee6..0c46a3d0286 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 167bddc36d5..2f749215c29 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-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 1b00ca16cf9..6a551773941 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-5.5 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-5.5 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,7 +651,7 @@ 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-hidden 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))]",
diff --git a/apps/webapp/app/components/primitives/Sheet.tsx b/apps/webapp/app/components/primitives/Sheet.tsx
index e8f1fc0573a..b7376245f4c 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 1b708af6a4b..922f28d5baf 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 572932f7f21..c3be54c0b17 100644
--- a/apps/webapp/app/components/primitives/ShortcutKey.tsx
+++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx
@@ -19,9 +19,9 @@ export const variants = {
     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 72accc6b551..60ef1f65dd2 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
       )}
@@ -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-hidden 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 739c67d1263..b5af54e2ba4 100644
--- a/apps/webapp/app/components/primitives/Slider.tsx
+++ b/apps/webapp/app/components/primitives/Slider.tsx
@@ -6,7 +6,7 @@ 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",
diff --git a/apps/webapp/app/components/primitives/StepNumber.tsx b/apps/webapp/app/components/primitives/StepNumber.tsx
index a87074fd2ea..9172019fbc0 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 3171003020c..96943e9bebb 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-6 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,7 +25,7 @@ const variations = {
     container: small.container,
     root: cn(
       small.root,
-      "group-data-[state=unchecked]:bg-charcoal-600 group-hover:group-data-[state=unchecked]: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(
@@ -36,11 +36,11 @@ const variations = {
   "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-hover:group-data-[state=unchecked]: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-hover:group-disabled:text-text-dimmed"),
@@ -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-hover:group-data-[state=unchecked]: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 09e55a868bb..2b740fac0b8 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,
@@ -306,7 +306,7 @@ 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
@@ -317,7 +317,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           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-px 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}
@@ -377,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 ? (
@@ -501,7 +501,7 @@ export const TableCellMenu = forwardRef<
                   className="duration-0 group-hover/table-row:text-text-bright"
                 />
                 <PopoverContent
-                  className="min-w-40 max-w-80 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 9299baa8463..1128a9c267f 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 06dc84622da..8cdb96de361 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/TreeView/TreeView.tsx b/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
index 5579aeddd43..e19a006df61 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-hidden",
+        "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 6576cb5a3f2..72b5a132596 100644
--- a/apps/webapp/app/components/primitives/UsageSparkline.tsx
+++ b/apps/webapp/app/components/primitives/UsageSparkline.tsx
@@ -110,7 +110,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/ChartBlankState.tsx b/apps/webapp/app/components/primitives/charts/ChartBlankState.tsx
index 9a093254e00..66ba14a92cc 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/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index 199f2751c2b..b5c562e0f70 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) => {
@@ -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/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
index 9733801da32..595aeb9cf6d 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>
@@ -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/ChartZoom.tsx b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
index 42e134e3bd5..a04a90ef119 100644
--- a/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
@@ -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/query/QueryEditor.tsx b/apps/webapp/app/components/query/QueryEditor.tsx
index 396eaa07e50..37747a77dae 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}
@@ -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>
diff --git a/apps/webapp/app/components/runs/v3/AIFilterInput.tsx b/apps/webapp/app/components/runs/v3/AIFilterInput.tsx
index f46467ebcc5..03b70499ed4 100644
--- a/apps/webapp/app/components/runs/v3/AIFilterInput.tsx
+++ b/apps/webapp/app/components/runs/v3/AIFilterInput.tsx
@@ -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>
diff --git a/apps/webapp/app/components/runs/v3/BatchFilters.tsx b/apps/webapp/app/components/runs/v3/BatchFilters.tsx
index cb7e7c13ad0..d07f577423e 100644
--- a/apps/webapp/app/components/runs/v3/BatchFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/BatchFilters.tsx
@@ -197,7 +197,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>
@@ -205,7 +205,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
@@ -285,13 +285,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 a2a6d199ab7..f4142cffce2 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 eba77bec5a0..bfafaaf910d 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 88ca9d2cd4e..e1d546e3ede 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="rounded-smbg-background-deep mb-3 h-full min-h-40 overflow-y-auto 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.{" "}
diff --git a/apps/webapp/app/components/runs/v3/RunFilters.tsx b/apps/webapp/app/components/runs/v3/RunFilters.tsx
index 6917f07b104..bac654694ae 100644
--- a/apps/webapp/app/components/runs/v3/RunFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/RunFilters.tsx
@@ -672,7 +672,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>
@@ -680,7 +680,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
@@ -851,13 +851,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
@@ -1703,7 +1703,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/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx
index 025e228b62e..3d6c6751ce3 100644
--- a/apps/webapp/app/components/runs/v3/RunTag.tsx
+++ b/apps/webapp/app/components/runs/v3/RunTag.tsx
@@ -27,7 +27,7 @@ export function RunTag({
       return (
         <>
           <img src={tagLeftPath} alt="" className="block h-full w-2.25" />
-          <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-hover:group-has-[[href]]:border-charcoal-650 group-hover:group-has-[[href]]:text-charcoal-300">
+          <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>
         </>
@@ -36,10 +36,10 @@ export function RunTag({
       return (
         <>
           <img src={tagLeftPath} alt="" className="block h-full w-2.25" />
-          <span className="flex items-center border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed group-hover:group-has-[[href]]:border-charcoal-650 group-hover:group-has-[[href]]:text-charcoal-300">
+          <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-hover:group-has-[[href]]:border-charcoal-650 group-hover:group-has-[[href]]:bg-charcoal-700 group-hover:group-has-[[href]]: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 e0fb819c8d1..de1c6b3ad7a 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 39e9f5b0382..7069b2a4cc5 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" &&
diff --git a/apps/webapp/app/components/runs/v3/SpanHorizontalTimeline.tsx b/apps/webapp/app/components/runs/v3/SpanHorizontalTimeline.tsx
index b4acf2a1e7b..85cee02a1bd 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 2e0167cc832..e01b1599cae 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 e88eec52811..36333f6d968 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 73363e0daa6..bccb30a3270 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":
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index e2c3015bd17..00197117853 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -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/WaitpointTokenFilters.tsx b/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx
index 5a8c7a82176..4fdc8d9f180 100644
--- a/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx
@@ -209,7 +209,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>
@@ -217,7 +217,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
@@ -372,13 +372,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
@@ -457,13 +457,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
@@ -541,13 +541,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 e42672e5eea..a82d8b9d0c6 100644
--- a/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx
+++ b/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx
@@ -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 b974083f4e3..a5115897f97 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>
   );
@@ -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 c056d968d19..1cac3de503f 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 1ace3140ff8..11ef7aa8a52 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/4">
+    <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 9fde41d8cfe..138374173f1 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 && (
@@ -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 93b4d678090..5557f2728c2 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 a329698dd5e..f7b09b6daf1 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 af2c8d9e351..a94dd1b3727 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/4">
+    <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 779afd1dd51..429598d60b3 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 abe25bc1783..1d0de51dc94 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 c711bfeac1b..57ff6526df3 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 4669986446d..4340a976813 100644
--- a/apps/webapp/app/components/sessions/v1/SessionsTable.tsx
+++ b/apps/webapp/app/components/sessions/v1/SessionsTable.tsx
@@ -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/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 9da5a03c176..6e8059c4eb1 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
@@ -713,7 +713,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 +858,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 b6da63acea8..d20328bdd24 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
@@ -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 72f9c85ee59..9bf64da1603 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 6f5fc89341f..37224720713 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.branches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx
index cd9810ae3dc..67ae202d64e 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 0b6ffb50ede..f5bbe17cd8a 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
@@ -195,7 +195,7 @@ export default function Page() {
           </Form>
         ) : 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
@@ -317,7 +317,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}%` }}
@@ -325,7 +325,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" }}
@@ -339,7 +339,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.dashboards.$dashboardKey/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
index 5fa237cee6e..668244975ab 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 16f00ae5854..1cee0dde8e2 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
@@ -94,7 +94,7 @@ export default function Page() {
 
 const CTA_CLASSNAME = cn(
   "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-charcoal-600 hover:bg-charcoal-750"
+  "hover:border-border-bright hover:bg-background-hover"
 );
 
 type DashboardCtaProps = {
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 4990fb88003..20dd91d34b4 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-linear-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.dev-branches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev-branches/route.tsx
index aa618185272..9f704a54f9b 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 12d360a4188..d552b3104fd 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 c2cd50164df..b0b2a893144 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>
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 dfcf3384306..9aa7133806a 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 */}
@@ -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 5d296280753..e65264655b1 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>
@@ -746,7 +746,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">
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 e4e85a47f65..b2fe42dd374 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
@@ -778,7 +778,7 @@ function CompareDialog({
           <DialogTitle>Compare models</DialogTitle>
         </DialogHeader>
         {rows.length > 0 ? (
-          <div className="-mt-1.5 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 e8db1c9ecb0..2c3ac41d7c3 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-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 field-sizing-content focus:border-0 focus:outline-hidden 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}
@@ -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"
               )}
             >
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 1c8af95fff6..a10461bdf56 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"
                 )}
               >
@@ -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-hidden"
+                    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}
@@ -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 1ce0ee7c808..d20f0ddcad3 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
@@ -271,7 +271,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 14a9a5cf3ab..a901d33bfaa 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 daa7187acf2..6b8b0945537 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 b4e84001971..54b95fa578c 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-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"
+          "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-160 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-hidden 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 bfe7bf08f29..ff2e8f7dd3d 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 285a1f68731..3ab2a4b41ab 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.regions/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx
index 43c27a07c34..783b60cb1ca 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
@@ -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 b29be90264d..34d9a613d9d 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
@@ -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-80 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
@@ -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 3fc88c9899a..19773257d2e 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 }}>
@@ -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 2d9ac6cd850..e6fcb09bbc6 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 e53261adb38..9ef03b5c189 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}
@@ -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 b02a3913346..f38124f2596 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 5c3f4301d59..a06df473249 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-hidden focus:ring-0 focus-visible:outline-hidden 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 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();
@@ -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,7 +367,7 @@ 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!",
@@ -380,7 +380,7 @@ export function AIPayloadTabContent({
                   // 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-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 9ea8289ab9a..bf2b57477a0 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 61239b60601..321d6391179 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}
@@ -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"} />
@@ -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-hidden 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-hidden 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"
@@ -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-hidden 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 48b842d34d1..b40533c24d5 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
@@ -104,7 +104,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 bcf0483db76..185d3e16356 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 e6e82e1be40..a7950a41e39 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 62ad810e6df..cbb1d6370e9 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 11c1afdc9da..1dc9753ac13 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 41faef9b0d5..d334fb50fec 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 9e9d40704e6..3fd620c2d2e 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
@@ -612,7 +612,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}
@@ -741,7 +741,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 3d63a0507a6..97ca52b205f 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
@@ -405,7 +405,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 && (
                 <>
@@ -413,7 +413,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 273390520d8..c9e762b3da9 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,7 +359,7 @@ 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"
@@ -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 2a50bdcca6d..a01b0793619 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,7 +62,7 @@ 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-320 flex-col items-center justify-center gap-8 lg:mt-0">
             <Header1 className="text-center">Subscribe for full access</Header1>
diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index 4609de25fbf..2c59ec0a164 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -141,7 +141,7 @@ export default function NewOrganizationPage() {
     );
 
   return (
-    <AppContainer className="bg-charcoal-900">
+    <AppContainer className="bg-background-deep">
       <BackgroundWrapper>
         <MainCenteredContainer
           variant="onboarding"
diff --git a/apps/webapp/app/routes/_app.timezones/route.tsx b/apps/webapp/app/routes/_app.timezones/route.tsx
index 23eeaaf4e92..39e3b7b6e8a 100644
--- a/apps/webapp/app/routes/_app.timezones/route.tsx
+++ b/apps/webapp/app/routes/_app.timezones/route.tsx
@@ -21,7 +21,7 @@ export default function Page() {
           <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.tokens/route.tsx b/apps/webapp/app/routes/account.tokens/route.tsx
index ad77d16d1ea..bc3435086b0 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 475f3ec67d1..76ba62ff8e9 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 2d0e99ff707..a3c89610c36 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 13b142e8af4..f813da7244e 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 56dc3f4ca46..fdecc168c7d 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 23218597a5c..cb8c3448fcb 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 b8b7793790b..42e02afa6cc 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 0ee118979d5..9187823a734 100644
--- a/apps/webapp/app/routes/confirm-basic-details.tsx
+++ b/apps/webapp/app/routes/confirm-basic-details.tsx
@@ -239,7 +239,7 @@ 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"
@@ -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 3bc77f2d21b..aa3b7809ca7 100644
--- a/apps/webapp/app/routes/invites.tsx
+++ b/apps/webapp/app/routes/invites.tsx
@@ -132,7 +132,7 @@ export default function Page() {
   });
 
   return (
-    <AppContainer className="bg-charcoal-900">
+    <AppContainer className="bg-background-deep">
       <BackgroundWrapper>
         <MainCenteredContainer
           variant="onboarding"
@@ -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 8fe521591e5..925a72172f5 100644
--- a/apps/webapp/app/routes/login._index/route.tsx
+++ b/apps/webapp/app/routes/login._index/route.tsx
@@ -35,13 +35,13 @@ function LastUsedBadge({ className }: { className?: string }) {
       )}
     >
       <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>
@@ -221,7 +221,7 @@ export default function LoginPage() {
             )}
             {data.showSsoAuth && !data.isVercelMarketplace && (
               <div className="flex w-full flex-col items-center gap-y-2 pt-2">
-                <div className="h-px w-full bg-charcoal-700" />
+                <div className="h-px w-full bg-background-raised" />
                 <div className="relative inline-flex items-center">
                   {data.lastAuthMethod === "sso" && <LastUsedBadge className="translate-x-2" />}
                   <TextLink
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 86caf1fb5b8..4c8f77a582a 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">
@@ -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 ee5eda4c3a6..9843a9f5820 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
@@ -397,7 +397,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">
@@ -509,7 +509,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,
@@ -520,14 +520,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 59c6da64126..e98d52ed1fa 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
@@ -302,7 +302,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 65c6c20d6a2..61ce814dbd5 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.waitpoints.$waitpointFriendlyId.complete/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route.tsx
index fa065428471..f6bc419c707 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
@@ -360,8 +360,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 18ec5322dc5..6129c303ee6 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-hidden focus:ring-0 focus-visible:outline-hidden 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 3b49cba3416..7414960f47a 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>
             }
@@ -759,7 +759,7 @@ export function TierEnterprise() {
           <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>
               }
@@ -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.animated-panel/route.tsx b/apps/webapp/app/routes/storybook.animated-panel/route.tsx
index f30be72b622..2d2ba455e41 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 941e39c4d8c..29f4a4b078a 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 c75b945fcae..8c7580cb613 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 03e90c8574d..7e74bd364c4 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 d1df15ac0ae..b920e4428bf 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 27fdc774a2e..529156bc9cd 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-80 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 fa654ce1082..4b5d27da43d 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 8f2c0d3e89c..335d85ff269 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.tabs.$tabNumber/route.tsx b/apps/webapp/app/routes/storybook.tabs.$tabNumber/route.tsx
index 8cf7aaa1643..6febd397363 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 f3389f2aff2..1bff41452a5 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 8a95daf6894..6369e61340c 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-hidden"
+              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-hidden"
+              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-hidden"
+              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,
diff --git a/apps/webapp/app/routes/storybook.tree-view/route.tsx b/apps/webapp/app/routes/storybook.tree-view/route.tsx
index 019cd8893ee..ac58d71b185 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 a461478b65d..543baa6eda8 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 b17bb2dda11..7dce64978d0 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 1b4a1522da8..012d47827de 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/vercel.onboarding.tsx b/apps/webapp/app/routes/vercel.onboarding.tsx
index ab9182ba079..61ffdb637a7 100644
--- a/apps/webapp/app/routes/vercel.onboarding.tsx
+++ b/apps/webapp/app/routes/vercel.onboarding.tsx
@@ -327,7 +327,7 @@ export default function VercelOnboardingPage() {
 
   if (data.step === "error") {
     return (
-      <AppContainer className="bg-charcoal-900">
+      <AppContainer className="bg-background-deep">
         <BackgroundWrapper>
           <MainCenteredContainer
             variant="onboarding"
@@ -358,7 +358,7 @@ export default function VercelOnboardingPage() {
     })();
 
     return (
-      <AppContainer className="bg-charcoal-900">
+      <AppContainer className="bg-background-deep">
         <BackgroundWrapper>
           <MainCenteredContainer
             variant="onboarding"
@@ -438,7 +438,7 @@ export default function VercelOnboardingPage() {
   const isLoading = isSubmitting || isInstalling;
 
   return (
-    <AppContainer className="bg-charcoal-900">
+    <AppContainer className="bg-background-deep">
       <BackgroundWrapper>
         <MainCenteredContainer
           variant="onboarding"
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 56c73bcbe6f..7d663fb54cb 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -148,12 +148,26 @@
   --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);
-  --color-background-bright: var(--color-charcoal-800);
+
+  /* Surfaces, from deepest to most raised */
+  --color-background-deep: var(--color-charcoal-900);
   --color-background-dimmed: var(--color-charcoal-850);
-  --color-grid-bright: var(--color-charcoal-700);
+  --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);

From 899dcbabb0abe851fd1b3f8fef5adfacde2abc67 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 12:45:52 +0000
Subject: [PATCH 05/10] chore(webapp): theme-ready charts, streamdown and dark
 variant

Run-status and chart colors in JS now reference var(--color-*) tokens
(run-status palette added to the theme). Streamdown container vars derive
from semantic tokens instead of hardcoded dark HSL values; removed dead
forced-dark code block overrides. dark: variant is now driven by data-theme
on <html> (set to dark) instead of the OS preference, with color-scheme
following the theme.
---
 .../app/components/code/QueryResultsChart.tsx |  4 +-
 .../components/primitives/charts/Chart.tsx    |  2 +-
 .../components/primitives/charts/ChartBar.tsx | 22 ++---
 .../primitives/charts/statusColors.ts         | 19 ++--
 .../app/components/runs/v3/TaskRunStatus.tsx  | 49 ++++++-----
 apps/webapp/app/root.tsx                      |  4 +-
 apps/webapp/app/tailwind.css                  | 87 ++++++++++++-------
 7 files changed, 109 insertions(+), 78 deletions(-)

diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index fd7b3c32f4c..ef4030b10f1 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] = {
diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index ed23d41cd10..85d28336837 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;
 
diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index ef9daeb532c..73ffb35c588 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/statusColors.ts b/apps/webapp/app/components/primitives/charts/statusColors.ts
index 2ae7470a2d4..8439b4d3285 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/runs/v3/TaskRunStatus.tsx b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
index bccb30a3270..9d20f5a525e 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
@@ -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/root.tsx b/apps/webapp/app/root.tsx
index 66a33b5ce13..b1027c49880 100644
--- a/apps/webapp/app/root.tsx
+++ b/apps/webapp/app/root.tsx
@@ -93,7 +93,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" />
 
@@ -121,7 +121,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/tailwind.css b/apps/webapp/app/tailwind.css
index 7d663fb54cb..d1bf953a376 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -212,22 +212,50 @@
 }
 
 /*
-  shadcn/ui tokens used by streamdown's internals. Inline so the HSL vars
-  resolve where the utility is used - .streamdown-container redefines them locally.
+  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-*).
+*/
+@theme {
+  --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: hsl(var(--background, 230 16% 9%));
-  --color-foreground: hsl(var(--foreground, 215 19% 87%));
-  --color-muted: hsl(var(--muted, 220 8% 17%));
-  --color-muted-foreground: hsl(var(--muted-foreground, 220 8% 57%));
-  --color-border: hsl(var(--border, 216 7% 27%));
-  --color-sidebar: hsl(var(--sidebar, 228 10% 11%));
-  --color-primary-foreground: hsl(var(--primary-foreground, 230 16% 9%));
+  --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);
@@ -328,6 +356,14 @@
     @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%;
@@ -337,7 +373,7 @@
     --chart-5: 27 87% 67%;
   }
 
-  .dark {
+  [data-theme="dark"] {
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
@@ -385,18 +421,18 @@
 
 /* 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] {
@@ -479,13 +515,6 @@
   & [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;

From de182db38b5eeff5d2af3ff12df57e6861594bd1 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 13:28:40 +0000
Subject: [PATCH 06/10] chore(webapp): move code highlighting and callout
 colors into the theme

Shiki (streamdown), prism (CodeBlock) and CodeMirror themes now read from
--color-code-* and --color-editor-* palettes declared in tailwind.css; callout
variants use --color-callout-* tokens. A light theme can restyle all of them
by overriding variables only.
---
 apps/webapp/app/components/code/CodeBlock.tsx | 32 +++----
 .../app/components/code/codeMirrorTheme.ts    | 61 ++++++-------
 apps/webapp/app/components/code/shikiTheme.ts | 72 +++++++--------
 .../app/components/primitives/Callout.tsx     | 30 +++----
 apps/webapp/app/tailwind.css                  | 87 ++++++++++++++++++-
 5 files changed, 183 insertions(+), 99 deletions(-)

diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index 26ed5e23da5..1eb2828c993 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)",
       },
     },
   ],
diff --git a/apps/webapp/app/components/code/codeMirrorTheme.ts b/apps/webapp/app/components/code/codeMirrorTheme.ts
index c9dd2f12e86..f32ea560b2d 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 5d47155b979..e9d45c9fbd1 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/primitives/Callout.tsx b/apps/webapp/app/components/primitives/Callout.tsx
index 69ad6a0fefe..6c772fb6e52 100644
--- a/apps/webapp/app/components/primitives/Callout.tsx
+++ b/apps/webapp/app/components/primitives/Callout.tsx
@@ -26,44 +26,44 @@ export const variantClasses = {
   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;
 
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index d1bf953a376..acb1b847922 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -211,12 +211,95 @@
   --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-*).
+  distinguishable. Referenced from JS via var(--color-run-*), so declared
+  static to always be emitted.
 */
-@theme {
+@theme static {
   --color-run-pending: var(--color-charcoal-500);
   --color-run-delayed: #6b7580;
   --color-run-pending-version: var(--color-warning);

From dd58375a89f17bb4934b564c70d9ed67f3d98c87 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 13:50:52 +0000
Subject: [PATCH 07/10] chore(webapp): tokenize remaining chart chrome and
 status colors

Activity sparkbars on the project index use the shared run-status palette;
chart grids, ticks, reference lines and loading skeletons read semantic
tokens; usage meter and progress colors use success/warning/error tokens.
---
 .../app/components/billing/FreePlanUsage.tsx  |  8 +++-
 .../app/components/code/QueryResultsChart.tsx |  6 +--
 .../navigation/DashboardDialogs.tsx           |  4 +-
 .../app/components/navigation/SideMenu.tsx    |  2 +-
 .../components/primitives/UsageSparkline.tsx  | 11 +++--
 .../primitives/charts/ChartLine.tsx           |  8 ++--
 .../primitives/charts/ChartLoading.tsx        | 10 ++---
 .../primitives/charts/ChartZoom.tsx           |  4 +-
 .../route.tsx                                 | 41 +++++++++++--------
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  6 +--
 .../route.tsx                                 | 11 +++--
 .../route.tsx                                 | 11 +++--
 apps/webapp/app/tailwind.css                  |  2 +-
 14 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/apps/webapp/app/components/billing/FreePlanUsage.tsx b/apps/webapp/app/components/billing/FreePlanUsage.tsx
index 5c6cad62f93..274429fb5d0 100644
--- a/apps/webapp/app/components/billing/FreePlanUsage.tsx
+++ b/apps/webapp/app/components/billing/FreePlanUsage.tsx
@@ -9,7 +9,13 @@ export function FreePlanUsage({ to, percentage }: { to: string; percentage: numb
   const color = useTransform(
     widthProgress,
     [0, 74, 75, 95, 100],
-    ["#22C55E", "#22C55E", "#F59E0B", "#F43F5E", "#F43F5E"]
+    [
+      "var(--color-success)",
+      "var(--color-success)",
+      "var(--color-warning)",
+      "var(--color-error)",
+      "var(--color-error)",
+    ]
   );
 
   const hasHitLimit = cappedPercentage >= 1;
diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index ef4030b10f1..48b2d8f9f6d 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -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/navigation/DashboardDialogs.tsx b/apps/webapp/app/components/navigation/DashboardDialogs.tsx
index 42fadbf1622..a417a5a652f 100644
--- a/apps/webapp/app/components/navigation/DashboardDialogs.tsx
+++ b/apps/webapp/app/components/navigation/DashboardDialogs.tsx
@@ -161,8 +161,8 @@ 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
+const PROGRESS_COLOR_SUCCESS = "var(--color-success)"; // mint-500 / success
+const PROGRESS_COLOR_ERROR = "var(--color-error)"; // rose-600 / error
 
 function CreateDashboardUpgradeDialog({
   limits,
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index bf193fa3843..6ddb5413544 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -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>
diff --git a/apps/webapp/app/components/primitives/UsageSparkline.tsx b/apps/webapp/app/components/primitives/UsageSparkline.tsx
index 72b5a132596..5a6b0a5c12d 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",
@@ -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>
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 1edd5a2357e..58229bc5e6a 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 595aeb9cf6d..8e7ee031f81 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -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>
 
diff --git a/apps/webapp/app/components/primitives/charts/ChartZoom.tsx b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
index a04a90ef119..375a133f445 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}
         />
       )}
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 6e8059c4eb1..c16e96b8f51 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
@@ -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.
@@ -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>
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 d20328bdd24..6ce526ba7b3 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}
                                 />
                               )}
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 9aa7133806a..ea6b33eedae 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
@@ -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
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 e65264655b1..5243ab3d46b 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
@@ -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>
@@ -765,7 +770,7 @@ function ErrorActivityBlankState() {
   return (
     <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.prompts._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
index d20f0ddcad3..651ce47c780 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
@@ -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>
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index acb1b847922..71e77ebfee3 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -472,7 +472,7 @@
 
   /* Sidebar reorder grid: subtle placeholder */
   .sidebar-reorder-grid .react-grid-item.react-grid-placeholder {
-    background: rgb(39 42 46) !important; /* charcoal-700 */
+    background: var(--color-background-raised) !important;
     border-radius: 0.25rem;
     opacity: 1 !important;
   }

From fcae77140b6eb440c673cc61b180872ca1282213 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 14:04:47 +0000
Subject: [PATCH 08/10] fix(webapp): keep compare models dialog full-width on
 mobile

---
 .../route.tsx                                                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 e4e85a47f65..067d3fa70ad 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
@@ -773,7 +773,7 @@ function CompareDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-fit! gap-1.75 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>

From 1c6b843f91219689434c1d28aa6b67df99418071 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 14:06:17 +0000
Subject: [PATCH 09/10] fix(webapp): consolidate duplicate streamdown
 code-block container rules

---
 apps/webapp/app/tailwind.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 56c73bcbe6f..e39cb023fe5 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -386,7 +386,7 @@
 
   /* Code block styling */
   & [data-code-block-container] {
-    @apply rounded-sm border-charcoal-650 my-0;
+    @apply rounded-sm my-2 border-charcoal-700;
   }
   & [data-code-block] {
     border-top: none;
@@ -458,10 +458,6 @@
     @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;
   }

From 9f1a6cee92fbfe01ff4473f4f77a500987abb1ae Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 3 Jul 2026 14:09:50 +0000
Subject: [PATCH 10/10] fix(webapp): revert tailwind codemod renames in non-CSS
 strings

The upgrade codemod treated string literals in .ts files as utility classes:
realtimeBackend "shadow" flag values, compute template creation "shadow"
mode, and randomWords dictionary entries were renamed to shadow-sm/ring-3/
outline-solid. Restores the original values so persisted flags keep parsing.
---
 .../realtime/resolveRealtimeStreamClient.server.ts   |  4 ++--
 .../realtime/shadowRealtimeClientInstance.server.ts  |  2 +-
 apps/webapp/app/utils/randomWords.ts                 |  6 +++---
 apps/webapp/app/v3/featureFlags.ts                   |  4 ++--
 .../v3/services/computeTemplateCreation.server.ts    | 12 ++++++------
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/webapp/app/services/realtime/resolveRealtimeStreamClient.server.ts b/apps/webapp/app/services/realtime/resolveRealtimeStreamClient.server.ts
index a9079f3fd23..4b2207fe190 100644
--- a/apps/webapp/app/services/realtime/resolveRealtimeStreamClient.server.ts
+++ b/apps/webapp/app/services/realtime/resolveRealtimeStreamClient.server.ts
@@ -11,7 +11,7 @@ import { type RealtimeStreamClient } from "./nativeRealtimeClient.server";
 import { getNativeRealtimeClient } from "./nativeRealtimeClientInstance.server";
 import { getShadowRealtimeClient } from "./shadowRealtimeClientInstance.server";
 
-type RealtimeBackend = "electric" | "native" | "shadow-sm";
+type RealtimeBackend = "electric" | "native" | "shadow";
 
 // Two gates, both defaulting to the Electric path: the env master switch, then the
 // per-org `realtimeBackend` feature flag (cached so long-polls don't hit the DB per request).
@@ -43,7 +43,7 @@ export async function resolveRealtimeStreamClient(
   switch (await getRealtimeBackend(environment.organizationId, orgFeatureFlags)) {
     case "native":
       return getNativeRealtimeClient();
-    case "shadow-sm":
+    case "shadow":
       // The client is still served Electric; the native path is diffed in the background.
       return getShadowRealtimeClient();
     case "electric":
diff --git a/apps/webapp/app/services/realtime/shadowRealtimeClientInstance.server.ts b/apps/webapp/app/services/realtime/shadowRealtimeClientInstance.server.ts
index c31ca79eb97..7453b107837 100644
--- a/apps/webapp/app/services/realtime/shadowRealtimeClientInstance.server.ts
+++ b/apps/webapp/app/services/realtime/shadowRealtimeClientInstance.server.ts
@@ -12,7 +12,7 @@ import { ShadowRealtimeClient } from "./shadowRealtimeClient.server";
 
 /**
  * Process-singleton wiring for the shadow-compare client. Only constructed
- * when an org's `realtimeBackend` flag is set to "shadow-sm".
+ * when an org's `realtimeBackend` flag is set to "shadow".
  */
 function initializeShadowRealtimeClient(): ShadowRealtimeClient {
   const compares = getMeter("realtime-shadow").createCounter("realtime_shadow.compares", {
diff --git a/apps/webapp/app/utils/randomWords.ts b/apps/webapp/app/utils/randomWords.ts
index 23343c853c7..600065457f4 100644
--- a/apps/webapp/app/utils/randomWords.ts
+++ b/apps/webapp/app/utils/randomWords.ts
@@ -1177,7 +1177,7 @@ var wordList = [
   "ourselves",
   "out",
   "outer",
-  "outline-solid",
+  "outline",
   "outside",
   "over",
   "own",
@@ -1396,7 +1396,7 @@ var wordList = [
   "ride",
   "riding",
   "right",
-  "ring-3",
+  "ring",
   "rise",
   "rising",
   "river",
@@ -1483,7 +1483,7 @@ var wordList = [
   "seven",
   "several",
   "shade",
-  "shadow-sm",
+  "shadow",
   "shake",
   "shaking",
   "shall",
diff --git a/apps/webapp/app/v3/featureFlags.ts b/apps/webapp/app/v3/featureFlags.ts
index 6a16a19191b..46434bebf30 100644
--- a/apps/webapp/app/v3/featureFlags.ts
+++ b/apps/webapp/app/v3/featureFlags.ts
@@ -35,8 +35,8 @@ export const FeatureFlagCatalog = {
   [FEATURE_FLAG.workerQueueScheduledSplitEnabled]: z.coerce.boolean(),
   // Which backend serves the realtime run feed. Controllable
   // globally and per-org (org wins). Defaults to "electric" when unset.
-  // "shadow-sm" serves Electric but diffs the native path in the background.
-  [FEATURE_FLAG.realtimeBackend]: z.enum(["electric", "native", "shadow-sm"]),
+  // "shadow" serves Electric but diffs the native path in the background.
+  [FEATURE_FLAG.realtimeBackend]: z.enum(["electric", "native", "shadow"]),
   // Strict z.boolean() (not z.coerce.boolean()): coercion turns the string "false"
   // into true, which would silently flip this kill switch / per-org exclude the wrong
   // way if written as a string via the admin PAT route. The admin toggle sends a real
diff --git a/apps/webapp/app/v3/services/computeTemplateCreation.server.ts b/apps/webapp/app/v3/services/computeTemplateCreation.server.ts
index 10605a1bca3..5f561c33632 100644
--- a/apps/webapp/app/v3/services/computeTemplateCreation.server.ts
+++ b/apps/webapp/app/v3/services/computeTemplateCreation.server.ts
@@ -15,7 +15,7 @@ import { globalFlagsRegistry } from "~/v3/globalFlagsRegistry.server";
 import { getEntitlement } from "~/services/platform.v3.server";
 import { startActiveSpan, attributesFromAuthenticatedEnv } from "~/v3/tracer.server";
 
-type TemplateCreationMode = "required" | "shadow-sm" | "skip";
+type TemplateCreationMode = "required" | "shadow" | "skip";
 
 // Why the mode was chosen — slices the compute.template.create span by path.
 type TemplateModeReason =
@@ -95,7 +95,7 @@ export class ComputeTemplateCreationService {
         return;
       }
 
-      if (mode === "shadow-sm") {
+      if (mode === "shadow") {
         // Shadow is fire-and-forget (background build), so the span only records
         // that it was dispatched — the build outcome lands server-side later.
         span.setAttribute("compute.template.result", "shadow_dispatched");
@@ -226,7 +226,7 @@ export class ComputeTemplateCreationService {
         try {
           planType = (await getEntitlement(project.organization.id))?.plan?.type;
         } catch (error) {
-          logger.warn("compute migration: entitlement lookup failed; skipping shadow-sm template", {
+          logger.warn("compute migration: entitlement lookup failed; skipping shadow template", {
             organizationId: project.organization.id,
             error: error instanceof Error ? error.message : String(error),
           });
@@ -236,7 +236,7 @@ export class ComputeTemplateCreationService {
       if (migrated) {
         // required => template built at deploy (deploy fails on error); off => shadow.
         return {
-          mode: decision.flags?.computeMigrationRequireTemplate ? "required" : "shadow-sm",
+          mode: decision.flags?.computeMigrationRequireTemplate ? "required" : "shadow",
           migrated: true,
           reason: "migrated",
         };
@@ -246,12 +246,12 @@ export class ComputeTemplateCreationService {
     const hasComputeAccess = await resolveComputeAccess(prisma, project.organization.featureFlags);
 
     if (hasComputeAccess) {
-      return { mode: "shadow-sm", migrated: false, reason: "compute-access" };
+      return { mode: "shadow", migrated: false, reason: "compute-access" };
     }
 
     const rolloutPct = Number(env.COMPUTE_TEMPLATE_SHADOW_ROLLOUT_PCT ?? "0");
     if (rolloutPct > 0 && Math.random() * 100 < rolloutPct) {
-      return { mode: "shadow-sm", migrated: false, reason: "rollout" };
+      return { mode: "shadow", migrated: false, reason: "rollout" };
     }
 
     return { mode: "skip", migrated: false, reason: "none" };