feat: add ButtonGroup, theme toggle, dark theme fixes, remove shift references

- Add ButtonGroup primitive: multi-select toggle with colored dot indicators
- Replace FilterPill status filters with ButtonGroup in TopBar and EventFeed
- Add light/dark mode toggle to TopBar (moon/sun icon)
- Fix dark theme: add --purple/--purple-bg tokens, replace all hardcoded
  #F3EEFA/#7C3AED with tokens, fix --amber-light text contrast in sidebar,
  brighten --sidebar-text/--sidebar-muted tokens, use color-mix for
  ProcessorTimeline bar fills
- Remove all "shift" references (presets, labels, badges)
- Shrink SegmentedTabs height to match search bar and ButtonGroup
- Update COMPONENT_GUIDE.md with new components and updated descriptions
- Add ButtonGroup demo to Inventory
- Add README.md with setup instructions and navigation guide

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/design-system/layout/Sidebar/Sidebar.module.css

@@ -20,7 +20,7 @@
 .logoImg {
   width: 28px;
   height: 24px;
-  color: var(--amber-light);
+  color: var(--amber);
   filter: brightness(0) saturate(100%) invert(76%) sepia(30%) saturate(400%) hue-rotate(5deg) brightness(95%);
 }
 
@@ -28,7 +28,7 @@
   font-family: var(--font-mono);
   font-weight: 600;
   font-size: 15px;
-  color: var(--amber-light);
+  color: var(--amber);
   letter-spacing: -0.3px;
 }
 
@@ -151,7 +151,7 @@
 
 .item.active {
   background: var(--sidebar-active);
-  color: var(--amber-light);
+  color: var(--amber);
   border-left-color: var(--amber);
 }
 
@@ -164,7 +164,7 @@
 }
 
 .item.active .navIcon {
-  color: var(--amber-light);
+  color: var(--amber);
 }
 
 .routeArrow {
@@ -249,11 +249,11 @@
 }
 
 .treeSectionLabel:hover {
-  color: var(--amber-light);
+  color: var(--amber);
 }
 
 .treeSectionLabelActive {
-  color: var(--amber-light);
+  color: var(--amber);
 }
 
 .tree {
@@ -290,13 +290,13 @@
 
 .treeRowActive {
   background: var(--sidebar-active);
-  color: var(--amber-light);
+  color: var(--amber);
   border-left-color: var(--amber);
 }
 
 .treeRowActive .treeBadge {
   background: rgba(198, 130, 14, 0.2);
-  color: var(--amber-light);
+  color: var(--amber);
 }
 
 /* Chevron */
@@ -380,7 +380,7 @@
 }
 
 .treeStar:hover {
-  color: var(--amber-light);
+  color: var(--amber);
 }
 
 /* ── Starred section ─────────────────────────────────────────────────────── */
@@ -500,7 +500,7 @@
 
 .bottomItemActive {
   background: var(--sidebar-active);
-  color: var(--amber-light);
+  color: var(--amber);
   border-left-color: var(--amber);
 }