refactor(layout): make nav height truly self-referential

Improvements to the fixed nav spacing system:

1. Define nav heights as CSS variables in :root (globals.css):
   - --app-nav-height-full: 72px
   - --app-nav-height-minimal: 92px

2. Nav components reference and use these variables:
   - Set --app-nav-height to the appropriate variant
   - Use min-height based on the variable (circular reference)

3. Changed PageWithNav from padding to margin:
   - Prevents background gap under nav
   - Backgrounds now properly extend under the fixed nav

Single source of truth: Change values in globals.css and everything
updates automatically - both the nav sizing and the content spacing.

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

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

apps/web/src/app/globals.css

@@ -3,6 +3,13 @@
 /* Import Panda CSS generated styles */
 @import "../../styled-system/styles.css";
 
+/* Layout variables */
+:root {
+  /* Navigation bar heights - used by both the nav itself and content padding */
+  --app-nav-height-full: 72px;
+  --app-nav-height-minimal: 92px;
+}
+
 /* Custom global styles */
 body {
   font-family:

apps/web/src/components/AppNavBar.tsx

@@ -495,8 +495,10 @@ function MinimalNav({
         justifyContent: 'center',
         alignItems: 'flex-start',
         pointerEvents: 'none',
-        // Set CSS variable for minimal nav height (top offset + approx button height)
-        ['--app-nav-height' as any]: '92px',
+        // Set active nav height for content to use
+        ['--app-nav-height' as any]: 'var(--app-nav-height-minimal)',
+        // Use the variable for min-height to ensure consistency
+        minHeight: 'var(--app-nav-height-minimal)',
       }}
     >
       {/* Hamburger Menu - positioned absolutely on left */}
@@ -610,8 +612,10 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
     <Tooltip.Provider delayDuration={200}>
       <header
         style={{
-          // Set CSS variable for full nav height
-          ['--app-nav-height' as any]: '72px',
+          // Set active nav height for content to use
+          ['--app-nav-height' as any]: 'var(--app-nav-height-full)',
+          // Use the variable for min-height to ensure consistency
+          minHeight: 'var(--app-nav-height-full)',
         }}
         className={css({
           bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',

apps/web/src/components/PageWithNav.tsx

@@ -215,7 +215,7 @@ export function PageWithNav({
       <AppNavBar navSlot={navContent} />
       <div
         style={{
-          paddingTop: 'var(--app-nav-height, 80px)',
+          marginTop: 'var(--app-nav-height, 80px)',
         }}
       >
         {children}