@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/stories/ComponentConsolidation.stories.svelte

@@ -15,24 +15,24 @@
 
 <Story name="Overview">
   <div class="space-y-8">
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
-      <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Component Consolidation Audit</h1>
-      <p class="text-gray-700 dark:text-gray-300">
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <h1 class="text-2xl font-bold text-text-primary mb-4">Component Consolidation Audit</h1>
+      <p class="text-text-secondary">
         This audit documents raw native HTML elements across all Micdrop repositories that should be using
-        shared components from <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">@getmicdrop/svelte-components</code>.
+        shared components from <code class="bg-bg-tertiary px-1 rounded">@getmicdrop/svelte-components</code>.
       </p>
-      <p class="text-gray-600 dark:text-gray-400 mt-2 text-sm">
+      <p class="text-text-secondary mt-2 text-sm">
         <strong>Goal:</strong> Eliminate raw native elements in consumer repos, consolidate duplicates within this library,
         and ensure consistent UI across all Micdrop applications.
       </p>
     </div>
 
     <!-- Architecture Overview -->
-    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6">
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Repository Architecture</h2>
+    <div class="bg-muted rounded-lg p-6">
+      <h2 class="text-xl font-bold text-text-primary mb-4">Repository Architecture</h2>
 
-      <div class="bg-white dark:bg-gray-900 rounded-lg p-4 mb-4">
-        <pre class="text-sm text-gray-700 dark:text-gray-300 overflow-x-auto">
+      <div class="bg-card rounded-lg p-4 mb-4">
+        <pre class="text-sm text-text-secondary overflow-x-auto">
 ┌─────────────────────────────────────────────────────────────────┐
 │                    @getmicdrop/svelte-components                │
 │                         (NPM Package v5.2.1)                    │
@@ -56,78 +56,78 @@
       </div>
 
       <div class="grid md:grid-cols-3 gap-4 text-sm">
-        <div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded">
-          <h4 class="font-semibold text-blue-800 dark:text-blue-300">svelte-components</h4>
-          <p class="text-blue-700 dark:text-blue-400">Source of truth. Has Storybook. All shared components live here.</p>
+        <div class="bg-status-info-bg p-3 rounded">
+          <h4 class="font-semibold text-status-info-text">svelte-components</h4>
+          <p class="text-brand-primary">Source of truth. Has Storybook. All shared components live here.</p>
         </div>
-        <div class="bg-green-50 dark:bg-green-900/20 p-3 rounded">
-          <h4 class="font-semibold text-green-800 dark:text-green-300">Consumer Repos</h4>
-          <p class="text-green-700 dark:text-green-400">Import via NPM. Should NOT have local UI components.</p>
+        <div class="bg-status-success-bg p-3 rounded">
+          <h4 class="font-semibold text-status-success-text">Consumer Repos</h4>
+          <p class="text-status-success-text">Import via NPM. Should NOT have local UI components.</p>
         </div>
-        <div class="bg-amber-50 dark:bg-amber-900/20 p-3 rounded">
-          <h4 class="font-semibold text-amber-800 dark:text-amber-300">venue-calendar-npm</h4>
-          <p class="text-amber-700 dark:text-amber-400">Embedded in calendar/. Needs separate handling.</p>
+        <div class="bg-status-warning-bg p-3 rounded">
+          <h4 class="font-semibold text-accent-warning">venue-calendar-npm</h4>
+          <p class="text-accent-warning">Embedded in calendar/. Needs separate handling.</p>
         </div>
       </div>
     </div>
 
     <!-- Summary Statistics -->
-    <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-bold text-red-800 dark:text-red-300 mb-4">Problems Found (Complete Audit)</h2>
+    <div class="bg-status-error-bg rounded-lg p-6">
+      <h2 class="text-xl font-bold text-status-error-text mb-4">Problems Found (Complete Audit)</h2>
 
       <table class="w-full text-sm mb-4">
         <thead>
-          <tr class="text-left border-b border-red-300 dark:border-red-700">
-            <th class="py-2 font-semibold text-red-700 dark:text-red-300">Repository</th>
-            <th class="py-2 font-semibold text-red-700 dark:text-red-300">Raw Buttons</th>
-            <th class="py-2 font-semibold text-red-700 dark:text-red-300">Raw Inputs</th>
-            <th class="py-2 font-semibold text-red-700 dark:text-red-300">Raw Forms</th>
-            <th class="py-2 font-semibold text-red-700 dark:text-red-300">Shared Lib Usage</th>
+          <tr class="text-left border-b border-status-error-border">
+            <th class="py-2 font-semibold text-status-error-text">Repository</th>
+            <th class="py-2 font-semibold text-status-error-text">Raw Buttons</th>
+            <th class="py-2 font-semibold text-status-error-text">Raw Inputs</th>
+            <th class="py-2 font-semibold text-status-error-text">Raw Forms</th>
+            <th class="py-2 font-semibold text-status-error-text">Shared Lib Usage</th>
           </tr>
         </thead>
-        <tbody class="text-red-600 dark:text-red-400">
-          <tr class="border-b border-red-200 dark:border-red-800">
+        <tbody class="text-accent-danger">
+          <tr class="border-b border-status-error-border">
             <td class="py-2 font-medium">svelte-components</td>
             <td class="py-2">110 in 43 files</td>
             <td class="py-2">12 in 8 files</td>
             <td class="py-2">4 in 1 file</td>
-            <td class="py-2 text-green-600 dark:text-green-400">N/A (IS the library)</td>
+            <td class="py-2 text-accent-success">N/A (IS the library)</td>
           </tr>
-          <tr class="border-b border-red-200 dark:border-red-800">
+          <tr class="border-b border-status-error-border">
             <td class="py-2 font-medium">micdrop-frontend</td>
             <td class="py-2">35 in 16 files</td>
             <td class="py-2">76 in 41 files</td>
             <td class="py-2">22 in 21 files</td>
-            <td class="py-2 text-green-600 dark:text-green-400">329 files use shared lib</td>
+            <td class="py-2 text-accent-success">329 files use shared lib</td>
           </tr>
-          <tr class="border-b border-red-200 dark:border-red-800">
+          <tr class="border-b border-status-error-border">
             <td class="py-2 font-medium">performers-portal</td>
             <td class="py-2">27 in 7 files</td>
             <td class="py-2">3 in 2 files</td>
             <td class="py-2">5 in 2 files</td>
-            <td class="py-2 text-amber-600 dark:text-amber-400">Only 3 files use shared lib</td>
+            <td class="py-2 text-accent-warning">Only 3 files use shared lib</td>
           </tr>
           <tr>
             <td class="py-2 font-medium">venue-calendar-npm</td>
             <td class="py-2">68 in 21 files</td>
             <td class="py-2">9 in 3 files</td>
             <td class="py-2">0</td>
-            <td class="py-2 text-red-600 dark:text-red-400">Standalone package</td>
+            <td class="py-2 text-accent-danger">Standalone package</td>
           </tr>
         </tbody>
       </table>
 
       <div class="grid md:grid-cols-2 gap-4 mt-4">
-        <div class="bg-green-50 dark:bg-green-900/20 p-3 rounded">
-          <h4 class="font-semibold text-green-800 dark:text-green-300 mb-1">Good News</h4>
-          <p class="text-sm text-green-700 dark:text-green-400">
+        <div class="bg-status-success-bg p-3 rounded">
+          <h4 class="font-semibold text-status-success-text mb-1">Good News</h4>
+          <p class="text-sm text-status-success-text">
             micdrop-frontend already has 329 files importing from @getmicdrop/svelte-components.
             The shared library is being adopted.
           </p>
         </div>
-        <div class="bg-red-50 dark:bg-red-900/20 p-3 rounded">
-          <h4 class="font-semibold text-red-800 dark:text-red-300 mb-1">Main Issue</h4>
-          <p class="text-sm text-red-700 dark:text-red-400">
+        <div class="bg-status-error-bg p-3 rounded">
+          <h4 class="font-semibold text-status-error-text mb-1">Main Issue</h4>
+          <p class="text-sm text-status-error-text">
             performers-portal barely uses the shared lib (only 3 files).
             venue-calendar-npm is standalone and needs separate handling.
           </p>
@@ -139,27 +139,27 @@
 
 <Story name="Workflow Decision">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Workflow: Where to Do the Work</h1>
+    <h1 class="text-2xl font-bold text-text-primary">Workflow: Where to Do the Work</h1>
 
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-amber-800 dark:text-amber-300 mb-4">The Key Question</h2>
-      <p class="text-amber-700 dark:text-amber-400 text-lg">
+    <div class="bg-status-warning-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-accent-warning mb-4">The Key Question</h2>
+      <p class="text-accent-warning text-lg">
         "Can I do everything from svelte-components, or do I need to run scans in each consumer repo?"
       </p>
     </div>
 
     <div class="grid md:grid-cols-2 gap-6">
       <!-- Option A -->
-      <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6 border-2 border-green-500">
-        <h3 class="text-lg font-bold text-green-800 dark:text-green-300 mb-3">
+      <div class="bg-status-success-bg rounded-lg p-6 border-2 border-accent-success">
+        <h3 class="text-lg font-bold text-status-success-text mb-3">
           Recommended: Work from svelte-components
         </h3>
 
-        <div class="space-y-4 text-sm text-green-700 dark:text-green-400">
+        <div class="space-y-4 text-sm text-status-success-text">
           <div>
             <h4 class="font-semibold">For Component Development:</h4>
             <ul class="list-disc list-inside mt-1 space-y-1">
-              <li>Edit components in <code class="bg-green-100 dark:bg-green-800 px-1 rounded">src/lib/</code></li>
+              <li>Edit components in <code class="bg-status-success-bg px-1 rounded">src/lib/</code></li>
               <li>Preview in Storybook (port 6006)</li>
               <li>Test component behavior in isolation</li>
               <li>Publish to NPM when ready</li>
@@ -176,7 +176,7 @@
 
           <div>
             <h4 class="font-semibold">You CAN scan consumer repos from here:</h4>
-            <pre class="bg-white dark:bg-gray-800 p-2 rounded mt-1 overflow-x-auto text-xs">
+            <pre class="bg-card p-2 rounded mt-1 overflow-x-auto text-xs">
 # From svelte-components directory:
 grep -r "&lt;button" /Users/peet/repos/micdrop-frontend/src --include="*.svelte" -l
 grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte" -l</pre>
@@ -185,12 +185,12 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
       </div>
 
       <!-- Option B -->
-      <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 border border-gray-300 dark:border-gray-600">
-        <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300 mb-3">
+      <div class="bg-bg-secondary rounded-lg p-6 border border-stroke-primary">
+        <h3 class="text-lg font-bold text-text-secondary mb-3">
           When to Work in Consumer Repos
         </h3>
 
-        <div class="space-y-4 text-sm text-gray-600 dark:text-gray-400">
+        <div class="space-y-4 text-sm text-text-secondary">
           <div>
             <h4 class="font-semibold">For Applying Fixes:</h4>
             <ul class="list-disc list-inside mt-1 space-y-1">
@@ -213,10 +213,10 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
     </div>
 
     <!-- Recommended Workflow -->
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
-      <h3 class="text-lg font-bold text-blue-800 dark:text-blue-300 mb-4">Recommended Consolidation Workflow</h3>
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <h3 class="text-lg font-bold text-status-info-text mb-4">Recommended Consolidation Workflow</h3>
 
-      <ol class="list-decimal list-inside space-y-4 text-blue-700 dark:text-blue-400">
+      <ol class="list-decimal list-inside space-y-4 text-brand-primary">
         <li>
           <strong>Phase 1: Audit (Do from svelte-components)</strong>
           <ul class="list-disc list-inside ml-6 mt-1 text-sm">
@@ -250,304 +250,304 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
 
 <Story name="svelte-components Problems">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">svelte-components: Complete Element Audit (Dec 26, 2025)</h1>
-    <p class="text-gray-600 dark:text-gray-400">
+    <h1 class="text-2xl font-bold text-text-primary">svelte-components: Complete Element Audit (Dec 26, 2025)</h1>
+    <p class="text-text-secondary">
       Comprehensive audit of raw HTML elements in this library: buttons, inputs, forms, textareas, and selects.
       Categorized by what needs fixing vs. what's expected as primitive implementations.
     </p>
 
     <!-- SUMMARY BOX -->
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-blue-800 dark:text-blue-300 mb-4">Summary by Element Type</h2>
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-info-text mb-4">Summary by Element Type</h2>
       <div class="grid grid-cols-3 md:grid-cols-6 gap-3 text-center">
-        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
-          <div class="text-2xl font-bold text-green-600">✓</div>
-          <div class="text-xs text-gray-500">Buttons</div>
-          <div class="text-xs text-green-600">0 remaining</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
-          <div class="text-2xl font-bold text-green-600">5</div>
-          <div class="text-xs text-gray-500">Inputs</div>
-          <div class="text-xs text-green-600">primitives</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
-          <div class="text-2xl font-bold text-amber-600">5</div>
-          <div class="text-xs text-gray-500">Recipe Inputs</div>
-          <div class="text-xs text-amber-600">specialized</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
-          <div class="text-2xl font-bold text-green-600">3</div>
-          <div class="text-xs text-gray-500">Textareas</div>
-          <div class="text-xs text-green-600">expected</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
-          <div class="text-2xl font-bold text-gray-400">4</div>
-          <div class="text-xs text-gray-500">Forms</div>
-          <div class="text-xs text-gray-400">semantic</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
-          <div class="text-2xl font-bold text-green-600">0</div>
-          <div class="text-xs text-gray-500">Selects</div>
-          <div class="text-xs text-green-600">none</div>
+        <div class="bg-card p-3 rounded-lg">
+          <div class="text-2xl font-bold text-accent-success">✓</div>
+          <div class="text-xs text-muted-foreground">Buttons</div>
+          <div class="text-xs text-accent-success">0 remaining</div>
+        </div>
+        <div class="bg-card p-3 rounded-lg">
+          <div class="text-2xl font-bold text-accent-success">5</div>
+          <div class="text-xs text-muted-foreground">Inputs</div>
+          <div class="text-xs text-accent-success">primitives</div>
+        </div>
+        <div class="bg-card p-3 rounded-lg">
+          <div class="text-2xl font-bold text-accent-warning">5</div>
+          <div class="text-xs text-muted-foreground">Recipe Inputs</div>
+          <div class="text-xs text-accent-warning">specialized</div>
+        </div>
+        <div class="bg-card p-3 rounded-lg">
+          <div class="text-2xl font-bold text-accent-success">3</div>
+          <div class="text-xs text-muted-foreground">Textareas</div>
+          <div class="text-xs text-accent-success">expected</div>
+        </div>
+        <div class="bg-card p-3 rounded-lg">
+          <div class="text-2xl font-bold text-muted-foreground">4</div>
+          <div class="text-xs text-muted-foreground">Forms</div>
+          <div class="text-xs text-muted-foreground">semantic</div>
+        </div>
+        <div class="bg-card p-3 rounded-lg">
+          <div class="text-2xl font-bold text-accent-success">0</div>
+          <div class="text-xs text-muted-foreground">Selects</div>
+          <div class="text-xs text-accent-success">none</div>
         </div>
       </div>
     </div>
 
     <!-- COMPLETED - ALL FIXED -->
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-green-800 dark:text-green-300 mb-4">
+    <div class="bg-status-success-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-success-text mb-4">
         ✓ Completed: All High-Priority Files Migrated (Dec 26, 2025)
       </h2>
-      <p class="text-sm text-green-700 dark:text-green-400 mb-4">
+      <p class="text-sm text-status-success-text mb-4">
         All files that needed fixing have been migrated to use the Button component with appropriate variants.
       </p>
 
       <div class="space-y-3">
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500 flex justify-between items-center">
+        <div class="bg-card rounded-lg p-3 border-l-4 border-accent-success flex justify-between items-center">
           <div>
-            <span class="font-medium text-gray-900 dark:text-white">patterns/navigation/Header.svelte</span>
-            <span class="text-sm text-green-600 dark:text-green-400 ml-2">9 buttons → Button avatar/menu-item/menu-item-danger</span>
+            <span class="font-medium text-text-primary">patterns/navigation/Header.svelte</span>
+            <span class="text-sm text-accent-success ml-2">9 buttons → Button avatar/menu-item/menu-item-danger</span>
           </div>
-          <span class="text-green-600">✓</span>
+          <span class="text-accent-success">✓</span>
         </div>
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500 flex justify-between items-center">
+        <div class="bg-card rounded-lg p-3 border-l-4 border-accent-success flex justify-between items-center">
           <div>
-            <span class="font-medium text-gray-900 dark:text-white">recipes/SuperLogin/SuperLogin.svelte</span>
-            <span class="text-sm text-green-600 dark:text-green-400 ml-2">4 buttons → Button card/link variants</span>
+            <span class="font-medium text-text-primary">recipes/SuperLogin/SuperLogin.svelte</span>
+            <span class="text-sm text-accent-success ml-2">4 buttons → Button card/link variants</span>
           </div>
-          <span class="text-green-600">✓</span>
+          <span class="text-accent-success">✓</span>
         </div>
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500 flex justify-between items-center">
+        <div class="bg-card rounded-lg p-3 border-l-4 border-accent-success flex justify-between items-center">
           <div>
-            <span class="font-medium text-gray-900 dark:text-white">recipes/CropImage/CropImage.svelte</span>
-            <span class="text-sm text-green-600 dark:text-green-400 ml-2">5 Button uses, 0 raw</span>
+            <span class="font-medium text-text-primary">recipes/CropImage/CropImage.svelte</span>
+            <span class="text-sm text-accent-success ml-2">5 Button uses, 0 raw</span>
           </div>
-          <span class="text-green-600">✓</span>
+          <span class="text-accent-success">✓</span>
         </div>
       </div>
 
-      <div class="mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded text-sm">
-        <strong class="text-green-700 dark:text-green-400">Extracted to dedicated components:</strong>
-        <ul class="mt-2 list-disc list-inside text-green-600 dark:text-green-400 space-y-1">
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;AvatarButton&gt;</code> - Avatar/image trigger buttons (opacity hover)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;MenuItem&gt;</code> - Dropdown menu items (full width, left-aligned)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;MenuItem danger&gt;</code> - Destructive menu items (red text)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;CardAction&gt;</code> - Selectable card buttons (bordered)</li>
+      <div class="mt-4 p-3 bg-status-success-bg rounded text-sm">
+        <strong class="text-status-success-text">Extracted to dedicated components:</strong>
+        <ul class="mt-2 list-disc list-inside text-accent-success space-y-1">
+          <li><code class="bg-bg-tertiary px-1 rounded">&lt;AvatarButton&gt;</code> - Avatar/image trigger buttons (opacity hover)</li>
+          <li><code class="bg-bg-tertiary px-1 rounded">&lt;MenuItem&gt;</code> - Dropdown menu items (full width, left-aligned)</li>
+          <li><code class="bg-bg-tertiary px-1 rounded">&lt;MenuItem danger&gt;</code> - Destructive menu items (red text)</li>
+          <li><code class="bg-bg-tertiary px-1 rounded">&lt;CardAction&gt;</code> - Selectable card buttons (bordered)</li>
         </ul>
       </div>
     </div>
 
     <!-- PRIMITIVES - EXPECTED -->
-    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
+    <div class="bg-bg-secondary rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-text-secondary mb-4">
         Primitives: Raw Buttons Expected (15 total)
       </h2>
-      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-        These ARE the button implementations. Raw <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;button&gt;</code> is correct here.
+      <p class="text-sm text-text-secondary mb-4">
+        These ARE the button implementations. Raw <code class="bg-bg-tertiary px-1 rounded">&lt;button&gt;</code> is correct here.
       </p>
 
       <div class="grid md:grid-cols-2 gap-3 text-sm">
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>Button/Button.svelte</span>
-          <span class="text-gray-400">1 button</span>
+          <span class="text-muted-foreground">1 button</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>Pagination/Pagination.svelte</span>
-          <span class="text-gray-400">10 buttons</span>
+          <span class="text-muted-foreground">10 buttons</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>Accordion/AccordionItem.svelte</span>
-          <span class="text-gray-400">1 button</span>
+          <span class="text-muted-foreground">1 button</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>Tabs/Tabs.svelte</span>
-          <span class="text-gray-400">1 button</span>
+          <span class="text-muted-foreground">1 button</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>DarkModeToggle.svelte</span>
-          <span class="text-gray-400">1 button</span>
+          <span class="text-muted-foreground">1 button</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>Dropdown/DropdownItem.svelte</span>
-          <span class="text-gray-400">1 button</span>
+          <span class="text-muted-foreground">1 button</span>
         </div>
       </div>
     </div>
 
     <!-- RAW INPUTS - PRIMITIVES (EXPECTED) -->
-    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
+    <div class="bg-bg-secondary rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-text-secondary mb-4">
         Raw &lt;input&gt; Elements: Primitives (5 files - Expected)
       </h2>
-      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-        These ARE the input implementations. Raw <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;input&gt;</code> is correct here.
+      <p class="text-sm text-text-secondary mb-4">
+        These ARE the input implementations. Raw <code class="bg-bg-tertiary px-1 rounded">&lt;input&gt;</code> is correct here.
       </p>
 
       <div class="grid md:grid-cols-2 gap-3 text-sm">
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>primitives/Input/Input.svelte</span>
-          <span class="text-gray-400">2 inputs</span>
+          <span class="text-muted-foreground">2 inputs</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>primitives/Checkbox/Checkbox.svelte</span>
-          <span class="text-gray-400">1 input</span>
+          <span class="text-muted-foreground">1 input</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>primitives/Radio/Radio.svelte</span>
-          <span class="text-gray-400">1 input</span>
+          <span class="text-muted-foreground">1 input</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>primitives/Toggle.svelte</span>
-          <span class="text-gray-400">1 input</span>
+          <span class="text-muted-foreground">1 input</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>primitives/Input/Textarea.svelte</span>
-          <span class="text-gray-400">1 textarea</span>
+          <span class="text-muted-foreground">1 textarea</span>
         </div>
       </div>
     </div>
 
     <!-- RAW INPUTS - RECIPES (SPECIALIZED) -->
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-amber-800 dark:text-amber-300 mb-4">
+    <div class="bg-status-warning-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-accent-warning mb-4">
         Raw &lt;input&gt; Elements: Recipes (5 files - Specialized)
       </h2>
-      <p class="text-sm text-amber-700 dark:text-amber-400 mb-4">
+      <p class="text-sm text-accent-warning mb-4">
         These are specialized input controls with unique behavior. Using raw inputs is acceptable for these specialized use cases.
       </p>
 
       <div class="space-y-3">
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+        <div class="bg-card rounded-lg p-3 border-l-4 border-accent-success">
           <div class="flex justify-between">
             <span class="font-medium">recipes/inputs/OTPInput.svelte</span>
-            <span class="text-green-600">1 input ✓</span>
+            <span class="text-accent-success">1 input ✓</span>
           </div>
-          <p class="text-sm text-gray-500 mt-1">OTP digit inputs - highly specialized, raw input appropriate</p>
+          <p class="text-sm text-muted-foreground mt-1">OTP digit inputs - highly specialized, raw input appropriate</p>
         </div>
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+        <div class="bg-card rounded-lg p-3 border-l-4 border-accent-success">
           <div class="flex justify-between">
             <span class="font-medium">recipes/inputs/Search.svelte</span>
-            <span class="text-green-600">1 input ✓</span>
+            <span class="text-accent-success">1 input ✓</span>
           </div>
-          <p class="text-sm text-gray-500 mt-1">Search input - specialized styling and behavior</p>
+          <p class="text-sm text-muted-foreground mt-1">Search input - specialized styling and behavior</p>
         </div>
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+        <div class="bg-card rounded-lg p-3 border-l-4 border-accent-success">
           <div class="flex justify-between">
             <span class="font-medium">recipes/inputs/MultiSelect.svelte</span>
-            <span class="text-green-600">1 input ✓</span>
+            <span class="text-accent-success">1 input ✓</span>
           </div>
-          <p class="text-sm text-gray-500 mt-1">Filter/search input within multiselect dropdown</p>
+          <p class="text-sm text-muted-foreground mt-1">Filter/search input within multiselect dropdown</p>
         </div>
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+        <div class="bg-card rounded-lg p-3 border-l-4 border-accent-success">
           <div class="flex justify-between">
             <span class="font-medium">recipes/inputs/PlaceAutocomplete.svelte</span>
-            <span class="text-green-600">1 input ✓</span>
+            <span class="text-accent-success">1 input ✓</span>
           </div>
-          <p class="text-sm text-gray-500 mt-1">Google Places API integration - requires raw input for autocomplete</p>
+          <p class="text-sm text-muted-foreground mt-1">Google Places API integration - requires raw input for autocomplete</p>
         </div>
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+        <div class="bg-card rounded-lg p-3 border-l-4 border-accent-success">
           <div class="flex justify-between">
             <span class="font-medium">recipes/CropImage/CropImage.svelte</span>
-            <span class="text-green-600">1 input ✓</span>
+            <span class="text-accent-success">1 input ✓</span>
           </div>
-          <p class="text-sm text-gray-500 mt-1">File input for image upload - must be raw for file picker</p>
+          <p class="text-sm text-muted-foreground mt-1">File input for image upload - must be raw for file picker</p>
         </div>
       </div>
     </div>
 
     <!-- RAW FORMS -->
-    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
+    <div class="bg-bg-secondary rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-text-secondary mb-4">
         Raw &lt;form&gt; Elements (1 file, 4 forms)
       </h2>
-      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-        No shared Form component exists. Raw <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;form&gt;</code> elements are acceptable as semantic containers.
+      <p class="text-sm text-text-secondary mb-4">
+        No shared Form component exists. Raw <code class="bg-bg-tertiary px-1 rounded">&lt;form&gt;</code> elements are acceptable as semantic containers.
       </p>
 
-      <div class="bg-white dark:bg-gray-900 p-3 rounded">
+      <div class="bg-card p-3 rounded">
         <div class="flex justify-between">
           <span class="font-medium">recipes/SuperLogin/SuperLogin.svelte</span>
-          <span class="text-gray-400">4 forms</span>
+          <span class="text-muted-foreground">4 forms</span>
         </div>
-        <p class="text-sm text-gray-500 mt-1">Login, password reset, OTP, and email verification forms - semantic containers for form submission</p>
+        <p class="text-sm text-muted-foreground mt-1">Login, password reset, OTP, and email verification forms - semantic containers for form submission</p>
       </div>
     </div>
 
     <!-- RAW TEXTAREAS -->
-    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
+    <div class="bg-bg-secondary rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-text-secondary mb-4">
         Raw &lt;textarea&gt; Elements (3 files - Expected)
       </h2>
-      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+      <p class="text-sm text-text-secondary mb-4">
         All textarea usage is in primitives and recipes - no migration needed.
       </p>
 
       <div class="grid md:grid-cols-3 gap-3 text-sm">
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>primitives/Input/Textarea.svelte</span>
-          <span class="text-green-500">primitive ✓</span>
+          <span class="text-accent-success">primitive ✓</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>primitives/Input/Input.svelte</span>
-          <span class="text-green-500">primitive ✓</span>
+          <span class="text-accent-success">primitive ✓</span>
         </div>
-        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+        <div class="bg-card p-3 rounded flex justify-between">
           <span>recipes/modals/InputModal.svelte</span>
-          <span class="text-green-500">recipe ✓</span>
+          <span class="text-accent-success">recipe ✓</span>
         </div>
       </div>
     </div>
 
     <!-- RAW SELECTS -->
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-green-800 dark:text-green-300 mb-4">
+    <div class="bg-status-success-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-success-text mb-4">
         Raw &lt;select&gt; Elements: None Found ✓
       </h2>
-      <p class="text-sm text-green-700 dark:text-green-400">
-        No raw <code class="bg-green-100 dark:bg-green-800 px-1 rounded">&lt;select&gt;</code> elements found outside of primitives.
+      <p class="text-sm text-status-success-text">
+        No raw <code class="bg-status-success-bg px-1 rounded">&lt;select&gt;</code> elements found outside of primitives.
         All select functionality uses the MultiSelect custom dropdown component.
       </p>
     </div>
 
     <!-- CALENDAR PACKAGE -->
-    <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-purple-800 dark:text-purple-300 mb-4">
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-brand-primary mb-4">
         Calendar Package: Phase 4 (16 buttons in 6 files)
       </h2>
-      <p class="text-sm text-purple-700 dark:text-purple-400 mb-4">
+      <p class="text-sm text-brand-primary mb-4">
         Embedded from venue-calendar-npm. Handle separately - cannot import from svelte-components (circular dependency).
       </p>
 
       <table class="w-full text-sm">
         <thead>
-          <tr class="text-left border-b border-purple-300 dark:border-purple-700">
-            <th class="py-2 font-semibold text-purple-700 dark:text-purple-300">File</th>
-            <th class="py-2 font-semibold text-purple-700 dark:text-purple-300">Count</th>
-            <th class="py-2 font-semibold text-purple-700 dark:text-purple-300">Purpose</th>
+          <tr class="text-left border-b border-border">
+            <th class="py-2 font-semibold text-brand-primary">File</th>
+            <th class="py-2 font-semibold text-brand-primary">Count</th>
+            <th class="py-2 font-semibold text-brand-primary">Purpose</th>
           </tr>
         </thead>
-        <tbody class="text-purple-600 dark:text-purple-400">
-          <tr class="border-b border-purple-200 dark:border-purple-800">
+        <tbody class="text-brand-primary">
+          <tr class="border-b border-border">
             <td class="py-2">OrderSummary.svelte</td>
             <td class="py-2">5</td>
             <td class="py-2">Checkout actions</td>
           </tr>
-          <tr class="border-b border-purple-200 dark:border-purple-800">
+          <tr class="border-b border-border">
             <td class="py-2">MiniMonthCalendar.svelte</td>
             <td class="py-2">3</td>
             <td class="py-2">Month navigation</td>
           </tr>
-          <tr class="border-b border-purple-200 dark:border-purple-800">
+          <tr class="border-b border-border">
             <td class="py-2">MonthSwitcher.svelte</td>
             <td class="py-2">3</td>
             <td class="py-2">Month navigation</td>
           </tr>
-          <tr class="border-b border-purple-200 dark:border-purple-800">
+          <tr class="border-b border-border">
             <td class="py-2">AboutShow.svelte</td>
             <td class="py-2">3</td>
             <td class="py-2">Show details</td>
           </tr>
-          <tr class="border-b border-purple-200 dark:border-purple-800">
+          <tr class="border-b border-border">
             <td class="py-2">ShowCard.svelte</td>
             <td class="py-2">1</td>
             <td class="py-2">CTA button</td>
@@ -562,11 +562,11 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
     </div>
 
     <!-- STORIES - LOW PRIORITY -->
-    <div class="bg-gray-100 dark:bg-gray-800/50 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-gray-600 dark:text-gray-400 mb-4">
+    <div class="bg-muted rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-text-secondary mb-4">
         Stories: Low Priority (~30 buttons in 19 files)
       </h2>
-      <p class="text-sm text-gray-500 dark:text-gray-500">
+      <p class="text-sm text-muted-foreground">
         Demo and test files. Not user-facing. Fix only if time permits.
       </p>
     </div>
@@ -575,131 +575,131 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
 
 <Story name="micdrop-frontend Detailed">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">micdrop-frontend: Fresh Audit (Dec 26, 2025)</h1>
-    <p class="text-gray-600 dark:text-gray-400">
+    <h1 class="text-2xl font-bold text-text-primary">micdrop-frontend: Fresh Audit (Dec 26, 2025)</h1>
+    <p class="text-text-secondary">
       <strong>12 files</strong> with raw buttons. Total: <strong>25 raw buttons</strong> (9 production, 8 storybook).
     </p>
 
     <!-- Summary -->
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-blue-800 dark:text-blue-300 mb-4">Summary</h2>
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-info-text mb-4">Summary</h2>
       <div class="grid md:grid-cols-4 gap-4">
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-red-600">25</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Raw Buttons</div>
-          <div class="text-xs text-gray-500">in 12 files</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-red-600">76</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Raw Inputs</div>
-          <div class="text-xs text-gray-500">in 41 files</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-red-600">22</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Raw Forms</div>
-          <div class="text-xs text-gray-500">in 21 files</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-green-600">329</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Shared Lib Imports</div>
-          <div class="text-xs text-gray-500">good adoption!</div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-danger">25</div>
+          <div class="text-sm text-text-secondary">Raw Buttons</div>
+          <div class="text-xs text-muted-foreground">in 12 files</div>
+        </div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-danger">76</div>
+          <div class="text-sm text-text-secondary">Raw Inputs</div>
+          <div class="text-xs text-muted-foreground">in 41 files</div>
+        </div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-danger">22</div>
+          <div class="text-sm text-text-secondary">Raw Forms</div>
+          <div class="text-xs text-muted-foreground">in 21 files</div>
+        </div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-success">329</div>
+          <div class="text-sm text-text-secondary">Shared Lib Imports</div>
+          <div class="text-xs text-muted-foreground">good adoption!</div>
         </div>
       </div>
     </div>
 
     <!-- Raw Buttons -->
-    <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-red-800 dark:text-red-300 mb-4">Raw Buttons (25 instances, 12 files)</h2>
+    <div class="bg-status-error-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-error-text mb-4">Raw Buttons (25 instances, 12 files)</h2>
       <div class="overflow-x-auto">
         <table class="w-full text-sm">
           <thead>
-            <tr class="text-left border-b border-red-300 dark:border-red-700">
-              <th class="py-2 font-semibold text-red-700 dark:text-red-300">File</th>
-              <th class="py-2 font-semibold text-red-700 dark:text-red-300 text-center">Count</th>
-              <th class="py-2 font-semibold text-red-700 dark:text-red-300">Priority</th>
+            <tr class="text-left border-b border-status-error-border">
+              <th class="py-2 font-semibold text-status-error-text">File</th>
+              <th class="py-2 font-semibold text-status-error-text text-center">Count</th>
+              <th class="py-2 font-semibold text-status-error-text">Priority</th>
             </tr>
           </thead>
-          <tbody class="text-red-600 dark:text-red-400">
-            <tr class="border-b border-red-200 dark:border-red-800">
+          <tbody class="text-accent-danger">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/FeaturesTable/FeaturesReportsTableUnified.svelte</td>
               <td class="py-2 text-center font-bold">3</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/UserProfileDropdown/UserDropdown.svelte</td>
               <td class="py-2 text-center font-bold">3</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/MainLayout/Sidebar.svelte</td>
               <td class="py-2 text-center font-bold">3</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/SingleEventSeriesReportTable/...Unified.svelte</td>
               <td class="py-2 text-center font-bold">2</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/Events/Details/FAQs.svelte</td>
               <td class="py-2 text-center font-bold">2</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/MainLayout/Header.svelte</td>
               <td class="py-2 text-center font-bold">1</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/Dashboard/DashboardCards/CardWrapper.svelte</td>
               <td class="py-2 text-center font-bold">1</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/Events/Details/AboutShow.svelte</td>
               <td class="py-2 text-center font-bold">1</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/Events/Details/Disclaimer.svelte</td>
               <td class="py-2 text-center font-bold">1</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800 text-gray-500 dark:text-gray-500">
+            <tr class="border-b border-status-error-border text-muted-foreground">
               <td class="py-2">stories/CalendarComparison/CalendarComparison.stories.svelte</td>
               <td class="py-2 text-center font-bold">3</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">STORYBOOK</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-muted text-text-secondary rounded text-xs">STORYBOOK</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800 text-gray-500 dark:text-gray-500">
+            <tr class="border-b border-status-error-border text-muted-foreground">
               <td class="py-2">stories/ComponentInstancesAudit/BadgeInstances.svelte</td>
               <td class="py-2 text-center font-bold">3</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">STORYBOOK</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-muted text-text-secondary rounded text-xs">STORYBOOK</span></td>
             </tr>
-            <tr class="text-gray-500 dark:text-gray-500">
+            <tr class="text-muted-foreground">
               <td class="py-2">stories/ComponentInstancesAudit/AlertInstances.svelte</td>
               <td class="py-2 text-center font-bold">2</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">STORYBOOK</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-muted text-text-secondary rounded text-xs">STORYBOOK</span></td>
             </tr>
           </tbody>
         </table>
       </div>
-      <p class="mt-4 text-sm text-red-600 dark:text-red-400">
+      <p class="mt-4 text-sm text-accent-danger">
         <strong>Note:</strong> Storybook files (gray) are lower priority - focus on production components first.
       </p>
     </div>
 
     <!-- Local Components Issue -->
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-amber-800 dark:text-amber-300 mb-4">Local Component Duplicates</h2>
-      <p class="text-sm text-amber-700 dark:text-amber-400 mb-4">
-        This repo has <strong>95 items</strong> in <code class="bg-amber-100 dark:bg-amber-800 px-1 rounded">src/components/</code>.
+    <div class="bg-status-warning-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-accent-warning mb-4">Local Component Duplicates</h2>
+      <p class="text-sm text-accent-warning mb-4">
+        This repo has <strong>95 items</strong> in <code class="bg-status-warning-bg px-1 rounded">src/components/</code>.
         Many are app-specific, but some likely duplicate shared library components.
       </p>
 
       <div class="grid md:grid-cols-2 gap-4">
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg">
-          <h3 class="font-semibold text-amber-800 dark:text-amber-300 mb-2">Likely Duplicates (Check These):</h3>
-          <ul class="list-disc list-inside text-sm text-amber-600 dark:text-amber-400 space-y-1">
+        <div class="bg-card p-4 rounded-lg">
+          <h3 class="font-semibold text-accent-warning mb-2">Likely Duplicates (Check These):</h3>
+          <ul class="list-disc list-inside text-sm text-accent-warning space-y-1">
             <li>CropImage/ → exists in svelte-components/recipes/</li>
             <li>Modal/ → exists in svelte-components/primitives/</li>
             <li>Input/ → exists in svelte-components/primitives/</li>
@@ -709,9 +709,9 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
             <li>PlaceAutocomplete/ → specialized, may be fine</li>
           </ul>
         </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg">
-          <h3 class="font-semibold text-green-800 dark:text-green-300 mb-2">App-Specific (OK to Keep):</h3>
-          <ul class="list-disc list-inside text-sm text-green-600 dark:text-green-400 space-y-1">
+        <div class="bg-card p-4 rounded-lg">
+          <h3 class="font-semibold text-status-success-text mb-2">App-Specific (OK to Keep):</h3>
+          <ul class="list-disc list-inside text-sm text-accent-success space-y-1">
             <li>EventForm/, EventReportsTable/</li>
             <li>Dashboard/, DashboardTable/</li>
             <li>UnifiedTable/, UnifiedCalendar/</li>
@@ -724,24 +724,24 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
     </div>
 
     <!-- Recommendations -->
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-green-800 dark:text-green-300 mb-4">Recommendations</h2>
-      <ol class="list-decimal list-inside space-y-3 text-sm text-green-700 dark:text-green-400">
+    <div class="bg-status-success-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-success-text mb-4">Recommendations</h2>
+      <ol class="list-decimal list-inside space-y-3 text-sm text-status-success-text">
         <li>
           <strong>Fix MainLayout components first</strong> (Header, Sidebar, UserDropdown)
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">These are on every page, highest impact</span>
+          <br/><span class="text-accent-success ml-4">These are on every page, highest impact</span>
         </li>
         <li>
           <strong>Fix table components</strong> (FeaturesReportsTableUnified, SingleEventSeriesReportTableUnified)
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">Replace raw buttons with Button component</span>
+          <br/><span class="text-accent-success ml-4">Replace raw buttons with Button component</span>
         </li>
         <li>
           <strong>Audit local CropImage, Modal, Input</strong>
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">Delete if identical to shared lib versions</span>
+          <br/><span class="text-accent-success ml-4">Delete if identical to shared lib versions</span>
         </li>
         <li>
           <strong>Keep app-specific components</strong> (tables, forms, etc.)
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">But ensure they USE shared primitives internally</span>
+          <br/><span class="text-accent-success ml-4">But ensure they USE shared primitives internally</span>
         </li>
       </ol>
     </div>
@@ -750,98 +750,98 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
 
 <Story name="performers-portal Detailed">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">performers-portal: Fresh Audit (Dec 26, 2025)</h1>
-    <p class="text-gray-600 dark:text-gray-400">
+    <h1 class="text-2xl font-bold text-text-primary">performers-portal: Fresh Audit (Dec 26, 2025)</h1>
+    <p class="text-text-secondary">
       <strong>7 files</strong> with raw buttons. Total: <strong>27 raw buttons</strong> (24 production, 3 test/story).
-      <span class="text-red-600 font-medium">Critical: Only 3 files use shared library!</span>
+      <span class="text-accent-danger font-medium">Critical: Only 3 files use shared library!</span>
     </p>
 
     <!-- Summary -->
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-amber-800 dark:text-amber-300 mb-4">Summary</h2>
+    <div class="bg-status-warning-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-accent-warning mb-4">Summary</h2>
       <div class="grid md:grid-cols-4 gap-4">
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-red-600">27</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Raw Buttons</div>
-          <div class="text-xs text-gray-500">in 7 files</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-red-600">3</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Raw Inputs</div>
-          <div class="text-xs text-gray-500">in 2 files</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-red-600">5</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Raw Forms</div>
-          <div class="text-xs text-gray-500">in 2 files</div>
-        </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-amber-600">3</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Shared Lib Imports</div>
-          <div class="text-xs text-red-500">poor adoption!</div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-danger">27</div>
+          <div class="text-sm text-text-secondary">Raw Buttons</div>
+          <div class="text-xs text-muted-foreground">in 7 files</div>
+        </div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-danger">3</div>
+          <div class="text-sm text-text-secondary">Raw Inputs</div>
+          <div class="text-xs text-muted-foreground">in 2 files</div>
+        </div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-danger">5</div>
+          <div class="text-sm text-text-secondary">Raw Forms</div>
+          <div class="text-xs text-muted-foreground">in 2 files</div>
+        </div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-warning">3</div>
+          <div class="text-sm text-text-secondary">Shared Lib Imports</div>
+          <div class="text-xs text-accent-danger">poor adoption!</div>
         </div>
       </div>
     </div>
 
     <!-- Critical Issue -->
-    <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-6 border-2 border-red-500">
-      <h2 class="text-xl font-semibold text-red-800 dark:text-red-300 mb-4">⚠️ Critical Issue: Poor Shared Library Adoption</h2>
-      <p class="text-red-700 dark:text-red-400 mb-4">
-        Only <strong>3 files</strong> import from <code class="bg-red-100 dark:bg-red-800 px-1 rounded">@getmicdrop/svelte-components</code>.
+    <div class="bg-status-error-bg rounded-lg p-6 border-2 border-status-error-border">
+      <h2 class="text-xl font-semibold text-status-error-text mb-4">⚠️ Critical Issue: Poor Shared Library Adoption</h2>
+      <p class="text-status-error-text mb-4">
+        Only <strong>3 files</strong> import from <code class="bg-status-error-bg px-1 rounded">@getmicdrop/svelte-components</code>.
         This entire repo needs migration to the shared library.
       </p>
-      <p class="text-sm text-red-600 dark:text-red-400">
+      <p class="text-sm text-accent-danger">
         Compare: micdrop-frontend has 329 files using the shared lib.
       </p>
     </div>
 
     <!-- Raw Buttons -->
-    <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-red-800 dark:text-red-300 mb-4">Raw Buttons (27 instances, 7 files)</h2>
+    <div class="bg-status-error-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-error-text mb-4">Raw Buttons (27 instances, 7 files)</h2>
       <div class="overflow-x-auto">
         <table class="w-full text-sm">
           <thead>
-            <tr class="text-left border-b border-red-300 dark:border-red-700">
-              <th class="py-2 font-semibold text-red-700 dark:text-red-300">File</th>
-              <th class="py-2 font-semibold text-red-700 dark:text-red-300 text-center">Count</th>
-              <th class="py-2 font-semibold text-red-700 dark:text-red-300">Priority</th>
+            <tr class="text-left border-b border-status-error-border">
+              <th class="py-2 font-semibold text-status-error-text">File</th>
+              <th class="py-2 font-semibold text-status-error-text text-center">Count</th>
+              <th class="py-2 font-semibold text-status-error-text">Priority</th>
             </tr>
           </thead>
-          <tbody class="text-red-600 dark:text-red-400">
-            <tr class="border-b border-red-200 dark:border-red-800">
+          <tbody class="text-accent-danger">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">routes/login/+page.svelte</td>
               <td class="py-2 text-center font-bold">9</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">CRITICAL</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">CRITICAL</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">routes/account-settings/+page.svelte</td>
               <td class="py-2 text-center font-bold">6</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">routes/profile/+page.svelte</td>
               <td class="py-2 text-center font-bold">5</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">routes/verify-phone/+page.svelte</td>
               <td class="py-2 text-center font-bold">3</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">components/Modal/ModalTestWrapper.svelte</td>
               <td class="py-2 text-center font-bold">2</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">TEST</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-muted text-text-secondary rounded text-xs">TEST</span></td>
             </tr>
-            <tr class="border-b border-red-200 dark:border-red-800">
+            <tr class="border-b border-status-error-border">
               <td class="py-2">routes/availability/[venueId]/+page.svelte</td>
               <td class="py-2 text-center font-bold">1</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
             </tr>
             <tr>
-              <td class="py-2 text-gray-500">stories/Button.svelte</td>
-              <td class="py-2 text-center font-bold text-gray-500">1</td>
-              <td class="py-2"><span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">STORYBOOK</span></td>
+              <td class="py-2 text-muted-foreground">stories/Button.svelte</td>
+              <td class="py-2 text-center font-bold text-muted-foreground">1</td>
+              <td class="py-2"><span class="px-2 py-0.5 bg-muted text-text-secondary rounded text-xs">STORYBOOK</span></td>
             </tr>
           </tbody>
         </table>
@@ -849,23 +849,23 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
     </div>
 
     <!-- Local Components -->
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-amber-800 dark:text-amber-300 mb-4">Local Components (8 items)</h2>
-      <p class="text-sm text-amber-700 dark:text-amber-400 mb-4">
-        This repo has a smaller <code class="bg-amber-100 dark:bg-amber-800 px-1 rounded">src/components/</code> directory.
+    <div class="bg-status-warning-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-accent-warning mb-4">Local Components (8 items)</h2>
+      <p class="text-sm text-accent-warning mb-4">
+        This repo has a smaller <code class="bg-status-warning-bg px-1 rounded">src/components/</code> directory.
       </p>
 
       <div class="grid md:grid-cols-2 gap-4">
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg">
-          <h3 class="font-semibold text-red-800 dark:text-red-300 mb-2">Should Migrate to Shared Lib:</h3>
-          <ul class="list-disc list-inside text-sm text-red-600 dark:text-red-400 space-y-1">
+        <div class="bg-card p-4 rounded-lg">
+          <h3 class="font-semibold text-status-error-text mb-2">Should Migrate to Shared Lib:</h3>
+          <ul class="list-disc list-inside text-sm text-accent-danger space-y-1">
             <li>Modal/ → use svelte-components/primitives/Modal</li>
             <li>Layout/ → patterns should come from shared lib</li>
           </ul>
         </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg">
-          <h3 class="font-semibold text-amber-800 dark:text-amber-300 mb-2">App-Specific (Evaluate):</h3>
-          <ul class="list-disc list-inside text-sm text-amber-600 dark:text-amber-400 space-y-1">
+        <div class="bg-card p-4 rounded-lg">
+          <h3 class="font-semibold text-accent-warning mb-2">App-Specific (Evaluate):</h3>
+          <ul class="list-disc list-inside text-sm text-accent-warning space-y-1">
             <li>CalendarOnboardingModal.svelte</li>
             <li>HomeOnboardingModal.svelte</li>
             <li>ProfileOnboardingModal.svelte</li>
@@ -878,24 +878,24 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
     </div>
 
     <!-- Recommendations -->
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-green-800 dark:text-green-300 mb-4">Recommendations</h2>
-      <ol class="list-decimal list-inside space-y-3 text-sm text-green-700 dark:text-green-400">
+    <div class="bg-status-success-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-success-text mb-4">Recommendations</h2>
+      <ol class="list-decimal list-inside space-y-3 text-sm text-status-success-text">
         <li>
           <strong>Migrate login/+page.svelte to use SuperLogin</strong>
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">9 raw buttons → 0 by using shared login component</span>
+          <br/><span class="text-accent-success ml-4">9 raw buttons → 0 by using shared login component</span>
         </li>
         <li>
           <strong>Replace all buttons with Button component</strong>
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">Import from @getmicdrop/svelte-components</span>
+          <br/><span class="text-accent-success ml-4">Import from @getmicdrop/svelte-components</span>
         </li>
         <li>
           <strong>Use shared Modal instead of local Modal/</strong>
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">Delete local Modal/ directory after migration</span>
+          <br/><span class="text-accent-success ml-4">Delete local Modal/ directory after migration</span>
         </li>
         <li>
           <strong>Onboarding modals may use ConfirmationModal or StatusModal</strong>
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">Check if shared recipes cover the use cases</span>
+          <br/><span class="text-accent-success ml-4">Check if shared recipes cover the use cases</span>
         </li>
       </ol>
     </div>
@@ -904,37 +904,37 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
 
 <Story name="venue-calendar-npm Detailed">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">venue-calendar-npm: Detailed Audit</h1>
-    <p class="text-gray-600 dark:text-gray-400">
+    <h1 class="text-2xl font-bold text-text-primary">venue-calendar-npm: Detailed Audit</h1>
+    <p class="text-text-secondary">
       This is a standalone package embedded in svelte-components/calendar/. Changes here propagate to all consumers.
     </p>
 
     <!-- Summary -->
-    <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-purple-800 dark:text-purple-300 mb-4">Summary</h2>
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-brand-primary mb-4">Summary</h2>
       <div class="grid md:grid-cols-3 gap-4">
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-red-600">68</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Raw Buttons</div>
-          <div class="text-xs text-gray-500">in 21 files</div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-danger">68</div>
+          <div class="text-sm text-text-secondary">Raw Buttons</div>
+          <div class="text-xs text-muted-foreground">in 21 files</div>
         </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-red-600">9</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Raw Inputs</div>
-          <div class="text-xs text-gray-500">in 3 files</div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-danger">9</div>
+          <div class="text-sm text-text-secondary">Raw Inputs</div>
+          <div class="text-xs text-muted-foreground">in 3 files</div>
         </div>
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center">
-          <div class="text-3xl font-bold text-green-600">0</div>
-          <div class="text-sm text-gray-600 dark:text-gray-400">Raw Forms</div>
-          <div class="text-xs text-gray-500">good!</div>
+        <div class="bg-card p-4 rounded-lg text-center">
+          <div class="text-3xl font-bold text-accent-success">0</div>
+          <div class="text-sm text-text-secondary">Raw Forms</div>
+          <div class="text-xs text-muted-foreground">good!</div>
         </div>
       </div>
     </div>
 
     <!-- Special Note -->
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-6 border-l-4 border-amber-500">
-      <h2 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">⚠️ Special Handling Required</h2>
-      <p class="text-sm text-amber-700 dark:text-amber-400">
+    <div class="bg-status-warning-bg rounded-lg p-6 border-l-4 border-accent-warning">
+      <h2 class="text-lg font-semibold text-accent-warning mb-2">⚠️ Special Handling Required</h2>
+      <p class="text-sm text-accent-warning">
         This package is <strong>standalone</strong> and embedded in svelte-components. It cannot directly import
         from @getmicdrop/svelte-components (circular dependency). Raw buttons here may be intentional to avoid
         dependency coupling. Consider creating a minimal Button for the calendar package.
@@ -942,108 +942,108 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
     </div>
 
     <!-- Raw Buttons by Category -->
-    <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-red-800 dark:text-red-300 mb-4">Raw Buttons by Category</h2>
+    <div class="bg-status-error-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-error-text mb-4">Raw Buttons by Category</h2>
 
       <div class="space-y-4">
         <!-- Routes (Test Pages) -->
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg">
-          <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Routes (Test/Demo Pages)</h3>
+        <div class="bg-card p-4 rounded-lg">
+          <h3 class="font-semibold text-text-secondary mb-2">Routes (Test/Demo Pages)</h3>
           <table class="w-full text-sm">
-            <tbody class="text-gray-600 dark:text-gray-400">
-              <tr class="border-b border-gray-200 dark:border-gray-700">
+            <tbody class="text-text-secondary">
+              <tr class="border-b border-border">
                 <td class="py-1">routes/scenarios/+page.svelte</td>
                 <td class="py-1 text-center font-bold">12</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">LOW</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-muted text-text-secondary rounded text-xs">LOW</span></td>
               </tr>
-              <tr class="border-b border-gray-200 dark:border-gray-700">
+              <tr class="border-b border-border">
                 <td class="py-1">routes/preview/+page.svelte</td>
                 <td class="py-1 text-center font-bold">9</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">LOW</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-muted text-text-secondary rounded text-xs">LOW</span></td>
               </tr>
-              <tr class="border-b border-gray-200 dark:border-gray-700">
+              <tr class="border-b border-border">
                 <td class="py-1">routes/[id]/[slug]/+page.svelte</td>
                 <td class="py-1 text-center font-bold">8</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
               </tr>
-              <tr class="border-b border-gray-200 dark:border-gray-700">
+              <tr class="border-b border-border">
                 <td class="py-1">routes/[id]/[slug]/tickets/checkout/+page.svelte</td>
                 <td class="py-1 text-center font-bold">3</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
               </tr>
-              <tr class="border-b border-gray-200 dark:border-gray-700">
+              <tr class="border-b border-border">
                 <td class="py-1">routes/[id]/[slug]/tickets/checkout/success/+page.svelte</td>
                 <td class="py-1 text-center font-bold">2</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
               </tr>
               <tr>
                 <td class="py-1">routes/+error.svelte</td>
                 <td class="py-1 text-center font-bold">2</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">LOW</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-muted text-text-secondary rounded text-xs">LOW</span></td>
               </tr>
             </tbody>
           </table>
         </div>
 
         <!-- Components (Embedded) -->
-        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg">
-          <h3 class="font-semibold text-red-700 dark:text-red-300 mb-2">Components (Embedded in svelte-components)</h3>
+        <div class="bg-card p-4 rounded-lg">
+          <h3 class="font-semibold text-status-error-text mb-2">Components (Embedded in svelte-components)</h3>
           <table class="w-full text-sm">
-            <tbody class="text-red-600 dark:text-red-400">
-              <tr class="border-b border-red-200 dark:border-red-800">
+            <tbody class="text-accent-danger">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/Calendar/Calendar.svelte</td>
                 <td class="py-1 text-center font-bold">3</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
               </tr>
-              <tr class="border-b border-red-200 dark:border-red-800">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/Calendar/CalendarHeader.svelte</td>
                 <td class="py-1 text-center font-bold">2</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
               </tr>
-              <tr class="border-b border-red-200 dark:border-red-800">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/DateSelector/DateSelector.svelte</td>
                 <td class="py-1 text-center font-bold">3</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
               </tr>
-              <tr class="border-b border-red-200 dark:border-red-800">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/DateSelector/DateSelectorGrouped.svelte</td>
                 <td class="py-1 text-center font-bold">3</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
               </tr>
-              <tr class="border-b border-red-200 dark:border-red-800">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/Views/EventDetailsView.svelte</td>
                 <td class="py-1 text-center font-bold">3</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
               </tr>
-              <tr class="border-b border-red-200 dark:border-red-800">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/Views/Checkout.svelte</td>
                 <td class="py-1 text-center font-bold">3</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">HIGH</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-error-bg text-status-error-text rounded text-xs">HIGH</span></td>
               </tr>
-              <tr class="border-b border-red-200 dark:border-red-800">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/Events/Checkout/PaymentSection.svelte</td>
                 <td class="py-1 text-center font-bold">3</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
               </tr>
-              <tr class="border-b border-red-200 dark:border-red-800">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/Events/Tickets/PromocodeInput.svelte</td>
                 <td class="py-1 text-center font-bold">2</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
               </tr>
-              <tr class="border-b border-red-200 dark:border-red-800">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/Events/Tickets/TicketBlock.svelte</td>
                 <td class="py-1 text-center font-bold">2</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
               </tr>
-              <tr class="border-b border-red-200 dark:border-red-800">
+              <tr class="border-b border-status-error-border">
                 <td class="py-1">components/Events/Checkout/CheckoutEventInfo.svelte</td>
                 <td class="py-1 text-center font-bold">2</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
               </tr>
               <tr>
                 <td class="py-1">+ 5 more files with 1-2 buttons each</td>
                 <td class="py-1 text-center font-bold">6</td>
-                <td class="py-1"><span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded text-xs">MEDIUM</span></td>
+                <td class="py-1"><span class="px-2 py-0.5 bg-status-warning-bg text-accent-warning rounded text-xs">MEDIUM</span></td>
               </tr>
             </tbody>
           </table>
@@ -1052,24 +1052,24 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
     </div>
 
     <!-- Recommendations -->
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-green-800 dark:text-green-300 mb-4">Recommendations</h2>
-      <ol class="list-decimal list-inside space-y-3 text-sm text-green-700 dark:text-green-400">
+    <div class="bg-status-success-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-success-text mb-4">Recommendations</h2>
+      <ol class="list-decimal list-inside space-y-3 text-sm text-status-success-text">
         <li>
           <strong>Create a minimal CalendarButton component</strong>
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">Internal to venue-calendar-npm, consistent styling</span>
+          <br/><span class="text-accent-success ml-4">Internal to venue-calendar-npm, consistent styling</span>
         </li>
         <li>
           <strong>Focus on components/, not routes/</strong>
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">Routes are test/demo pages, lower priority</span>
+          <br/><span class="text-accent-success ml-4">Routes are test/demo pages, lower priority</span>
         </li>
         <li>
           <strong>Handle AFTER main consolidation</strong>
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">This is Phase 4, do consumer repos first</span>
+          <br/><span class="text-accent-success ml-4">This is Phase 4, do consumer repos first</span>
         </li>
         <li>
           <strong>Consider design token sharing</strong>
-          <br/><span class="text-green-600 dark:text-green-500 ml-4">Calendar buttons should match app styling</span>
+          <br/><span class="text-accent-success ml-4">Calendar buttons should match app styling</span>
         </li>
       </ol>
     </div>
@@ -1078,50 +1078,50 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
 
 <Story name="Duplicate Components">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Duplicate/Outdated Components</h1>
-    <p class="text-gray-600 dark:text-gray-400">
+    <h1 class="text-2xl font-bold text-text-primary">Duplicate/Outdated Components</h1>
+    <p class="text-text-secondary">
       Components that exist in multiple places or are outdated versions.
     </p>
 
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-amber-800 dark:text-amber-300 mb-4">
+    <div class="bg-status-warning-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-accent-warning mb-4">
         Known Duplicates to Investigate
       </h2>
 
-      <p class="text-sm text-amber-700 dark:text-amber-400 mb-4">
+      <p class="text-sm text-accent-warning mb-4">
         These need to be audited - consumer repos may have local copies of components that are now in svelte-components:
       </p>
 
       <table class="w-full text-sm">
         <thead>
-          <tr class="text-left border-b border-amber-300 dark:border-amber-700">
-            <th class="py-2 font-semibold text-amber-700 dark:text-amber-300">Component</th>
-            <th class="py-2 font-semibold text-amber-700 dark:text-amber-300">In svelte-components</th>
-            <th class="py-2 font-semibold text-amber-700 dark:text-amber-300">Check Consumer Repos</th>
+          <tr class="text-left border-b border-accent-warning">
+            <th class="py-2 font-semibold text-accent-warning">Component</th>
+            <th class="py-2 font-semibold text-accent-warning">In svelte-components</th>
+            <th class="py-2 font-semibold text-accent-warning">Check Consumer Repos</th>
           </tr>
         </thead>
-        <tbody class="text-amber-600 dark:text-amber-400">
-          <tr class="border-b border-amber-200 dark:border-amber-800">
+        <tbody class="text-accent-warning">
+          <tr class="border-b border-status-warning-border">
             <td class="py-2">Button</td>
             <td class="py-2">primitives/Button/Button.svelte</td>
             <td class="py-2">$lib/components/Button?</td>
           </tr>
-          <tr class="border-b border-amber-200 dark:border-amber-800">
+          <tr class="border-b border-status-warning-border">
             <td class="py-2">Input</td>
             <td class="py-2">primitives/Input/Input.svelte</td>
             <td class="py-2">$lib/components/Input?</td>
           </tr>
-          <tr class="border-b border-amber-200 dark:border-amber-800">
+          <tr class="border-b border-status-warning-border">
             <td class="py-2">Modal</td>
             <td class="py-2">primitives/Modal/Modal.svelte</td>
             <td class="py-2">$lib/components/Modal?</td>
           </tr>
-          <tr class="border-b border-amber-200 dark:border-amber-800">
+          <tr class="border-b border-status-warning-border">
             <td class="py-2">Checkbox</td>
             <td class="py-2">primitives/Checkbox/Checkbox.svelte</td>
             <td class="py-2">$lib/components/Checkbox?</td>
           </tr>
-          <tr class="border-b border-amber-200 dark:border-amber-800">
+          <tr class="border-b border-status-warning-border">
             <td class="py-2">Avatar</td>
             <td class="py-2">primitives/Avatar/Avatar.svelte</td>
             <td class="py-2">$lib/components/Avatar?</td>
@@ -1134,9 +1134,9 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
         </tbody>
       </table>
 
-      <div class="mt-4 bg-white dark:bg-gray-800 rounded p-3">
-        <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Audit Commands:</h4>
-        <pre class="text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded overflow-x-auto">
+      <div class="mt-4 bg-card rounded p-3">
+        <h4 class="font-semibold text-text-secondary mb-2">Audit Commands:</h4>
+        <pre class="text-xs bg-muted p-2 rounded overflow-x-auto">
 # Check what local components exist:
 ls -la /Users/peet/repos/micdrop-frontend/src/lib/components/
 ls -la /Users/peet/repos/performers-portal/src/lib/components/
@@ -1146,27 +1146,27 @@ grep -r "from '\$lib/components/Button" /Users/peet/repos/micdrop-frontend/src -
       </div>
     </div>
 
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-blue-800 dark:text-blue-300 mb-4">
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-status-info-text mb-4">
         Within svelte-components: Potential Consolidation
       </h2>
 
-      <p class="text-sm text-blue-700 dark:text-blue-400 mb-4">
+      <p class="text-sm text-brand-primary mb-4">
         Check if any of these serve similar purposes and could be merged:
       </p>
 
-      <ul class="list-disc list-inside text-sm text-blue-600 dark:text-blue-400 space-y-2">
+      <ul class="list-disc list-inside text-sm text-brand-primary space-y-2">
         <li>
           <strong>Modal vs BottomSheet vs StatusModal vs ConfirmationModal</strong>
-          <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Are these all necessary, or can some be variants of one component?</span>
+          <br/><span class="text-brand-primary ml-4">→ Are these all necessary, or can some be variants of one component?</span>
         </li>
         <li>
           <strong>Select vs MultiSelect</strong>
-          <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Should these share more code? (SelectDropdown removed)</span>
+          <br/><span class="text-brand-primary ml-4">→ Should these share more code? (SelectDropdown removed)</span>
         </li>
         <li>
           <strong>Input vs OTPInput vs PlaceAutocomplete</strong>
-          <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Can OTPInput and PlaceAutocomplete build on Input?</span>
+          <br/><span class="text-brand-primary ml-4">→ Can OTPInput and PlaceAutocomplete build on Input?</span>
         </li>
       </ul>
     </div>
@@ -1175,77 +1175,77 @@ grep -r "from '\$lib/components/Button" /Users/peet/repos/micdrop-frontend/src -
 
 <Story name="Action Plan">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Recommended Action Plan</h1>
+    <h1 class="text-2xl font-bold text-text-primary">Recommended Action Plan</h1>
 
     <!-- Phase 1 COMPLETE -->
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6 border-2 border-green-500">
-      <h2 class="text-xl font-bold text-green-800 dark:text-green-300 mb-4">✓ Phase 1: Audit Complete (Dec 26, 2025)</h2>
+    <div class="bg-status-success-bg rounded-lg p-6 border-2 border-accent-success">
+      <h2 class="text-xl font-bold text-status-success-text mb-4">✓ Phase 1: Audit Complete (Dec 26, 2025)</h2>
 
       <div class="space-y-3">
         <div class="flex items-start gap-3">
           <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400 line-through">Scan svelte-components: 36 files, 13 need fixing</p>
+            <p class="font-medium text-status-success-text line-through">Scan svelte-components: 36 files, 13 need fixing</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400 line-through">Scan micdrop-frontend: 12 files, 25 raw buttons</p>
+            <p class="font-medium text-status-success-text line-through">Scan micdrop-frontend: 12 files, 25 raw buttons</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400 line-through">Scan performers-portal: 7 files, 27 raw buttons</p>
+            <p class="font-medium text-status-success-text line-through">Scan performers-portal: 7 files, 27 raw buttons</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400 line-through">Document findings with categorization and suggestions</p>
+            <p class="font-medium text-status-success-text line-through">Document findings with categorization and suggestions</p>
           </div>
         </div>
       </div>
     </div>
 
     <!-- Phase 2 COMPLETE -->
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6 border-2 border-green-500">
-      <h2 class="text-xl font-bold text-green-800 dark:text-green-300 mb-4">✓ Phase 2: Fix svelte-components (COMPLETE - Dec 26, 2025)</h2>
-      <p class="text-sm text-green-600 dark:text-green-400 mb-4">All 13 raw buttons in 2 files have been migrated. New Button variants added: avatar, menu-item, menu-item-danger, card.</p>
+    <div class="bg-status-success-bg rounded-lg p-6 border-2 border-accent-success">
+      <h2 class="text-xl font-bold text-status-success-text mb-4">✓ Phase 2: Fix svelte-components (COMPLETE - Dec 26, 2025)</h2>
+      <p class="text-sm text-accent-success mb-4">All 13 raw buttons in 2 files have been migrated. New Button variants added: avatar, menu-item, menu-item-danger, card.</p>
 
       <div class="space-y-3">
         <div class="flex items-start gap-3">
           <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400 line-through">CropImage.svelte - fully migrated to Button</p>
+            <p class="font-medium text-status-success-text line-through">CropImage.svelte - fully migrated to Button</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400 line-through">Header.svelte - 9 raw buttons → Button avatar/menu-item/menu-item-danger</p>
+            <p class="font-medium text-status-success-text line-through">Header.svelte - 9 raw buttons → Button avatar/menu-item/menu-item-danger</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400 line-through">SuperLogin.svelte - 4 raw buttons → Button card/link variants</p>
+            <p class="font-medium text-status-success-text line-through">SuperLogin.svelte - 4 raw buttons → Button card/link variants</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400 line-through">PR #25 updated with all fixes</p>
+            <p class="font-medium text-status-success-text line-through">PR #25 updated with all fixes</p>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-bold text-green-800 dark:text-green-300 mb-4">Phase 3: Fix Consumer Repos</h2>
+    <div class="bg-status-success-bg rounded-lg p-6">
+      <h2 class="text-xl font-bold text-status-success-text mb-4">Phase 3: Fix Consumer Repos</h2>
 
-      <p class="text-sm text-green-700 dark:text-green-400 mb-4">
+      <p class="text-sm text-status-success-text mb-4">
         <strong>Do one repo at a time.</strong> Start with performers-portal (smaller), then micdrop-frontend.
       </p>
 
@@ -1253,46 +1253,46 @@ grep -r "from '\$lib/components/Button" /Users/peet/repos/micdrop-frontend/src -
         <div class="flex items-start gap-3">
           <input type="checkbox" class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400">Update to latest @getmicdrop/svelte-components</p>
+            <p class="font-medium text-status-success-text">Update to latest @getmicdrop/svelte-components</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400">Replace raw &lt;button&gt; with Button component</p>
+            <p class="font-medium text-status-success-text">Replace raw &lt;button&gt; with Button component</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400">Replace raw &lt;input&gt; with Input component</p>
+            <p class="font-medium text-status-success-text">Replace raw &lt;input&gt; with Input component</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400">Delete local $lib/components that are now in shared lib</p>
+            <p class="font-medium text-status-success-text">Delete local $lib/components that are now in shared lib</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400">Update imports to use @getmicdrop/svelte-components</p>
+            <p class="font-medium text-status-success-text">Update imports to use @getmicdrop/svelte-components</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" class="mt-1" />
           <div>
-            <p class="font-medium text-green-700 dark:text-green-400">Test all affected pages</p>
+            <p class="font-medium text-status-success-text">Test all affected pages</p>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-bold text-purple-800 dark:text-purple-300 mb-4">Phase 4: Calendar Package (Separate)</h2>
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <h2 class="text-xl font-bold text-brand-primary mb-4">Phase 4: Calendar Package (Separate)</h2>
 
-      <p class="text-sm text-purple-700 dark:text-purple-400 mb-4">
+      <p class="text-sm text-brand-primary mb-4">
         Handle venue-calendar-npm as a separate project after the main consolidation.
       </p>
 
@@ -1300,13 +1300,13 @@ grep -r "from '\$lib/components/Button" /Users/peet/repos/micdrop-frontend/src -
         <div class="flex items-start gap-3">
           <input type="checkbox" class="mt-1" />
           <div>
-            <p class="font-medium text-purple-700 dark:text-purple-400">Fix raw buttons in venue-calendar-npm source</p>
+            <p class="font-medium text-brand-primary">Fix raw buttons in venue-calendar-npm source</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
           <input type="checkbox" class="mt-1" />
           <div>
-            <p class="font-medium text-purple-700 dark:text-purple-400">Re-embed updated calendar components</p>
+            <p class="font-medium text-brand-primary">Re-embed updated calendar components</p>
           </div>
         </div>
       </div>