refactor: replace Google Fonts with FontSource packages and migrate to cn utility

- Replace Google Fonts CDN with self-hosted FontSource packages
- Add @fontsource-variable/inter for variable Inter font
- Add @fontsource/ibm-plex-mono with weight 400 for monospace font
- Create src/lib/utils.ts with shadcn's cn utility function
- Install tailwind-merge for intelligent Tailwind class merging
- Replace all clsx usages with cn utility across components
  - LookupInput.tsx: 7 replacements
  - ErrorCard.tsx: 1 replacement
  - Property.tsx: 2 replacements
- Remove Google Fonts URL import from globals.css

src/components/common/ErrorCard.tsx

@@ -1,6 +1,6 @@
 import type { FunctionComponent, ReactNode } from "react";
 import { XCircleIcon } from "@heroicons/react/20/solid";
-import clsx from "clsx";
+import { cn } from "@/lib/utils";
 
 export type ErrorCardProps = {
   title: ReactNode;
@@ -17,7 +17,7 @@ const ErrorCard: FunctionComponent<ErrorCardProps> = ({
 }) => {
   return (
     <div
-      className={clsx(
+      className={cn(
         className,
         "rounded-md border border-red-700/30 bg-zinc-800 px-3 pb-1 pt-3"
       )}

src/components/common/Property.tsx

@@ -1,6 +1,6 @@
 import type { FunctionComponent, ReactNode } from "react";
 import React from "react";
-import clsx from "clsx";
+import { cn } from "@/lib/utils";
 
 type PropertyProps = {
   title: string | ReactNode;
@@ -17,8 +17,8 @@ const Property: FunctionComponent<PropertyProps> = ({
 }) => {
   return (
     <>
-      <dt className={clsx("font-medium", titleClass)}>{title}:</dt>
-      <dd className={clsx("mb-2 ml-6 mt-2", valueClass)}>{children}</dd>
+      <dt className={cn("font-medium", titleClass)}>{title}:</dt>
+      <dd className={cn("mb-2 ml-6 mt-2", valueClass)}>{children}</dd>
     </>
   );
 };

src/components/form/LookupInput.tsx

@@ -17,7 +17,7 @@ import {
   ListboxOption,
   Transition,
 } from "@headlessui/react";
-import clsx from "clsx";
+import { cn } from "@/lib/utils";
 import type { Maybe } from "true-myth";
 import { placeholders } from "@/constants";
 
@@ -121,7 +121,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
     <>
       <button
         type="submit"
-        className={clsx({
+        className={cn({
           "absolute inset-y-0 left-0 flex items-center pl-3": true,
           "pointer-events-none": isLoading,
         })}
@@ -143,7 +143,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
 
   const searchInput = (
     <input
-      className={clsx(
+      className={cn(
         "lg:py-4.5 block w-full rounded-l-md border border-transparent",
         "bg-zinc-700 py-2 pl-10 pr-1.5 text-sm placeholder-zinc-400 placeholder:translate-y-2 focus:text-zinc-200",
         " focus:outline-hidden sm:text-sm md:py-3 md:text-base lg:text-lg"
@@ -182,7 +182,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
     >
       <div className="relative">
         <ListboxButton
-          className={clsx(
+          className={cn(
             "relative h-full w-full cursor-default whitespace-nowrap rounded-r-lg bg-zinc-700 py-2 pl-1 pr-10 text-right",
             "text-xs focus:outline-hidden focus-visible:border-indigo-500 sm:text-sm md:text-base lg:text-lg",
             "focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 "
@@ -227,7 +227,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
           leaveTo="opacity-0"
         >
           <ListboxOptions
-            className={clsx(
+            className={cn(
               "scrollbar-thin absolute right-0 mt-1 max-h-60 min-w-full overflow-auto rounded-md bg-zinc-700 py-1",
               "text-zinc-200 shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
             )}
@@ -236,7 +236,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
               <ListboxOption
                 key={key}
                 className={({ focus }) =>
-                  clsx(
+                  cn(
                     "relative cursor-default select-none py-2 pl-10 pr-4",
                     focus ? "bg-zinc-800 text-zinc-300" : null
                   )
@@ -246,7 +246,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
                 {({ selected }) => (
                   <>
                     <span
-                      className={clsx(
+                      className={cn(
                         "block whitespace-nowrap text-right text-xs md:text-sm lg:text-base",
                         selected ? "font-medium" : null
                       )}