feat: Add dark mode theming system with case study migration

[tknecht]

🔍 Summary

Type: Feature Enhancement
Status: Draft - Awaiting Senior Developer Review
Breaking Changes: None

Introducing dark mode theming system to Hailstorm with case study migration of 3 components.

📋 Changes Overview

Infrastructure Added

• CSS custom properties for semantic color tokens
• ThemeProvider component with localStorage persistence
• useTheme hook for programmatic control
• Documentation in docs/THEMING.md

Components Migrated (Case Study)

Component	Changes	Dark Mode Story
Dialog	Added hasCloseButton prop, migrated to semantic tokens	✅ Added
Button	Updated secondary/minimal variants to use semantic tokens	✅ Added
Alert	Simplified text colors using opacity	✅ Added

🧪 Testing Evidence

pnpm run format:check  # ✅ Passing
pnpm run lint          # ✅ Passing  
pnpm run type-check    # ✅ Passing
pnpm run build         # ✅ Passing

📊 Impact Analysis

• Files Changed: 7
• Lines Added: 178
• Lines Removed: 23
• Components Affected: 3 (as case study)
• Remaining Components: ~35 (pending approval)

✅ Checklist

• Tests pass locally
• No new warnings/errors introduced
• Documentation updated
• Storybook stories added
• Backwards compatible
• Senior developer review
• Approved for full migration

🎯 Next Steps (Pending Approval)

1. Migrate remaining components if approach approved
2. Add theme toggle to TopBar
3. Test with production applications
4. Update component documentation

❓ Review Questions

1. Semantic token naming acceptable? (background, foreground, border)
2. Keep intent colors static across themes? (danger/warning/success)
3. Migration approach suitable for remaining components?
4. Any performance concerns with CSS variables?

📸 Visual Testing

Run Storybook to see dark mode in action:

pnpm run dev

Navigate to:

• Dialog → DarkMode story
• Button → DarkMode story
• Alert → DarkMode story

---

Note: This is a draft PR for architectural review. No production deployment intended until approved.