fix: make demo gallery readable in dark mode on mobile

[GeneralJerel]

Summary

• Give the demo gallery drawer an opaque background (#1a1a2e) in dark mode so the animated gradient doesn't bleed through
• Increase card and category chip contrast with slightly visible backgrounds and borders
• Adds demo-gallery-card and demo-gallery-chip CSS classes for targeted dark mode overrides

Test plan

• Open the demo gallery on a mobile device in dark mode
• Verify card text and category chips are readable
• Verify desktop appearance is unchanged

Closes #73

[GeneralJerel]

Review

Bug: Chip dark mode fix is ineffective

The .demo-gallery-chip CSS rule in globals.css:650-653 does not use !important:

:root.dark .demo-gallery-drawer .demo-gallery-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

But the chip button in category-filter.tsx:23-31 sets background and border via inline style attributes, which always beat class-based CSS in specificity. The dark mode override will never take effect for chips.

The card fix works because it does use !important. The chip rule needs the same treatment.

Fix: Add !important to chip background and border-color.

---

Suggestion: Use existing design token instead of hardcoded color

The drawer background is set to #1a1a2e, but this value is already defined as --color-surface in the dark theme. Using var(--color-surface) stays DRY with the design tokens:

:root.dark .demo-gallery-drawer {
  background: var(--color-surface) !important;
}

---

Finding	Severity
Chip CSS missing !important — dark mode fix is a no-op	Medium
Hardcoded #1a1a2e duplicates --color-surface token	Low

[GeneralJerel]