fix(widgets): update gaufre CSS layout

packages/widgets/src/widgets/lagaufre/styles.css

@@ -12,10 +12,10 @@
   z-index: 1000;
   width: 340px;
   max-height: 480px;
-  background: white;
+  background: var(--c--globals--colors--blue-1-900, #121c2d);
   border-radius: 0.25rem;
-  box-shadow: 0 0px 6px rgba(0, 0, 145, 0.1);
-  border: 1px solid #e5e5e5;
+  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   overflow: hidden;
 }
 
@@ -25,7 +25,7 @@
   align-items: center;
   padding: 4px 16px;
   background: transparent;
-  border-bottom: 1px solid #dfe2ea;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   min-height: 48px;
   position: relative;
 }
@@ -46,7 +46,7 @@
 #close {
   background: none;
   border: none;
-  color: #64748b;
+  color: rgba(255, 255, 255, 0.6);
   cursor: pointer;
   font-size: 36px;
   width: 36px;
@@ -59,23 +59,23 @@
 }
 
 #close:hover {
-  background-color: #f0f0f0;
+  background-color: rgba(255, 255, 255, 0.08);
 }
 
 #close:focus {
-  outline: 2px solid #0a76f6;
+  outline: 2px solid var(--c--globals--colors--brand-500, #0a76f6);
 }
 
 #footer {
   display: none; /* Hidden by default on desktop */
   padding: 16px;
   background: transparent;
-  border-top: 1px solid #dfe2ea;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   justify-content: flex-end;
 }
 
 #ok-button {
-  background: #3e5de7;
+  background: var(--c--globals--colors--brand-500, #3e5de7);
   color: white;
   border: none;
   border-radius: 6px;
@@ -88,11 +88,11 @@
 }
 
 #ok-button:hover {
-  background: #1d4ed8;
+  background: var(--c--globals--colors--brand-600, #1d4ed8);
 }
 
 #ok-button:focus {
-  outline: 2px solid #0a76f6;
+  outline: 2px solid var(--c--globals--colors--brand-500, #0a76f6);
 }
 
 #content {
@@ -109,7 +109,7 @@
   align-items: center;
   justify-content: center;
   padding: 40px 20px;
-  color: #666;
+  color: rgba(255, 255, 255, 0.5);
   font-size: 14px;
   margin: 16px;
 }
@@ -158,7 +158,7 @@
 
 /* More apps section */
 #more-apps {
-  border-top: 1px solid #dfe2ea;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding: 16px;
   background: transparent;
   display: flex;
@@ -184,7 +184,7 @@
 
 #show-more-button {
   background: none;
-  color: #626A80;
+  color: rgba(255, 255, 255, 0.6);
   border: none;
   border-radius: 6px;
   padding: 8px 16px;
@@ -199,8 +199,8 @@
 }
 
 #show-more-button:hover {
-  background: #f1f5f9;
-  color: #475569;
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.8);
 }
 
 #show-more-button:focus {
@@ -208,7 +208,7 @@
 }
 
 #show-more-button:focus-visible {
-  outline: 2px solid #0a76f6;
+  outline: 2px solid var(--c--globals--colors--brand-500, #0a76f6);
   outline-offset: 2px;
 }
 
@@ -223,7 +223,7 @@
 }
 
 .service-card:hover {
-  background-color: #eef1f4;
+  background-color: rgba(255, 255, 255, 0.06);
   border-radius: 6px;
 }
 
@@ -247,8 +247,8 @@
   top: 40px;
   left: 50%;
   transform: translateX(-50%);
-  background: #eef1f4;
-  color: #2845c1;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--c--globals--colors--brand-700, #2845c1);
   border-radius: 12px;
   padding: 2px 4px;
   font-size: 9px;
@@ -271,7 +271,7 @@
 .service-name {
   font-weight: 600;
   font-size: 14px;
-  color: #1e40af;
+  color: var(--c--globals--colors--brand-400, #fbbf24);
   margin-bottom: 2px;
   line-height: 1.2;
   text-align: center;
@@ -301,7 +301,7 @@
   #more-services-grid {
     display: grid !important;
   }
-  
+
   #show-more-button {
     display: none;
   }
@@ -355,10 +355,10 @@
 }
 
 #content::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
+  background: rgba(255, 255, 255, 0.2);
   border-radius: 2px;
 }
 
 #content::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
+  background: rgba(255, 255, 255, 0.35);
 }