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

@@ -75,7 +75,7 @@ describe("ContentContainer", () => {
       "font-bricolage-grotesque",
       "font-medium",
       "text-xx-small-display",
-      "text-[var(--color-content-inverse-brand-royal)]",
+      "text-[var(--color-content-invert-brand-royal)]",
     );
   });
 
@@ -86,7 +86,7 @@ describe("ContentContainer", () => {
     expect(description).toBeInTheDocument();
     expect(description).toHaveClass(
       "text-x-small-paragraph",
-      "text-[var(--color-content-inverse-brand-royal)]",
+      "text-[var(--color-content-invert-brand-royal)]",
     );
   });
 
@@ -132,7 +132,7 @@ describe("ContentContainer", () => {
 
     // Check the content container (parent of icon)
     expect(iconContainer.parentElement).toHaveClass(
-      "gap-[var(--measures-spacing-008)]",
+      "gap-[var(--space-200)]",
     );
     // Check the text container (parent of title) - it has responsive gap classes
     expect(textContainer.parentElement).toHaveClass("flex", "flex-col");
@@ -146,7 +146,7 @@ describe("ContentContainer", () => {
       "flex",
       "min-w-0",
       "items-end",
-      "gap-[var(--measures-spacing-008)]",
+      "gap-[var(--space-200)]",
     );
   });
 
@@ -156,13 +156,13 @@ describe("ContentContainer", () => {
     const author = screen.getByText("Test Author");
     expect(author).toHaveClass(
       "text-xx-small-paragraph",
-      "text-[var(--color-content-inverse-brand-royal)]",
+      "text-[var(--color-content-invert-brand-royal)]",
     );
 
     const date = screen.getByText("April 2025");
     expect(date).toHaveClass(
       "text-xx-small-paragraph",
-      "text-[var(--color-content-inverse-brand-royal)]",
+      "text-[var(--color-content-invert-brand-royal)]",
     );
   });