fix(webapp): give the primary button and the switch one shared accent

The switch's checked track and the primary button were two different purples:
the track had just moved onto the link token (lavender-400 on the dark themes)
while the button was still a raw indigo-600, so they sat side by side on the
account page visibly out of step.

They can't both read --color-text-link, because a fill and a text color want
opposite things. White button text needs 4.5:1 against the fill, which pins
the fill dark; link text on a near-black page needs 4.5:1 against *that*,
which pushes the link light. So this adds --color-accent-fill, in the same
spirit as the existing error/success fill tokens, and points both at it.

lavender-600 is a straight swap for indigo-600 - white on it measures 6.31:1
against the old 6.29:1 - and it's the value the light themes already use for
link text, so link, button and switch all agree there. The switch's white
thumb improves from 3.76:1 to 6.31:1 against the track.

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

Author: samejr

apps/webapp/app/components/primitives/Buttons.tsx

@@ -61,7 +61,10 @@ const theme = {
   primary: {
     textColor: "text-white transition group-disabled/button:text-white/60",
     button:
-      "bg-indigo-600 border border-indigo-500 group-hover/button:bg-indigo-500 group-hover/button:border-indigo-400 group-disabled/button:opacity-50 group-disabled/button:bg-indigo-600 group-disabled/button:border-indigo-500 group-disabled/button:pointer-events-none",
+      // Shares --color-accent-fill with the switch's checked track, so the two
+      // accents can't drift. The border is a fixed bevel one stop up the ramp,
+      // like the indigo pair it replaces.
+      "bg-accent-fill border border-lavender-500 group-hover/button:bg-lavender-500 group-hover/button:border-lavender-400 group-disabled/button:opacity-50 group-disabled/button:bg-accent-fill group-disabled/button:border-lavender-500 group-disabled/button:pointer-events-none",
     shortcut:
       "border-white/40 text-white group-hover/button:border-white/60 group-hover/button:text-white",
     icon: "text-white",

apps/webapp/app/components/primitives/Switch.tsx

@@ -99,19 +99,18 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
     const switchElement = (
       <div
         className={cn(
-          // The checked fill reads the link token, so the accent purple is the
-          // same one links use and follows the theme - a single raw indigo can't
-          // sit on both a near-black track and white.
-          "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-text-link group-data-[state=unchecked]:bg-background-raised group-hover:group-data-[state=unchecked]:bg-surface-control-active/50",
+          // The checked track shares --color-accent-fill with the primary
+          // button, so the two accents are the same purple and can't drift.
+          "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-accent-fill group-data-[state=unchecked]:bg-background-raised group-hover:group-data-[state=unchecked]:bg-surface-control-active/50",
           root
         )}
       >
         <SwitchPrimitives.Thumb
           className={cn(
             thumb,
-            /* White once checked, in every theme: the link token is lighter than
-               the old indigo on the dark themes, so an off-white thumb would fall
-               under 3:1 against the track and stop reading as a separate part. */
+            /* White once checked, in every theme, matching the primary button's
+               label on the same fill - an off-white thumb sat at 2.80:1 against
+               the track, under the 3:1 a control's parts need. */
             "pointer-events-none block rounded-full bg-white transition dark:bg-charcoal-200 dark:group-data-[state=checked]:bg-white"
           )}
         />

apps/webapp/app/tailwind.css

@@ -150,6 +150,13 @@
      hover at all. This lands just under the largest hover step the app already
      uses (text-dimmed -> text-bright). */
   --color-text-link-hover: var(--color-lavender-300);
+  /* The same brand purple as a *fill* under white content - the primary button
+     and the switch's checked track, which must agree with each other. One value
+     for every theme: white content needs 4.5:1, which pins it dark, while
+     --color-text-link above has to travel the other way to stay legible as text
+     on a near-black page. So the fill and the link color match on the light
+     themes and can't on the dark ones. */
+  --color-accent-fill: var(--color-lavender-600);
   --color-text-faint: var(--color-charcoal-500);
   --color-text-dimmed: var(--color-charcoal-400);
   --color-text-bright: var(--color-charcoal-200);