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/modals/Alert/Alert.container.tsx

@@ -28,17 +28,17 @@ function layoutFor(
       return {
         containerClasses,
         titleClasses:
-          "font-inter text-[14px] leading-[18px] font-medium tracking-[0%]",
+          "text-[14px] leading-[18px] font-medium tracking-[0%]",
         descriptionClasses:
-          "font-inter text-[14px] leading-[20px] font-normal tracking-[0%] mt-[var(--spacing-scale-004)]",
+          "text-small-paragraph mt-[var(--spacing-scale-004)]",
       };
     }
     return {
       containerClasses,
       titleClasses:
-        "font-inter text-[18px] leading-[24px] font-medium tracking-[0%]",
+        "text-large-label",
       descriptionClasses:
-        "font-inter text-[18px] leading-[1.3] font-normal tracking-[0%] mt-[var(--spacing-scale-004)]",
+        "text-large-paragraph mt-[var(--spacing-scale-004)]",
     };
   }
 
@@ -46,19 +46,19 @@ function layoutFor(
     return {
       containerClasses:
         "flex gap-[var(--space-300)] items-center p-[var(--space-300)] rounded-[var(--radius-200,8px)] border-solid",
-      titleClasses:
-        "font-inter text-[14px] leading-[18px] font-medium tracking-[0%]",
+        titleClasses:
+        "text-[14px] leading-[18px] font-medium tracking-[0%]",
       descriptionClasses:
-        "font-inter text-[14px] leading-[20px] font-normal tracking-[0%] mt-[var(--spacing-scale-004)]",
+        "text-small-paragraph mt-[var(--spacing-scale-004)]",
     };
   }
   return {
     containerClasses:
       "flex gap-[var(--space-300)] items-center px-[var(--space-600)] py-[var(--space-400)] rounded-[var(--radius-200,8px)] border-solid",
     titleClasses:
-      "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]",
+      "text-medium-label",
     descriptionClasses:
-      "font-inter text-[16px] leading-[24px] font-normal tracking-[0%] mt-[var(--spacing-scale-004)]",
+      "text-medium-paragraph mt-[var(--spacing-scale-004)]",
   };
 }
 

app/components/modals/AskOrganizerInquiry/AskOrganizerInquiryModal.view.tsx

@@ -76,7 +76,7 @@ export function AskOrganizerInquiryModalView({
       belowCard={
         <Link
           href="/"
-          className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
+          className="text-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
           onClick={() => onClose()}
         >
           {copy.backToHome}
@@ -85,10 +85,10 @@ export function AskOrganizerInquiryModalView({
     >
       {success ? (
         <div className="flex flex-col gap-3 py-2">
-          <p className="font-inter text-[18px] font-semibold leading-[24px] text-[var(--color-content-default-primary)]">
+          <p className="text-large-label text-[var(--color-content-default-primary)]">
             {copy.successTitle}
           </p>
-          <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)]">
+          <p className="text-small-paragraph text-[var(--color-content-default-secondary)]">
             {copy.successDescription}
           </p>
         </div>
@@ -102,7 +102,7 @@ export function AskOrganizerInquiryModalView({
           {formError ? (
             <p
               role="alert"
-              className="font-inter text-[14px] leading-[20px] text-[var(--color-border-default-negative-primary)]"
+              className="text-small-paragraph text-[var(--color-border-default-negative-primary)]"
             >
               {formError}
             </p>

app/components/modals/Login/LoginForm.tsx

@@ -244,7 +244,7 @@ export default function LoginForm({
               id={emailErrorId}
               role="alert"
               aria-live="polite"
-              className="font-inter text-[14px] text-[var(--color-border-default-utility-negative)]"
+              className="text-[14px] text-[var(--color-border-default-utility-negative)]"
             >
               {emailError}
             </p>
@@ -259,7 +259,7 @@ export default function LoginForm({
           >
             {t("sendMagicLink")}
           </Button>
-          <p className="text-center font-inter text-[14px] leading-[20px] text-[var(--color-content-default-tertiary)]">
+          <p className="text-center text-small-paragraph text-[var(--color-content-default-tertiary)]">
             {t("legalPrefix")}
             <Link
               href={tFooter("legal.termsOfServiceHref")}

app/components/modals/Share/Share.view.tsx

@@ -46,7 +46,7 @@ function ShareChannelTile({ label, onClick, circleClassName, icon }: ShareChanne
       >
         {icon}
       </div>
-      <span className="max-w-[4.5rem] text-center font-inter text-[12px] font-medium leading-4 text-[var(--color-content-default-tertiary)]">
+      <span className="max-w-[4.5rem] text-center text-x-small-label text-[var(--color-content-default-tertiary)]">
         {label}
       </span>
     </button>

app/components/modals/Tooltip/Tooltip.view.tsx

@@ -20,7 +20,7 @@ export function TooltipView({
       aria-live="polite"
       id={`tooltip-${text.replace(/\s+/g, "-").toLowerCase()}`}
     >
-      <p className="font-inter text-[var(--sizing-350,14px)] leading-[16px] font-medium tracking-[0%] text-[var(--color-content-default-primary)] relative shrink-0">
+      <p className="text-small-label text-[var(--color-content-default-primary)] relative shrink-0">
         {text}
       </p>
       <div