Add storefront component migration: cards, badges, progress bars, animations, and React wrapper package

Major feature migration from dt-shopify-storefront into the design system:

- Card system: per-card color modes (normal/emphasis/warning/success/other),
  progress bars, full-bleed card body (card-body-flush), image bevel clip-paths,
  and visible structural borders at bevel corners
- Badge system: dt-card-badge with position-aware offsets for cards vs media frames
- Media frames: dt-bevel-media with inner surface fill, image clipping, and
  "MISSING MEDIA" placeholder for empty containers
- Interactive bevel buttons: dt-btn with hover/selected states and pulse animation
- Menu items: dt-menu-item with active states and level indentation
- Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes
- Feature legend: CSS grid for product feature icons with state colors
- Scrollbar styling for DT brand
- New @dangerousthings/react package wrapping web CSS components
- New @dangerousthings/tailwind-preset package
- New @dangerousthings/hex-background package
- Desktop showcase rewritten in React with Tailwind CSS
- Mobile showcase updated with new screens (animations, filters, advanced cards)
- Tokens: added mode color tokens, RGB variants, and selected-state tokens

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

screenshot-gaps.mjs

@@ -0,0 +1,30 @@
+import puppeteer from 'puppeteer';
+
+const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] });
+const page = await browser.newPage();
+await page.setViewport({ width: 1400, height: 900, deviceScaleFactor: 3 });
+
+const pages = [
+  { hash: 'bevels', name: 'bevels' },
+  { hash: 'glows', name: 'glows' },
+  { hash: 'forms', name: 'forms' },
+  { hash: 'animations', name: 'animations' },
+];
+
+for (const p of pages) {
+  await page.goto(`http://localhost:5173/#/${p.hash}`, { waitUntil: 'networkidle0' });
+  await new Promise(r => setTimeout(r, 1500));
+  await page.screenshot({ path: `/tmp/page-${p.name}-top.png`, fullPage: false });
+  
+  // Scroll down to see more
+  await page.evaluate(() => window.scrollBy(0, 800));
+  await new Promise(r => setTimeout(r, 500));
+  await page.screenshot({ path: `/tmp/page-${p.name}-mid.png`, fullPage: false });
+  
+  await page.evaluate(() => window.scrollBy(0, 800));
+  await new Promise(r => setTimeout(r, 500));
+  await page.screenshot({ path: `/tmp/page-${p.name}-bot.png`, fullPage: false });
+}
+
+await browser.close();
+console.log('Done');