fix: Polish settings pages — display font, status tokens, spacing

Apply font-display to headings across settings layout and health page.
Replace text-destructive with text-status-error-fg for consistency with
the design system status tokens. Increase projects page section spacing
from space-y-4 to space-y-6.

apps/web/src/routes/settings.tsx

@@ -13,7 +13,7 @@ function SettingsLayout() {
   return (
     <div className="mx-auto max-w-4xl space-y-4">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
+        <h1 className="font-display text-2xl font-bold tracking-tight">Settings</h1>
       </div>
       <nav className="flex gap-1 border-b border-border">
         {settingsTabs.map((tab) => (

apps/web/src/routes/settings/health.tsx

@@ -65,8 +65,8 @@ function HealthCheckPage() {
   if (isError) {
     return (
       <div className="flex flex-col items-center justify-center gap-4 py-12">
-        <XCircle className="h-8 w-8 text-destructive" />
+        <XCircle className="h-8 w-8 text-status-error-fg" />
-        <p className="text-sm text-destructive">
+        <p className="text-sm text-status-error-fg">
           Failed to load health check: {error?.message ?? 'Unknown error'}
         </p>
         <Button variant="outline" size="sm" onClick={() => void refetch()}>
@@ -97,7 +97,7 @@ function HealthCheckPage() {
       {/* Server Status */}
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-lg">
+          <CardTitle className="flex items-center gap-2 font-display text-lg">
             <Server className="h-5 w-5" />
             Server Status
           </CardTitle>
@@ -124,7 +124,7 @@ function HealthCheckPage() {
 
       {/* Accounts */}
       <div className="space-y-3">
-        <h2 className="text-lg font-semibold">Accounts</h2>
+        <h2 className="font-display text-lg font-semibold">Accounts</h2>
         {accounts.length === 0 ? (
           <Card>
             <CardContent className="py-6">
@@ -154,7 +154,7 @@ function HealthCheckPage() {
 
       {/* Projects */}
       <div className="space-y-3">
-        <h2 className="text-lg font-semibold">Projects</h2>
+        <h2 className="font-display text-lg font-semibold">Projects</h2>
         {projects.length === 0 ? (
           <Card>
             <CardContent className="py-6">
@@ -170,7 +170,7 @@ function HealthCheckPage() {
                 {project.repoExists ? (
                   <CheckCircle2 className="h-5 w-5 shrink-0 text-status-success-dot" />
                 ) : (
-                  <XCircle className="h-5 w-5 shrink-0 text-destructive" />
+                  <XCircle className="h-5 w-5 shrink-0 text-status-error-fg" />
                 )}
                 <div className="min-w-0 flex-1">
                   <p className="text-sm font-medium">{project.name}</p>

apps/web/src/routes/settings/projects.tsx

@@ -33,7 +33,7 @@ function ProjectsSettingsPage() {
 
   if (isLoading) {
     return (
-      <div className="space-y-4">
+      <div className="space-y-6">
         <Skeleton className="h-9 w-36" />
         <Skeleton className="h-24 w-full" />
         <Skeleton className="h-24 w-full" />
@@ -42,7 +42,7 @@ function ProjectsSettingsPage() {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
       <div className="flex justify-end">
         <Button size="sm" onClick={() => setRegisterOpen(true)}>
           <Plus className="mr-2 h-4 w-4" />