refactor: convert color system to RGB channels for native Tailwind opacity

Root cause fix for all broken CSS variable opacity modifiers. Converted
every hex CSS variable to space-separated RGB channels (e.g. #fda4af →
253 164 175) and updated Tailwind config to use rgb(var(...) / <alpha-value>).
This makes bg-accent-rose/10, border-border-hard/50, etc. work natively
everywhere — no more currentColor fallback. Reverted all previous explicit
rgba() workarounds back to clean Tailwind syntax. Also fixed the voice
connection wifi icon SVG (was bottom-left aligned, now centered).

packages/web/src/styles/globals.css

@@ -4,55 +4,55 @@
 
 @layer base {
   :root {
-    /* ── Matte Surfaces ── */
-    --bg-base: #0b0b10;
-    --bg-channel: #1a1a23;
-    --bg-chat: #13131a;
-    --bg-members: #1a1a23;
-    --bg-elevated: #252530;
-    --bg-input: #111118;
+    /* ── Matte Surfaces (RGB channels for Tailwind opacity support) ── */
+    --bg-base: 11 11 16;
+    --bg-channel: 26 26 35;
+    --bg-chat: 19 19 26;
+    --bg-members: 26 26 35;
+    --bg-elevated: 37 37 48;
+    --bg-input: 17 17 24;
     --bg-overlay: rgba(0, 0, 0, 0.85);
 
     /* ── Borders ── */
-    --border-hard: #22222c;
-    --border-soft: #2a2a36;
+    --border-hard: 34 34 44;
+    --border-soft: 42 42 54;
 
     /* ── Pastel Accents ── */
-    --accent-mint: #86efac;
-    --accent-peach: #fca5a5;
-    --accent-lavender: #c4b5fd;
-    --accent-sky: #7dd3fc;
-    --accent-amber: #fcd34d;
-    --accent-rose: #fda4af;
-    --accent-coral: #fb923c;
+    --accent-mint: 134 239 172;
+    --accent-peach: 252 165 165;
+    --accent-lavender: 196 181 253;
+    --accent-sky: 125 211 252;
+    --accent-amber: 252 211 77;
+    --accent-rose: 253 164 175;
+    --accent-coral: 251 146 60;
 
     /* ── Primary Action (replaces blurple) ── */
-    --accent-primary: #7c6cf6;
-    --accent-primary-hover: #6b5ce0;
-    --accent-primary-active: #5f4fd0;
+    --accent-primary: 124 108 246;
+    --accent-primary-hover: 107 92 224;
+    --accent-primary-active: 95 79 208;
 
     /* ── Text Hierarchy ── */
-    --text-primary: #efefef;
-    --text-secondary: #a0a0aa;
-    --text-tertiary: #5c5c68;
-    --text-category: #484854;
-    --text-message: #d8d8de;
-    --text-link: #7dd3fc;
-    --text-positive: #86efac;
-    --text-warning: #fcd34d;
-    --text-danger: #fca5a5;
+    --text-primary: 239 239 239;
+    --text-secondary: 160 160 170;
+    --text-tertiary: 92 92 104;
+    --text-category: 72 72 84;
+    --text-message: 216 216 222;
+    --text-link: 125 211 252;
+    --text-positive: 134 239 172;
+    --text-warning: 252 211 77;
+    --text-danger: 252 165 165;
 
     /* ── Interactive ── */
     --interactive-hover: rgba(255, 255, 255, 0.06);
     --interactive-active: rgba(255, 255, 255, 0.12);
     --interactive-selected: rgba(255, 255, 255, 0.16);
-    --interactive-muted: #3a3a44;
+    --interactive-muted: 58 58 68;
 
     /* ── Status ── */
-    --status-online: #86efac;
-    --status-idle: #fcd34d;
-    --status-dnd: #fca5a5;
-    --status-offline: #3a3a44;
+    --status-online: 134 239 172;
+    --status-idle: 252 211 77;
+    --status-dnd: 252 165 165;
+    --status-offline: 58 58 68;
 
     /* ── Glass Material ── */
     --glass-bg: rgba(20, 20, 26, 0.52);
@@ -60,7 +60,7 @@
     --glass-highlight: rgba(255, 255, 255, 0.05);
 
     /* ── Notification ── */
-    --notification: #fda4af;
+    --notification: 253 164 175;
   }
 
   * {
@@ -70,7 +70,7 @@
 
   ::selection {
     background: rgba(134, 239, 172, 0.25);
-    color: var(--text-primary);
+    color: rgb(var(--text-primary));
   }
 
   html, body, #root {
@@ -92,14 +92,14 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: var(--bg-input);
+    background-color: rgb(var(--bg-input));
     border-radius: 9999px;
     border: 2px solid transparent;
     background-clip: padding-box;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--bg-channel);
+    background-color: rgb(var(--bg-channel));
   }
 
   .no-scrollbar::-webkit-scrollbar {
@@ -180,23 +180,23 @@
   .glass {
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
-    background: var(--bg-channel);
+    background: rgb(var(--bg-channel));
   }
   .glass-strip {
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
-    background: var(--bg-channel);
+    background: rgb(var(--bg-channel));
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.20);
   }
   .glass-bubble {
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
-    background: var(--bg-elevated);
+    background: rgb(var(--bg-elevated));
   }
   .glass-pill {
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
-    background: var(--bg-elevated);
+    background: rgb(var(--bg-elevated));
   }
 }