wip: Font and logo fixes in progress

- Reverted logo SVG to original viewBox
- Applied forum.variable to body for CSS variable
- Updated Save button to generate draft from conversation
- Logo size and font variables still need fixes

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

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

components/Navigation/DesktopSidebar.tsx

@@ -8,7 +8,7 @@
  * Highlights the active mode based on app state machine.
  */
 
-import { Stack, NavLink, Box, Text, Group, Image, Divider } from '@mantine/core';
+import { Stack, NavLink, Box, Title, Group, Divider, Text } from '@mantine/core';
 import { IconMessageCircle, IconEdit, IconChartBubbleFilled } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { useAppMachine } from '@/hooks/useAppMachine';
@@ -51,17 +51,17 @@ export function DesktopSidebar() {
       }}
     >
       <Stack gap="xs">
-        <Group gap="sm" mb="lg" align="center" wrap="nowrap">
-          <Box w={32} h={32} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <Image
-              src="/logo.svg"
-              alt="Ponderants logo"
-              style={{ width: '100%', height: '100%', transform: 'scale(1.5)' }}
-            />
-          </Box>
-          <Text fw={700} size="xl" style={{ lineHeight: 1 }}>
+        <Group gap="md" mb="lg" align="center" wrap="nowrap">
+          <img
+            src="/logo.svg"
+            alt="Ponderants logo"
+            width={48}
+            height={48}
+            style={{ flexShrink: 0, display: 'block' }}
+          />
+          <Title order={3} style={{ margin: 0 }}>
             Ponderants
-          </Text>
+          </Title>
         </Group>
 
         <NavLink

components/Navigation/MobileHeader.tsx

@@ -6,7 +6,7 @@
  * Fixed header for mobile devices showing the Ponderants logo.
  */
 
-import { Group, Image, Text, Paper, Box } from '@mantine/core';
+import { Group, Title, Paper } from '@mantine/core';
 
 export function MobileHeader() {
   return (
@@ -23,17 +23,17 @@ export function MobileHeader() {
         borderBottom: '1px solid #373A40',
       }}
     >
-      <Group gap="sm" align="center">
-        <Box w={32} h={32} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <Image
-            src="/logo.svg"
-            alt="Ponderants logo"
-            style={{ width: '100%', height: '100%', transform: 'scale(1.5)' }}
-          />
-        </Box>
-        <Text fw={700} size="lg">
+      <Group gap="md" align="center" wrap="nowrap">
+        <img
+          src="/logo.svg"
+          alt="Ponderants logo"
+          width={48}
+          height={48}
+          style={{ flexShrink: 0, display: 'block' }}
+        />
+        <Title order={3} style={{ margin: 0 }}>
           Ponderants
-        </Text>
+        </Title>
       </Group>
     </Paper>
   );