style(ui): polished typography and switched webfonts to woff2

- Switched bundled browser font references from TTF to WOFF2 and enabled optical sizing.
- Refined heading hierarchy, text wrapping, mobile controls, and numeric alignment.
- Polished notification badges, button underlines, and ligature rendering.

apps/remix/app/components/general/app-header.tsx

@@ -71,7 +71,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
             <InboxIcon className="h-5 w-5 flex-shrink-0 text-muted-foreground transition-colors hover:text-foreground" />
 
             {unreadCountData && unreadCountData.count > 0 && (
-              <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary font-semibold text-[10px] text-primary-foreground">
+              <span className="absolute -top-1.5 -right-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 font-semibold text-primary-foreground text-xs tabular-nums leading-none">
                 {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
               </span>
             )}

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -94,7 +94,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
             >
               {text}
               {href === '/inbox' && unreadCountData && unreadCountData.count > 0 && (
-                <span className="flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-primary px-1.5 font-semibold text-primary-foreground text-xs">
+                <span className="flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-primary px-1.5 font-semibold text-primary-foreground text-xs tabular-nums">
                   {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
                 </span>
               )}

apps/remix/app/components/general/metric-card.tsx

@@ -29,7 +29,7 @@ export const CardMetric = ({ icon: Icon, title, value, className, children }: Ca
         </div>
 
         {children || (
-          <p className="mt-auto font-semibold text-4xl text-foreground leading-8">
+          <p className="mt-auto font-semibold text-4xl text-foreground tabular-nums leading-8">
             {typeof value === 'number' ? value.toLocaleString('en-US') : value}
           </p>
         )}

apps/remix/app/components/general/settings-header.tsx

@@ -13,10 +13,12 @@ export const SettingsHeader = ({ children, title, subtitle, className, hideDivid
   return (
     <>
       <div className={cn('flex flex-row items-center justify-between', className)}>
-        <div>
-          <h3 className="font-medium text-lg">{title}</h3>
+        <div className="min-w-0">
+          <h3 className="font-medium text-lg leading-tight [text-wrap:balance]">{title}</h3>
 
-          <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
+          <p className="mt-1 max-w-[65ch] text-muted-foreground text-sm leading-normal [overflow-wrap:break-word] [text-wrap:pretty] md:mt-2">
+            {subtitle}
+          </p>
         </div>
 
         {children}