perf(fonts): migra para next/font/google e elimina FOUT

- Usa next/font/google para carregar Inter e JetBrains Mono
- Remove @font-face manuais do globals.css
- Corrige variaveis CSS confusas (--font-geist-* com 4 hifens)
- Remove duplicacao de @layer base
- Fontes agora sao otimizadas automaticamente (WOFF2, subset, preload)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/globals.css

@@ -3,67 +3,46 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@font-face {
-  font-family: "InterVariable";
-  src: url("/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "InterVariable";
-  src: url("/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
-  font-weight: 100 900;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* JetBrains Mono agora depende das fontes do sistema para evitar carregar um arquivo corrompido */
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-inter);
-  --font-mono: var(--font-geist-mono);
+  --font-mono: var(--font-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
+  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
+  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
+  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
+  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
+  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
+  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
+  --color-ring: var(--ring);
-  --color-input: var(--input);
+  --color-input: var(--input);
-  --color-border: var(--border);
+  --color-border: var(--border);
-  --color-destructive: var(--destructive);
+  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
+  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
+  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
+  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
+  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
+  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
+  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
+  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
+  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
+  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
+  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
+  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) + 4px);
-  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-foreground: var(--destructive-foreground);
-  --font-geist-mono: var(----font-geist-mono);
+}
-  --font-geist-sans: var(----font-geist-sans);
-  --radius: var(----radius);
-}
 
 :root {
   --radius: 0.75rem;
@@ -99,8 +78,6 @@
   --sidebar-border: #cbd5e1;
   --sidebar-ring: #00d6eb;
   --destructive-foreground: oklch(1 0 0);
-  --font-geist-sans: "InterVariable", "Inter", sans-serif;
-  --font-geist-mono: "JetBrains Mono", "Fira Code", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 .dark {
@@ -255,12 +232,3 @@
     animation: recent-ticket-enter 0.45s ease-out;
   }
 }
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

src/app/layout.tsx

@@ -1,11 +1,24 @@
 import { ensurePerformanceMeasurePatched } from "@/lib/performance-measure-polyfill"
 import type { Metadata } from "next"
+import { Inter, JetBrains_Mono } from "next/font/google"
 import "./globals.css"
 import { ConvexClientProvider } from "./ConvexClientProvider"
 import { AuthProvider } from "@/lib/auth-client"
 import { Toaster } from "@/components/ui/sonner"
 import { ChatWidgetProvider } from "@/components/chat/chat-widget-provider"
 
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-inter",
+})
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-mono",
+})
+
 export const metadata: Metadata = {
   title: "Raven - Sistema de chamados",
   description: "Plataforma Raven da Rever",
@@ -31,7 +44,7 @@ export default async function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="pt-BR" className="h-full" suppressHydrationWarning>
+    <html lang="pt-BR" className={`${inter.variable} ${jetbrainsMono.variable} h-full`} suppressHydrationWarning>
       <body className="min-h-screen bg-background text-foreground antialiased">
         <ConvexClientProvider>
           <AuthProvider>