agent: components — restyle Card, Toggle, SegmentedButton with brand tokens

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

src/lib/components/Card.svelte

@@ -2,6 +2,6 @@
   let { children, classes = "" } = $props();
 </script>
 
-<div class="bg-bg-card border border-border rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,0.2)] {classes}">
+<div class="bg-bg-card border border-border-subtle rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,0.2)] {classes}">
   {@render children()}
 </div>

src/lib/components/SegmentedButton.svelte

@@ -8,8 +8,9 @@
       class="rounded-lg font-medium
         {size === 'small' ? 'px-2.5 py-1 text-[11px]' : 'px-3.5 py-[6px] text-[12px]'}
         {value === option
-          ? 'bg-accent text-white shadow-[0_1px_4px_rgba(232,168,124,0.3)]'
+          ? 'bg-accent text-bg shadow-[0_1px_4px_rgba(232,168,124,0.3)]'
           : 'text-text-secondary hover:text-text hover:bg-hover'}"
+      style="transition-duration: var(--duration-ui)"
       onclick={() => value = option}
     >
       {option}

src/lib/components/Toggle.svelte

@@ -5,8 +5,9 @@
 <div class="flex items-start gap-3 py-2.5">
   <button
     class="relative mt-0.5 w-[38px] min-w-[38px] h-[22px] rounded-full flex-shrink-0
-      {checked ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-border'}
-      active:scale-95 transition-all duration-200"
+      {checked ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-bg-elevated'}
+      active:scale-95"
+    style="transition-duration: var(--duration-ui)"
     onclick={() => checked = !checked}
     role="switch"
     aria-checked={checked}
@@ -14,8 +15,9 @@
   >
     <span
       class="absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm
-        transition-transform duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)]
+        ease-[cubic-bezier(0.34,1.56,0.64,1)]
         {checked ? 'translate-x-[16px]' : 'translate-x-0'}"
+      style="transition: transform var(--duration-ui) cubic-bezier(0.34, 1.56, 0.64, 1)"
     ></span>
   </button>
   <div class="flex-1 min-w-0">