feat(ui): token foundation and Cooklang palette, existing layout kept

CLAUDE.md

@@ -186,9 +186,9 @@ The web UI uses server-side rendering with Askama templates:
 
 ### Styling
 - Tailwind CSS for utility-first styling
-- Custom components defined in `static/css/input.css`
+- Custom components defined in `static/css/components.css`
 - Compiled CSS output in `static/css/output.css`
-- Configuration in `tailwind.config.js`
+- Tailwind is configured in `static/css/input.css` (`@source`, `@custom-variant`, `@theme`); components live in `static/css/components.css`
 
 ### Key Templates
 - `base.html` - Common layout with navigation and search
@@ -206,14 +206,18 @@ The web UI uses server-side rendering with Askama templates:
 - **Responsive Design**: Mobile-friendly layout with Tailwind
 
 ### CSS Component Classes
-Custom Tailwind components for consistent styling:
-- `.recipe-card` - Recipe cards with gradient top border
-- `.ingredient-badge` - Orange gradient badges for ingredients
-- `.cookware-badge` - Green gradient badges for cookware
-- `.timer-badge` - Red gradient badges for timers
-- `.metadata-pill` - Clean outline badges for metadata
-- `.nav-pill` - Navigation items with hover effects
-- `.step-number` - Circular step numbers with gradient
+Component classes live in `static/css/components.css` and resolve every colour through the tokens in `static/css/input.css`:
+- `.card` / `.card-head` - Bordered surface with hairline and 6px radius
+- `.btn`, `.btn-primary`, `.btn-danger`, `.btn-sm` - 40px controls (32px compact); one accent-filled primary per view
+- `.icon-btn` - 36px icon-only control
+- `.nav-card`, `.nav-pill`, `.menu-item` - Navigation card, pills, and small-screen menu rows
+- `.recipe-card`, `.recipe-card-icon`, `.recipe-card-title` - Index cards with a flat icon disc
+- `.ingredient-badge`, `.cookware-badge`, `.timer-badge` - Inline recipe entities (tint, dotted underline, chip)
+- `.metadata-pill`, `.tag` - Neutral bordered pills
+- `.step-box`, `.step-number`, `.step-body`, `.step-refs` - Boxed recipe steps
+- `.ingredient-row`, `.row`, `.row-value`, `.row-note` - List rows
+- `.pantry-item`, `.pantry-actions`, `.item-status-dot` - Pantry blocks and stock state
+- `.stepper`, `.select`, `.search-input` - Form controls
 
 ## Testing Approach
 
@@ -260,10 +264,10 @@ Output formatting is centralized in `src/util/` modules. Each format has its own
 4. Add route in the UI router
 
 ### Modifying Styles
-1. Edit component classes in `static/css/input.css`
+1. Edit component classes in `static/css/components.css`
 2. Run `make css` or `npm run build-css` to compile
 3. For development, use `npm run watch-css` for auto-rebuild
-4. Custom colors and utilities can be added to `tailwind.config.js`
+4. Custom colors and utilities can be added to `static/css/input.css` (`@theme`) and component classes to `static/css/components.css`
 
 ### Frontend Development Workflow
 1. Install dependencies: `npm install`

CONTRIBUTING.md

@@ -142,13 +142,13 @@ Custom component classes:
 │   └── recipe.html     # Single recipe view
 ├── static/             # Static assets
 │   └── css/
-│       ├── input.css   # Tailwind input with custom classes
-│       └── output.css  # Compiled CSS (generated)
+│       ├── input.css      # Tailwind config (@source, @custom-variant, @theme) and tokens
+│       ├── components.css # Component classes (.card, .btn, .nav-pill, ...)
+│       └── output.css     # Compiled CSS (generated)
 ├── src/server/
 │   ├── mod.rs         # Server setup and routing
 │   ├── ui.rs          # UI request handlers
 │   └── templates.rs   # Template data structures
-├── tailwind.config.js  # Tailwind configuration
 └── package.json        # NPM dependencies
 ```