feat: add Panda CSS styling system with fonts and icons

Add @pandacss/dev, srjuggernaut-panda-preset, FontAwesome icons, and fonts to enable styling.
Update .gitignore to exclude styled-system directories.

src/routes/__root.tsx

@@ -1,4 +1,9 @@
 /// <reference types="vite/client" />
+
+import ORBITRON from '@fontsource/orbitron/900.css?url'
+import ROBOTO from '@fontsource-variable/roboto?url'
+import { config } from '@fortawesome/fontawesome-svg-core'
+import FONTAWESOME_STYLES from '@fortawesome/fontawesome-svg-core/styles.css?url'
 import {
   createRootRoute,
   HeadContent,
@@ -6,6 +11,9 @@ import {
   Scripts
 } from '@tanstack/react-router'
 import type { ReactNode } from 'react'
+import GLOBAL_CSS from '@/styles/global.css?url'
+
+config.autoAddCss = false
 
 export const Route = createRootRoute({
   head: () => ({
@@ -20,6 +28,24 @@ export const Route = createRootRoute({
       {
         title: 'Juggernaut Plays Blog'
       }
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: GLOBAL_CSS
+      },
+      {
+        rel: 'stylesheet',
+        href: ROBOTO
+      },
+      {
+        rel: 'stylesheet',
+        href: ORBITRON
+      },
+      {
+        rel: 'stylesheet',
+        href: FONTAWESOME_STYLES
+      }
     ]
   }),
   component: RootComponent

src/styles/global.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

src/styles/theme.ts

@@ -0,0 +1,19 @@
+import type { ThemeConfig } from '@srjuggernaut-dev/srjuggernaut-panda-preset'
+
+export const breakpoints = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  '2xl': 1400
+} satisfies ThemeConfig['breakpoints']
+
+export const themeConfig: ThemeConfig = {
+  neutral: 'slate',
+  colorVariation: { dark: true, alpha: false, p3: false },
+  includeColors: ['teal', 'slate'],
+  semanticColors: { primary: 'teal' },
+  breakpoints
+}
+
+export default themeConfig