Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/progress/ProportionBar/ProportionBar.view.tsx

@@ -65,7 +65,7 @@ export function ProportionBarView({
       aria-label={ariaLabelText}
     >
       {/* Background layer - 3 segments */}
-      <div className="absolute inset-0 flex gap-[var(--spacing-scale-008)] px-[4px]">
+      <div className="absolute inset-0 flex gap-[var(--space-200)] px-[4px]">
         <div className="flex-1 h-full bg-[var(--color-surface-default-secondary)] rounded-l-[var(--radius-full)]" />
         <div className="flex-1 h-full bg-[var(--color-surface-default-secondary)]" />
         <div className="flex-1 h-full bg-[var(--color-surface-default-secondary)] rounded-r-[var(--radius-full)]" />
@@ -77,7 +77,7 @@ export function ProportionBarView({
         only the outermost left/right edges of the whole bar can round to match the
         background capsule.
       */}
-      <div className="absolute inset-0 flex gap-[var(--spacing-scale-008)] px-[4px] overflow-hidden">
+      <div className="absolute inset-0 flex gap-[var(--space-200)] px-[4px] overflow-hidden">
         {/* First section - for 1-X: (X+1)/6 filled, for 2-X and 3-X: fully filled */}
         <div className="flex-1 h-full relative">
           {fullSegments === 1 ? (