Adopt remaining typography token classes (CR-24)

Map exact size/weight/line-height combos onto existing text-* utilities across cards, sections, navigation, modals, controls, and create-flow. Leave unmappable combos hardcoded for design review.

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

tests/unit/ContentContainer.test.jsx

@@ -74,8 +74,7 @@ describe("ContentContainer", () => {
     expect(title).toHaveClass(
       "font-bricolage",
       "font-medium",
-      "text-[18px]",
-      "leading-[120%]",
+      "text-xx-small-display",
       "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
@@ -86,10 +85,7 @@ describe("ContentContainer", () => {
     const description = screen.getByText(/This is a test article description/);
     expect(description).toBeInTheDocument();
     expect(description).toHaveClass(
-      "font-inter",
-      "font-normal",
-      "text-[12px]",
-      "leading-[16px]",
+      "text-x-small-paragraph",
       "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
@@ -148,19 +144,13 @@ describe("ContentContainer", () => {
 
     const author = screen.getByText("Test Author");
     expect(author).toHaveClass(
-      "font-inter",
-      "font-normal",
-      "text-[10px]",
-      "leading-[14px]",
+      "text-xx-small-paragraph",
       "text-[var(--color-content-inverse-brand-royal)]",
     );
 
     const date = screen.getByText("April 2025");
     expect(date).toHaveClass(
-      "font-inter",
-      "font-normal",
-      "text-[10px]",
-      "leading-[14px]",
+      "text-xx-small-paragraph",
       "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
@@ -217,7 +207,7 @@ describe("ContentContainer", () => {
     expect(title).toHaveClass("text-[18px]", "leading-[22px]");
 
     const description = screen.getByText(/This is a test article description/);
-    expect(description).toHaveClass("text-[12px]", "leading-[16px]");
+    expect(description).toHaveClass("text-x-small-paragraph");
   });
 
   it("applies correct responsive sizing for responsive breakpoint", () => {
@@ -227,10 +217,10 @@ describe("ContentContainer", () => {
     expect(icon).toHaveClass("w-[60px]", "h-[30px]");
 
     const title = screen.getByText("Test Article Title");
-    expect(title).toHaveClass("text-[18px]", "leading-[120%]");
+    expect(title).toHaveClass("text-xx-small-display");
 
     const description = screen.getByText(/This is a test article description/);
-    expect(description).toHaveClass("text-[12px]", "leading-[16px]");
+    expect(description).toHaveClass("text-x-small-paragraph");
   });
 
   it("has proper accessibility attributes", () => {

tests/unit/QuoteBlock.test.jsx

@@ -197,7 +197,7 @@ describe("QuoteBlock Component", () => {
     render(<QuoteBlock quote="Test quote" author="Test Author" />);
 
     const authorElement = screen.getByText("Test Author");
-    expect(authorElement).toHaveClass("font-inter", "font-normal", "uppercase");
+    expect(authorElement).toHaveClass("font-normal", "uppercase");
   });
 
   test("applies responsive text sizing", () => {
@@ -207,9 +207,9 @@ describe("QuoteBlock Component", () => {
 
     const quoteElement = screen.getByText("Test quote");
     expect(quoteElement).toHaveClass(
-      "text-[18px]",
-      "md:text-[36px]",
-      "lg:text-[52px]",
+      "text-xx-small-display",
+      "md:text-small-display",
+      "lg:text-large-display",
     );
   });
 

tests/unit/Rule.test.jsx

@@ -188,11 +188,11 @@ describe("Rule Component", () => {
     render(<Rule {...defaultProps} size="L" />);
 
     const heading = screen.getByRole("heading", { level: 3 });
-    // Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and font-extrabold
+    // Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and X Large Heading
     expect(heading?.className).toMatch(
       /min-\[1440px\]:font-bricolage-grotesque/,
     );
-    expect(heading?.className).toMatch(/min-\[1440px\]:font-extrabold/);
+    expect(heading?.className).toMatch(/min-\[1440px\]:text-x-large-heading/);
   });
 
   it("renders expanded state with categories", () => {