feat: add accessible element variant card and difficulty badge

[ronjalh]

Summary

Add reusable card primitives and an initial element-variant card with a difficulty badge.

What's in it

• Add a CardTitle that requires an explicit semantic heading level and a paragraph-based CardDescription.
• Add a reusable difficulty badge with the letter in a navy circle and its numeric value below.
• Move the A–J mapping into a shared utility.
• Add a sample balance-beam element card and catalog image.
• Document the AI-assisted changes in docs/AI_USAGE.md.

Choices

Reuse the existing design tokens and the backend's documented A–J values (0.1–1.0). Keep this first card static while the catalog integration is developed.

Testing

• git diff --check passed.
• npm run build is pending PR feat: expose design tokens as Tailwind utilities #61, which adds the Tailwind utilities used here.

Not done (still open)

• The card still has placeholder title and description text and is not connected to catalog data or variant navigation.
• Do not merge before PR feat: expose design tokens as Tailwind utilities #61; the styling depends on its theme utilities.

Part of #48

Generated with GitHub Copilot

[xeniag]

Having role="ing" on a container can confuse accessibility tools. Considering changing to using simply aria-label og title, like this:
<span
title={
value !== undefined
? Difficulty ${letter}, value ${value.toFixed(1)}
: Difficulty ${difficulty}
}
className="inline-flex shrink-0 flex-col items-center gap-1"

[xeniag]

Looks great! Just a tiny polish for screen readers:

We can remove the title attribute so mouse tooltips don't clutter the UI, and wrap "Difficulty " and "Value " in <span className="sr-only"> directly next to their respective values. That way, assistive tech reads "Difficulty A, Value 0.1" cleanly without double-announcing.

[xeniag]

Nice work!

Just one TypeScript fix needed in card.tsx: Make as optional in CardTitleProps (as?: 'h2' | 'h3' | 'h4') and set a fallback default like as: Heading = 'h3'. Otherwise, calling <CardTitle> without as throws a type check error across the rest of the codebase.