fix(styles): define font-heading class in Tailwind config

- Add fontFamily.heading to theme.extend in tailwind.config.ts
  ('font-heading' was a no-op class — CardTitle and DialogTitle had
   no applied font-family, silently falling back to browser default)
- Add --font-heading CSS variable to :root in globals.css
  (defaults to Inter — easy to override system-wide with one change)
- font-heading is used in components/ui/card.tsx (CardTitle)
  and components/ui/dialog.tsx (DialogTitle)

Author: therealjhay

app/globals.css

@@ -24,6 +24,11 @@
    * - Brand Logos: Background wrappers for external logos that require specific contrast.
    */
   :root {
+    /* ── Font tokens ── */
+    /* font-heading resolves the Tailwind `font-heading` utility (card.tsx, dialog.tsx).
+       Defaults to Inter — override this variable to swap in a display font globally. */
+    --font-heading: "Inter", system-ui, sans-serif;
+
     /* ── Shadow tokens ── */
     --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
     --shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);

tailwind.config.ts

@@ -88,6 +88,12 @@ const config: Config = {
         "nav-bottom": "var(--shadow-nav-bottom)",
         "surface-xl": "var(--shadow-xl)",
       },
+      fontFamily: {
+        // Resolves the `font-heading` utility used in card.tsx and dialog.tsx.
+        // Reads from the --font-heading CSS variable set in globals.css (Inter),
+        // with a safe system-ui fallback.
+        heading: ["var(--font-heading)", "system-ui", "sans-serif"],
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],