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>

tests/unit/QuoteBlock.test.jsx

@@ -59,8 +59,8 @@ describe("QuoteBlock Component", () => {
     // Compact variant should have different styling
     const section = screen.getByRole("region");
     expect(section).toHaveClass(
-      "py-[var(--spacing-scale-032)]",
-      "px-[var(--spacing-scale-016)]",
+      "py-[var(--space-800)]",
+      "px-[var(--space-400)]",
     );
 
     rerender(
@@ -69,8 +69,8 @@ describe("QuoteBlock Component", () => {
 
     // Extended variant should have different styling
     expect(section).toHaveClass(
-      "py-[var(--spacing-scale-048)]",
-      "px-[var(--spacing-scale-024)]",
+      "py-[var(--space-1200)]",
+      "px-[var(--space-600)]",
     );
   });
 
@@ -166,10 +166,10 @@ describe("QuoteBlock Component", () => {
     render(<QuoteBlock quote="Test quote" author="Test Author" />);
 
     const section = document.querySelector("section");
-    expect(section).toHaveClass("md:py-[var(--spacing-scale-032)]");
+    expect(section).toHaveClass("md:py-[var(--space-800)]");
 
     const card = section.querySelector(
-      '[class*="bg-[var(--color-surface-default-brand-darker-accent)]"]',
+      '[class*="bg-[var(--color-surface-invert-brand-secondary)]"]',
     );
     expect(card).toBeInTheDocument();
   });