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>

app/components/sections/AskOrganizer/AskOrganizer.view.tsx

@@ -53,7 +53,7 @@ function AskOrganizerView({
             size="small"
             buttonType="filled"
             palette={buttonPalette}
-            className="!px-[var(--spacing-scale-010)] md:!px-[var(--spacing-scale-016)] md:!py-[var(--spacing-scale-012)] md:!text-[16px] md:!leading-[20px]"
+            className="!px-[var(--spacing-scale-010)] md:!px-[var(--spacing-scale-016)] md:!py-[var(--spacing-scale-012)] md:!text-medium-label"
             onClick={onContactClick}
             ariaLabel={ctaAriaLabel}
             data-testid="ask-organizer-cta"

app/components/sections/ContentBanner/ContentBanner.view.tsx

@@ -37,12 +37,12 @@ function ContentBannerGuideView({
             <div className="flex w-full flex-col items-start gap-[var(--measures-spacing-004)] text-left text-[var(--color-content-default-primary)]">
               <h1
                 id="content-banner-title"
-                className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-[44px]"
+                className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-medium-display"
               >
                 {title}
               </h1>
               {description ? (
-                <p className="w-full font-inter font-normal text-[16px] leading-[130%] sm:text-[18px]">
+                <p className="w-full font-normal text-[16px] leading-[130%] sm:text-large-paragraph">
                   {description}
                 </p>
               ) : null}

app/components/sections/Groups/Groups.view.tsx

@@ -14,7 +14,7 @@ function GroupsView({ title, items, headingId, className = "" }: GroupsViewProps
       <div className="mx-auto flex w-full max-w-[560px] flex-col items-center gap-[var(--spacing-scale-032)] md:max-w-[1280px] md:gap-[var(--spacing-scale-048)]">
         <h2
           id={headingId}
-          className="w-full shrink-0 text-center font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary)] md:text-[32px] md:leading-10 lg:text-[40px] lg:leading-[52px]"
+          className="w-full shrink-0 text-center font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading lg:text-xx-large-heading"
         >
           {title}
         </h2>

app/components/sections/QuoteBlock/QuoteBlock.container.tsx

@@ -46,11 +46,11 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
         avatar:
           "md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]",
         quote:
-          "text-[18px] leading-[120%] md:text-[36px] md:leading-[110%] md:tracking-[0px] lg:text-[52px] xl:text-[64px]",
+          "text-xx-small-display md:text-small-display lg:text-large-display xl:text-x-large-display",
         author:
-          "text-[12px] leading-[120%] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px]",
+          "text-x-small-uppercase md:text-large-uppercase lg:text-x-large-uppercase xl:text-xx-large-uppercase",
         source:
-          "text-[12px] leading-[120%] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px]",
+          "text-x-small-uppercase md:text-large-uppercase lg:text-x-large-uppercase xl:text-xx-large-uppercase",
         showDecor: true,
       },
       extended: {

app/components/sections/QuoteBlock/QuoteBlock.view.tsx

@@ -25,7 +25,7 @@ function QuoteBlockView({
 
   if (config.statementLayout) {
     const statementTextClass =
-      "font-bricolage-grotesque text-[28px] font-bold leading-9 tracking-[var(--text-xx-large-heading--letter-spacing)] text-[var(--color-surface-default-tertiary)] md:text-[length:var(--text-xx-large-heading)] md:leading-[length:var(--text-xx-large-heading--line-height)]";
+      "font-bricolage-grotesque text-medium-heading text-[var(--color-surface-default-tertiary)] md:text-xx-large-heading";
 
     return (
       <section
@@ -142,7 +142,7 @@ function QuoteBlockView({
           <footer className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]">
             <cite
               id={authorId}
-              className={`font-inter font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
+              className={`font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
             >
               {author}
             </cite>
@@ -151,7 +151,7 @@ function QuoteBlockView({
                 data-qopen="&ldquo;"
                 data-qclose="&rdquo;"
                 className={[
-                  "font-inter font-normal",
+                  "font-normal",
                   config.source,
                   "text-[var(--color-content-inverse-primary)] uppercase",
                   "pl-[0.6em] -indent-[0.6em]",

app/components/sections/RelatedArticles/RelatedArticles.view.tsx

@@ -37,7 +37,7 @@ export function RelatedArticlesView({
         }
       >
         {isUseCases && useCasesHeadingLines?.length ? (
-          <h2 className="mx-auto w-full min-w-0 max-w-[693px] text-center font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary)] md:text-[32px] md:leading-[40px] lg:text-[40px] lg:leading-[52px]">
+          <h2 className="mx-auto w-full min-w-0 max-w-[693px] text-center font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading lg:text-xx-large-heading">
             {/* Baseline 22112-872308: stacked lines; md+ single line; lg 20711-14231: 40/52, max 693px */}
             <span className="flex flex-col md:hidden">
               {useCasesHeadingLines.map((line, index) => (
@@ -52,7 +52,7 @@ export function RelatedArticlesView({
           </h2>
         ) : (
           <h2
-            className={`text-center text-[32px] font-medium leading-[110%] lg:text-[44px] ${
+            className={`text-center font-medium text-[32px] leading-[110%] lg:text-medium-display ${
               headingSurface === "onLight"
                 ? "text-[var(--color-content-default-primary)]"
                 : "text-[var(--color-content-inverse-primary)]"

app/components/sections/Stats/Stats.view.tsx

@@ -37,7 +37,7 @@ function StatsView({
       <div className="mx-auto flex w-full max-w-[1440px] flex-col items-start gap-[var(--spacing-scale-010)] sm:gap-[var(--spacing-scale-032)]">
         <h2
           id={headingId}
-          className="max-w-[116px] font-inter text-[24px] font-normal leading-[32px] md:text-[length:var(--spacing-scale-016)] md:leading-[length:var(--spacing-scale-020)] md:translate-y-24 lg:translate-y-0"
+          className="max-w-[116px] text-x-large-paragraph md:text-[length:var(--spacing-scale-016)] md:leading-[length:var(--spacing-scale-020)] md:translate-y-24 lg:translate-y-0"
         >
           <span className="-mb-1 block whitespace-nowrap md:-mb-0 md:inline md:whitespace-normal md:leading-[inherit]">
             {titlePrefix ? (