fix: add explicit semi-transparent background color variables

Add dedicated CSS variables for 50% opacity backgrounds
(bg-secondary-50, bg-tertiary-50) since Tailwind's opacity modifier
doesn't work with CSS variable hex values. Update all components
to use the new color classes.

Author: msujaws

src/components/Board/AssigneePicker.tsx

@@ -116,7 +116,7 @@ export function AssigneePicker({
                         handleSelect(assignee.email)
                       }}
                       className={`flex cursor-pointer items-center gap-3 px-4 py-2 transition-colors ${
-                        isSelected ? 'bg-bg-tertiary/50' : ''
+                        isSelected ? 'bg-bg-tertiary-50' : ''
                       } ${isFocused ? 'ring-2 ring-inset ring-accent-primary' : 'hover:bg-bg-tertiary'}`}
                     >
                       {/* Account circle icon */}

src/components/Board/BacklogSection.tsx

@@ -172,7 +172,7 @@ export function BacklogSection({
     if (isDropTarget) {
       return `${base} bg-accent-warning/10 ring-2 ring-dashed ring-accent-warning`
     }
-    return `${base} bg-bg-secondary/50`
+    return `${base} bg-bg-secondary-50`
   }
 
   return (

src/components/Board/Column.tsx

@@ -135,7 +135,7 @@ export function Column({
     if (isDropTarget) {
       return `${base} bg-accent-warning/10 ring-2 ring-dashed ring-accent-warning`
     }
-    return `${base} bg-bg-secondary/50`
+    return `${base} bg-bg-secondary-50`
   }
 
   return (

src/components/Board/PointsPicker.tsx

@@ -131,7 +131,7 @@ export function PointsPicker({
                       handleSelect(option.value)
                     }}
                     className={`flex cursor-pointer items-center justify-between px-4 py-2 transition-colors ${
-                      isSelected ? 'bg-bg-tertiary/50' : ''
+                      isSelected ? 'bg-bg-tertiary-50' : ''
                     } ${isFocused ? 'ring-2 ring-inset ring-accent-primary' : 'hover:bg-bg-tertiary'}`}
                   >
                     <span className="text-sm font-medium text-text-primary">{option.label}</span>

src/components/Board/PriorityPicker.tsx

@@ -116,7 +116,7 @@ export function PriorityPicker({
                       handleSelect(option.value)
                     }}
                     className={`flex cursor-pointer items-center gap-3 px-4 py-2 transition-colors ${
-                      isSelected ? 'bg-bg-tertiary/50' : ''
+                      isSelected ? 'bg-bg-tertiary-50' : ''
                     } ${isFocused ? 'ring-2 ring-inset ring-accent-primary' : 'hover:bg-bg-tertiary'}`}
                   >
                     {/* Color indicator */}

src/components/Board/QeVerifyPicker.tsx

@@ -115,7 +115,7 @@ export function QeVerifyPicker({
                       handleSelect(option.value)
                     }}
                     className={`flex cursor-pointer items-center gap-3 px-4 py-2 transition-colors ${
-                      isSelected ? 'bg-bg-tertiary/50' : ''
+                      isSelected ? 'bg-bg-tertiary-50' : ''
                     } ${isFocused ? 'ring-2 ring-inset ring-accent-primary' : 'hover:bg-bg-tertiary'}`}
                   >
                     {/* Label and description */}

src/components/Board/SeverityPicker.tsx

@@ -116,7 +116,7 @@ export function SeverityPicker({
                       handleSelect(option.value)
                     }}
                     className={`flex cursor-pointer items-center gap-3 px-4 py-2 transition-colors ${
-                      isSelected ? 'bg-bg-tertiary/50' : ''
+                      isSelected ? 'bg-bg-tertiary-50' : ''
                     } ${isFocused ? 'ring-2 ring-inset ring-accent-primary' : 'hover:bg-bg-tertiary'}`}
                   >
                     {/* Color indicator */}

src/components/FAQ/FaqModal.tsx

@@ -135,7 +135,7 @@ export function FAQModal({ isOpen, onClose }: FAQModalProps) {
             <div className="max-h-[60vh] overflow-y-auto px-6 py-4">
               <div className="space-y-4">
                 {faqs.map((faq, index) => (
-                  <div key={index} className="rounded-lg bg-bg-tertiary/50 p-4">
+                  <div key={index} className="rounded-lg bg-bg-tertiary-50 p-4">
                     <h3 className="mb-2 flex items-start gap-2 font-bold text-text-primary">
                       <span className="material-icons text-accent-primary">help</span>
                       {faq.question}

src/components/Filters/AssigneeFilter.tsx

@@ -101,7 +101,7 @@ export function AssigneeFilter({
                   handleSelect(null)
                 }}
                 className={`flex cursor-pointer items-center gap-3 px-4 py-2 transition-colors hover:bg-bg-tertiary ${
-                  selectedAssignee === null ? 'bg-bg-tertiary/50' : ''
+                  selectedAssignee === null ? 'bg-bg-tertiary-50' : ''
                 }`}
               >
                 <span className="material-icons text-text-tertiary">group</span>
@@ -126,7 +126,7 @@ export function AssigneeFilter({
                       handleSelect(assignee.email)
                     }}
                     className={`flex cursor-pointer items-center gap-3 px-4 py-2 transition-colors hover:bg-bg-tertiary ${
-                      isSelected ? 'bg-bg-tertiary/50' : ''
+                      isSelected ? 'bg-bg-tertiary-50' : ''
                     }`}
                   >
                     <span className="material-icons text-text-tertiary">account_circle</span>

src/index.css

@@ -15,7 +15,9 @@
   /* Background layers */
   --color-bg-primary: #0a0a0a;
   --color-bg-secondary: #141414;
+  --color-bg-secondary-50: #14141480;
   --color-bg-tertiary: #1e1e1e;
+  --color-bg-tertiary-50: #1e1e1e80;
 
   /* Text colors */
   --color-text-primary: #f5f5f5;
@@ -53,7 +55,9 @@
   /* Background layers */
   --color-bg-primary: #fff;
   --color-bg-secondary: #f5f5f5;
+  --color-bg-secondary-50: #f5f5f580;
   --color-bg-tertiary: #e5e5e5;
+  --color-bg-tertiary-50: #e5e5e580;
 
   /* Text colors */
   --color-text-primary: #171717;