fix(webapp): swap the last hard-coded greys for theme tokens

Four spots still carried fixed neutral colors, so they kept their dark-theme
appearance on Light and White:

- the agent composer's stop button, a charcoal surface with a white glyph;
  both now follow the theme, since the surface goes light with it
- the API keys "no scope" dot, which tracks the dimmed text color rather
  than a surface color that would all but vanish on a light card
- chart reference-line labels and the dashed line itself

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx

@@ -54,11 +54,13 @@ export function DashboardAgentComposer({
   const sendButton = isStreaming ? (
     <Button
       variant="minimal/small"
-      className="aspect-square h-7 min-w-0 bg-charcoal-600 p-1 hover:bg-charcoal-550"
+      className="aspect-square h-7 min-w-0 bg-surface-control p-1 hover:bg-surface-control-hover"
       aria-label="Stop generating"
       tooltip="Stop generating"
       onClick={onStop}
-      LeadingIcon={<StopIcon className="size-4 text-white" />}
+      // Not text-white: this button's surface goes light with the theme, unlike
+      // the indigo Send button below it.
+      LeadingIcon={<StopIcon className="size-4 text-text-bright" />}
     />
   ) : (
     <Button

apps/webapp/app/components/primitives/charts/ChartLine.tsx

@@ -168,7 +168,7 @@ function ReferenceLineLabel({
         y={viewBox.y}
         dominantBaseline="middle"
         textAnchor="start"
-        fill="#878C99"
+        className="fill-text-dimmed"
         fontSize={REFERENCE_LABEL_FONT_SIZE}
       >
         {value}
@@ -180,7 +180,7 @@ function ReferenceLineLabel({
       x={viewBox.x + viewBox.width - 4}
       y={viewBox.y + 12}
       textAnchor="end"
-      fill="#878C99"
+      className="fill-text-dimmed"
       fontSize={REFERENCE_LABEL_FONT_SIZE}
     >
       {value}
@@ -458,7 +458,7 @@ export function ChartLineRenderer({
         <ReferenceLine
           key={`ref-${line.y}-${line.label ?? ""}`}
           y={line.y}
-          stroke={line.color ?? "#4D525B"}
+          stroke={line.color ?? "var(--color-border-brighter)"}
           strokeDasharray="4 4"
           strokeWidth={1}
           // extendDomain (not "hidden") means recharts does NOT wrap this layer in the plot

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx

@@ -1097,7 +1097,10 @@ function ApiKeyScopePanel({
                           ? "bg-blue-500"
                           : tone === "write"
                             ? "bg-amber-500"
-                            : "bg-charcoal-600"
+                            : // A dot has to stay visible, so this tracks the
+                              // dimmed text color rather than a surface color
+                              // that would all but vanish on a light card.
+                              "bg-text-dimmed"
                       )}
                     />
                     <span