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/pages/blog.test.jsx

@@ -185,8 +185,8 @@ describe("BlogPostPage", () => {
     const article = document.querySelector("article");
     expect(article).toBeInTheDocument();
     expect(article).toHaveClass(
-      "p-[var(--spacing-scale-024)]",
-      "sm:py-[var(--spacing-scale-032)]",
+      "p-[var(--space-600)]",
+      "sm:py-[var(--space-800)]",
     );
 
     // Check content is rendered
@@ -276,14 +276,14 @@ describe("BlogPostPage", () => {
       .closest("div.post-body");
     expect(contentDiv).toHaveClass("post-body");
     expect(contentDiv).toHaveClass(
-      "text-[var(--color-content-inverse-primary)]",
+      "text-[var(--color-content-invert-primary)]",
     );
     expect(contentDiv).toHaveClass("text-medium-paragraph");
 
     const article = contentDiv?.closest("article");
-    expect(article).toHaveClass("p-[var(--spacing-scale-024)]");
-    expect(article).toHaveClass("sm:py-[var(--spacing-scale-032)]");
-    expect(article).not.toHaveClass("-mt-[var(--spacing-scale-048)]");
+    expect(article).toHaveClass("p-[var(--space-600)]");
+    expect(article).toHaveClass("sm:py-[var(--space-800)]");
+    expect(article).not.toHaveClass("-mt-[var(--space-1200)]");
   });
 
   it("applies responsive text sizing", async () => {

tests/pages/profile.test.tsx

@@ -136,7 +136,7 @@ describe("ProfilePageView", () => {
       "border-[var(--color-border-default-negative-primary)]",
     );
     expect(confirm.className).not.toContain(
-      "bg-[var(--color-surface-inverse-primary)]",
+      "bg-[var(--color-surface-invert-primary)]",
     );
 
     await user.click(confirm);