chore: Update typography in contacts page

app/javascript/dashboard/components-next/Contacts/ContactsCard/AddContactNote.vue

@@ -48,7 +48,7 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <div class="flex flex-col items-start gap-4 py-3">
     <span
-      class="py-1 text-sm font-medium text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
+      class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
     >
       <Icon
         icon="i-lucide-file-plus-corner"

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue

@@ -166,7 +166,7 @@ defineExpose({
 
     <div class="flex flex-col items-start gap-4 pt-2 pb-3">
       <span
-        class="py-1 text-sm font-medium text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
+        class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
       >
         <Icon
           icon="i-lucide-settings-2"
@@ -288,7 +288,7 @@ defineExpose({
 
     <div class="flex flex-col items-start gap-4 py-2">
       <span
-        class="py-1 text-sm font-medium text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
+        class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
       >
         <Icon
           icon="i-lucide-globe"

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -176,7 +176,7 @@ const handleAvatarHover = isHovered => {
         </div>
 
         <h4
-          class="text-sm my-0 capitalize hover:cursor-pointer truncate text-n-slate-12 font-medium lg:max-w-40"
+          class="text-heading-3 my-0 capitalize hover:cursor-pointer truncate text-n-slate-12 lg:max-w-40"
           @click="onClickViewDetails"
         >
           {{ name }}
@@ -229,14 +229,14 @@ const handleAvatarHover = isHovered => {
 
         <div
           v-if="companyName"
-          class="text-xs my-0 capitalize h-6 px-1 inline-flex items-center gap-1 rounded-md text-n-slate-12 font-440 max-w-40 min-w-0 outline outline-1 outline-n-weak"
+          class="my-0 capitalize h-6 px-1 inline-flex items-center gap-1 rounded-md text-n-slate-12 max-w-40 min-w-0 outline outline-1 outline-n-weak"
           :class="{ 'lg:hidden': isExpanded }"
         >
           <Icon
             icon="i-lucide-briefcase-business"
             class="size-3.5 flex-shrink-0 text-n-slate-11"
           />
-          <span class="truncate">{{ companyName }}</span>
+          <span class="truncate text-label-small">{{ companyName }}</span>
         </div>
 
         <div
@@ -247,14 +247,14 @@ const handleAvatarHover = isHovered => {
 
         <span
           v-if="countryDetails"
-          class="inline-flex items-center gap-2 text-sm min-w-0 text-n-slate-11"
+          class="inline-flex items-center gap-2 min-w-0 text-n-slate-11"
           :class="{ 'lg:hidden': isExpanded }"
         >
           <Flag
             :country="countryDetails.countryCode"
             class="size-3.5 flex-shrink-0"
           />
-          <span class="truncate">{{ formattedLocation }}</span>
+          <span class="truncate text-label-small">{{ formattedLocation }}</span>
         </span>
 
         <div
@@ -289,7 +289,7 @@ const handleAvatarHover = isHovered => {
             icon="i-woot-mail"
             class="size-4 flex-shrink-0 text-n-slate-11"
           />
-          <span class="text-sm text-n-slate-12 font-420 truncate">
+          <span class="text-body-main text-n-slate-12 truncate">
             {{ email }}
           </span>
         </div>
@@ -311,7 +311,7 @@ const handleAvatarHover = isHovered => {
             icon="i-lucide-phone"
             class="size-3 flex-shrink-0 text-n-slate-11"
           />
-          <span class="text-sm text-n-slate-12 font-420 truncate">
+          <span class="text-body-main text-n-slate-12 truncate">
             {{ phoneNumber }}
           </span>
         </div>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -36,7 +36,7 @@ const emit = defineEmits([
     <div
       class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[105rem] after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
     >
-      <span class="text-xl font-medium truncate text-n-slate-12">
+      <span class="text-lg leading-6 font-520 truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
       <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">