fix(home): use Panda CSS token() for dynamic colors and center arrows properly

**Changes:**
- Use Panda CSS token() function for dynamic color references instead of inline hex values
- Fix arrow positioning to be centered in gap between progression stages
- Document Panda CSS dynamic token usage pattern

**Color Token Fix:**
Panda CSS css() requires static values at build time. For dynamic token references,
use the token() function with inline styles:
- Import: token from styled-system/tokens
- Usage: style={{ color: token(stage.color) }}
- Token paths marked as const for TypeScript literal types

**Arrow Positioning Fix:**
Arrows between stages were positioned based on element width, not gap width.
Now properly centered using:
- left: 100% (position at right edge)
- marginLeft: 0.5rem (half of 1rem gap)
- transform: translate(-50%, -50%) (center on that point)

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

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

apps/web/.claude/PANDA_CSS_DYNAMIC_TOKENS.md

@@ -0,0 +1,76 @@
+# Panda CSS Dynamic Token Usage
+
+## Problem: Dynamic Color Tokens Not Working
+
+When using Panda CSS, color tokens like `blue.400`, `purple.400`, etc. don't work when used dynamically through variables in the `css()` function.
+
+## Root Cause
+
+Panda CSS's `css()` function requires **static values at build time**. It cannot process dynamic token references like:
+
+```typescript
+// ❌ This doesn't work
+const color = 'blue.400'
+css({ color: color })  // Panda can't resolve this at build time
+```
+
+The `css()` function performs static analysis during the build process to generate CSS classes. It cannot handle runtime-dynamic token paths.
+
+## Solution: Use the `token()` Function
+
+Panda CSS provides a `token()` function specifically for resolving token paths to their actual values at runtime:
+
+```typescript
+import { token } from '../../styled-system/tokens'
+
+// ✅ This works
+const stages = [
+  { level: '10 Kyu', label: 'Beginner', color: 'colors.green.400' },
+  { level: '5 Kyu', label: 'Intermediate', color: 'colors.blue.400' },
+  { level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400' },
+  { level: 'Dan', label: 'Master', color: 'colors.amber.400' },
+] as const
+
+// Use with inline styles, not css()
+<div style={{ color: token(stage.color) }}>
+```
+
+## Important Notes
+
+1. **Use `as const`**: TypeScript needs the array marked as `const` so the token strings are treated as literal types, not generic strings. The `token()` function expects the `Token` literal type.
+
+2. **Use inline styles**: When using `token()`, apply colors via the `style` prop, not through the `css()` function:
+   ```typescript
+   // ✅ Correct
+   <div style={{ color: token(stage.color) }}>
+
+   // ❌ Won't work
+   <div className={css({ color: token(stage.color) })}>
+   ```
+
+3. **Static tokens in css()**: For static usage, you CAN use tokens directly in `css()`:
+   ```typescript
+   // ✅ This works because it's static
+   css({ color: 'blue.400' })
+   ```
+
+## How token() Works
+
+The `token()` function:
+- Takes a token path like `"colors.blue.400"`
+- Looks it up in the generated token registry (`styled-system/tokens/index.mjs`)
+- Returns the actual CSS value (e.g., `"#60a5fa"`)
+- Happens at runtime, not build time
+
+## Token Type Definition
+
+The `Token` type is a union of all valid token paths:
+```typescript
+type Token = "colors.blue.400" | "colors.green.400" | "colors.violet.400" | ...
+```
+
+This is defined in `styled-system/tokens/tokens.d.ts`.
+
+## Reference Implementation
+
+See `src/app/page.tsx` lines 404-434 for a working example of dynamic token usage in the "Your Journey" section.

apps/web/src/app/page.tsx

@@ -6,6 +6,7 @@ import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
 import { getTutorialForEditor } from '@/utils/tutorialConverter'
 import { css } from '../../styled-system/css'
 import { container, grid, hstack, stack } from '../../styled-system/patterns'
+import { token } from '../../styled-system/tokens'
 
 export default function HomePage() {
   // Extract just the "Friends of 5" step (2+3=5) for homepage demo
@@ -400,12 +401,14 @@ export default function HomePage() {
                   flexWrap: 'wrap',
                 })}
               >
-                {[
-                  { level: '10 Kyu', label: 'Beginner', color: '#4ade80' },
-                  { level: '5 Kyu', label: 'Intermediate', color: '#60a5fa' },
-                  { level: '1 Kyu', label: 'Advanced', color: '#a78bfa' },
-                  { level: 'Dan', label: 'Master', color: '#fbbf24' },
-                ].map((stage, i) => (
+                {(
+                  [
+                    { level: '10 Kyu', label: 'Beginner', color: 'colors.green.400' },
+                    { level: '5 Kyu', label: 'Intermediate', color: 'colors.blue.400' },
+                    { level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400' },
+                    { level: 'Dan', label: 'Master', color: 'colors.amber.400' },
+                  ] as const
+                ).map((stage, i) => (
                   <div
                     key={i}
                     className={stack({
@@ -415,15 +418,31 @@ export default function HomePage() {
                       position: 'relative',
                     })}
                   >
-                    <div style={{ fontSize: '20px', fontWeight: 'bold', color: stage.color }}>
+                    <div
+                      className={css({
+                        fontSize: 'xl',
+                        fontWeight: 'bold',
+                      })}
+                      style={{ color: token(stage.color) }}
+                    >
                       {stage.level}
                     </div>
-                    <div style={{ fontSize: '14px', color: '#e5e7eb' }}>{stage.label}</div>
+                    <div
+                      className={css({
+                        fontSize: 'sm',
+                        color: 'gray.300',
+                      })}
+                    >
+                      {stage.label}
+                    </div>
                     {i < 3 && (
                       <div
                         style={{
                           position: 'absolute',
-                          right: '-50%',
+                          left: '100%',
+                          marginLeft: '0.5rem',
+                          top: '50%',
+                          transform: 'translate(-50%, -50%)',
                           fontSize: '20px',
                           color: '#9ca3af',
                         }}