Fix: Creating better visual distinction in light / dark mode for pills (#15474)

Fixing light vs dark mode for pills 

<img width="169" height="94" alt="CleanShot 2025-11-11 at 8  33 39"
src="https://github.com/user-attachments/assets/4504f970-c63f-4d2b-982b-7fcc5d4f643b"
/>

<img width="145" height="83" alt="CleanShot 2025-11-11 at 8  33 55"
src="https://github.com/user-attachments/assets/f34204c8-3a68-45ce-ae08-a60e053551e2"
/>

Author: codyde

src/components/sidebar/style.module.scss

@@ -169,11 +169,11 @@
   align-items: center;
   padding: 0.0625rem 0.375rem;
   font-size: 0.625rem;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  color: #fafaf9; /* off-white */
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #d97706; /* amber-600 for good contrast in light mode */
   background-color: transparent;
-  border: 1px solid #f59e0b; /* amber-500 warning color */
+  border: 2px solid #f59e0b; /* amber-500 warning color */
   border-radius: 0.25rem;
   white-space: nowrap;
   flex-shrink: 0;
@@ -189,11 +189,11 @@
   align-items: center;
   padding: 0.0625rem 0.375rem;
   font-size: 0.625rem;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  color: #fafaf9; /* off-white */
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #059669; /* emerald-600 for good contrast in light mode */
   background-color: transparent;
-  border: 1px solid #10b981; /* emerald-500 success green */
+  border: 2px solid #10b981; /* emerald-500 success green */
   border-radius: 0.25rem;
   white-space: nowrap;
   flex-shrink: 0;