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/pages/Inventory/Inventory.tsx

@@ -13,6 +13,7 @@ const NAV_SECTIONS = [
       { label: 'Avatar', href: '#avatar' },
       { label: 'Badge', href: '#badge' },
       { label: 'Button', href: '#button' },
+      { label: 'ButtonGroup', href: '#buttongroup' },
       { label: 'Card', href: '#card' },
       { label: 'Checkbox', href: '#checkbox' },
       { label: 'CodeBlock', href: '#codeblock' },

src/pages/Inventory/sections/LayoutSection.tsx

@@ -76,7 +76,7 @@ export function LayoutSection() {
       >
         <div className={styles.shellDiagram}>
           <div className={styles.shellDiagramTop}>
-            TopBar — breadcrumb · search · env badge · shift · user avatar
+            TopBar — breadcrumb · search · filters · time range · env badge · user avatar
           </div>
           <div className={styles.shellDiagramBody}>
             <div className={styles.shellDiagramSide}>
@@ -110,7 +110,7 @@ export function LayoutSection() {
       <DemoCard
         id="topbar"
         title="TopBar"
-        description="Top navigation bar with breadcrumb, search trigger, environment badge, shift info, and user avatar."
+        description="Top navigation bar with breadcrumb, search trigger, status filters, time range, environment badge, and user avatar."
       >
         <div className={styles.topbarPreview}>
           <TopBar

src/pages/Inventory/sections/PrimitivesSection.tsx

@@ -5,6 +5,7 @@ import {
   Avatar,
   Badge,
   Button,
+  ButtonGroup,
   Card,
   Checkbox,
   CodeBlock,
@@ -72,6 +73,9 @@ export function PrimitivesSection() {
   // Alert state
   const [alertDismissed, setAlertDismissed] = useState(false)
 
+  // ButtonGroup state
+  const [bgSelection, setBgSelection] = useState<Set<string>>(new Set(['warn']))
+
   // Checkbox state
   const [checked1, setChecked1] = useState(false)
   const [checked2, setChecked2] = useState(true)
@@ -178,6 +182,24 @@ export function PrimitivesSection() {
         </div>
       </DemoCard>
 
+      {/* 4b. ButtonGroup */}
+      <DemoCard
+        id="buttongroup"
+        title="ButtonGroup"
+        description="Multi-select toggle group with optional colored dot indicators. Used for status filters."
+      >
+        <ButtonGroup
+          items={[
+            { value: 'ok', label: 'OK', color: 'var(--success)' },
+            { value: 'warn', label: 'Warn', color: 'var(--warning)' },
+            { value: 'error', label: 'Error', color: 'var(--error)' },
+            { value: 'running', label: 'Running', color: 'var(--running)' },
+          ]}
+          value={bgSelection}
+          onChange={setBgSelection}
+        />
+      </DemoCard>
+
       {/* 5. Card */}
       <DemoCard
         id="card"

src/pages/Routes/Routes.module.css

@@ -333,8 +333,8 @@
 }
 
 .typeRouter {
-  background: #F3EEFA;
-  color: #7C3AED;
+  background: var(--purple-bg);
+  color: var(--purple);
 }
 
 .typeProcessor {

src/pages/Routes/Routes.tsx

@@ -59,7 +59,7 @@ function KpiHeader({ scopedMetrics }: { scopedMetrics: RouteMetricRow[] }) {
         <div className={styles.kpiLabel}>Total Throughput</div>
         <div className={styles.kpiValueRow}>
           <span className={`${styles.kpiValue} ${styles.kpiValueAmber}`}>{totalExchanges.toLocaleString()}</span>
-          <span className={styles.kpiUnit}>msg/shift</span>
+          <span className={styles.kpiUnit}>exchanges</span>
           <span className={`${styles.kpiTrend} ${styles.trendUpGood}`}>&#9650; +8%</span>
         </div>
         <div className={styles.kpiDetail}>
@@ -483,7 +483,7 @@ export function Routes() {
               <span className={styles.tableTitle}>Processor Performance</span>
               <div className={styles.tableRight}>
                 <span className={styles.tableMeta}>{processorMetrics.length} processors</span>
-                <Badge label="SHIFT" color="primary" />
+                <Badge label="LIVE" color="success" />
               </div>
             </div>
             <DataTable