Migrate inline styles to vanilla-extract for non-chart components

Summary

Set up vanilla-extract (zero-runtime, type-safe CSS) and migrate inline styles from non-chart components. Charts use Recharts prop-based styling and don't benefit from VE — this targets the 75+ components with substantial inline style={{}} blocks.

Motivation

• Inline styles can't be statically extracted, meaning larger JS bundles and no caching of styles
• vanilla-extract compiles to static CSS at build time with full TypeScript support
• Design tokens (colors, spacing, typography) can be enforced via createThemeContract

Scope

Setup

• Install @vanilla-extract/css and @vanilla-extract/vite-plugin
• Add vanillaExtractPlugin() to app/vite.config.ts
• Create app/src/styles/theme.css.ts with createThemeContract from existing design tokens

Migration targets (by impact)

Start with components that have the heaviest inline styles:

• Layout components (StandardLayout, PathwayLayout, AppLayout, StaticLayout)
• Modal components (RenameIngredientModal, etc.)
• Page shells and navigation
• Form components
• Card/list item components

Out of scope

• Recharts chart components (use prop-based styling — see #663)
• Mantine component overrides (use Mantine theme)

Approach

Co-locate .css.ts files with their components:

src/components/
  StandardLayout.tsx
  StandardLayout.css.ts    ← new

Context

Related: #663 (Recharts migration) established shared chart components with inline style constants (TOOLTIP_STYLE). That pattern is correct for SVG charts but doesn't scale for DOM-heavy components.

Start with app/vite.config.ts and inspect the existing design tokens before creating app/src/styles/theme.css.ts. Then review the inline style blocks in the named layout, modal, page-shell, navigation, form, and card/list components, excluding Recharts and Mantine overrides. Done means vanilla-extract is configured and the targeted non-chart components use co-located .css.ts styles.