Design tokens first attempt

[lmac-1]

Description

This PR turns the designer's Figma tokens into Tailwind classes, so components can use the design system's colours, spacing, radius, borders and text styles. Nothing in the app looks different yet: the classes only apply where a component uses them.

• cd assets && npm run design-tokens reads the Figma exports (Light.tokens.json, Static.tokens.json, unedited) and writes assets/css/design-tokens.css, which app.css imports.
• Every class starts with ds-: bg-ds-action-primary, p-ds-sm, rounded-ds-md, text-ds-type-body-md. assets/design-tokens/README.md has the naming table and how to update the tokens.
• cn() knows the ds- classes. It keeps a text style next to a text colour, and a ds- class replaces the stock one it overlaps (cn('p-4', 'p-ds-sm') gives p-ds-sm).

Closes CON-327

Validation steps

1. Run cd assets && npm run design-tokens. It rewrites css/design-tokens.css, and git status shows no change. Any token it had to drop is printed as a warning with the reason.
2. Read assets/design-tokens/README.md and check the naming table makes sense.
3. Add bg-ds-action-primary p-ds-sm rounded-ds-md to any element in a template. It gets the indigo background, 16px padding and 8px radius. Remove it again.
4. Click through a few pages, such as Projects and History. Nothing looks different.
5. Run cd assets && npm test -- design-tokens.

Additional notes for the reviewer

1. The structure of the script and cn() modification may evolve as tokens change. They are still moving.
2. Only the Light and Static exports are read. Dark mode tokens aren't part of this PR.
3. Every class has the ds- prefix so a token can never clash with or redefine a stock Tailwind class.
4. Each token only becomes the utility it's for: a background token makes bg-ds-* and not text-ds-*.
5. space/ and gap/ are different scales in Figma: space/xs is 8px and gap/xs is 4px. The classes keep Figma's names. Tailwind's gap-* falls back to the spacing scale, so gap-ds-xl (not a gap token) quietly uses space/xl. This is waiting on the designer: if the scales merge or share step names, it goes away.
6. The words type, width and weight in class names are deliberate. They let cn() tell a text style from a text colour, and a border width from a border colour.
7. Text styles set their font too (text-ds-type-code is Fira Code). Tailwind's text-* can't set a font, so the build writes a same-named @utility for each style. The font tokens reuse the app's Inter var and Fira Code VF stacks so no second set of font files loads. Sora isn't loaded yet, so display styles fall back to Inter.
8. The generated CSS is committed, and design-tokens.test.ts fails if it doesn't match what the script writes. .prettierignore skips the exports and the CSS so formatting can't break that check.
9. We could move this CSS into the build output but for now it's in the project while it's still moving.

AI Usage

Please disclose whether you've used AI anywhere in this PR (it's cool, we just
want to know!):

• I have used Claude Code
• I have used another model
• I have not used AI

You can read more details in our
Responsible AI Policy

Pre-submission checklist

• I have performed an AI review of my code (we recommend using /review
  with Claude Code)
• I have implemented and tested all related authorization policies.
  (e.g., :owner, :admin, :editor, :viewer)
• I have updated the changelog.
• I have ticked a box in "AI usage" in this PR

[github-actions]

Security Review ✅

• S0 (project scoping): N/A — PR touches only design-token assets, Tailwind config, and the cn() class-merge helper; no data queries or web-layer entrypoints are added or changed.
• S1 (authorization): N/A — no controllers, LiveView events, or policy modules are modified.
• S2 (audit trail): N/A — no writes to workflows, credentials, project settings, or any other config resource.