feat: update CSS theming and enhance variable application for improved UI consistency

- Refactored CSS styles to utilize HSL color values for better theme adaptability.
- Added custom light and dark themes with comprehensive variable definitions to ensure consistent styling across the application.
- Implemented a mechanism to force CSS variable updates, ensuring that custom themes are applied correctly during runtime.

apps/web/src/app.css

@@ -34,9 +34,9 @@
   inset: -2px;
   border-radius: 1.15rem;
   box-shadow:
-    0 0 0 1px rgba(15, 23, 42, 0.04),
+    0 0 0 1px hsl(var(--bc) / 0.04),
-    0 14px 32px -22px rgba(15, 23, 42, 0.45),
+    0 14px 32px -22px hsl(var(--bc) / 0.45),
-    0 6px 18px -16px rgba(102, 126, 234, 0.35);
+    0 6px 18px -16px hsl(var(--p) / 0.35);
   opacity: 0.55;
   transition: opacity 220ms ease, transform 220ms ease;
   pointer-events: none;
@@ -48,7 +48,7 @@
   position: absolute;
   inset: 0;
   border-radius: 1rem;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
+  background: linear-gradient(135deg, hsl(var(--p) / 0.12), hsl(var(--s) / 0.12));
   opacity: 0;
   transform: scale(0.96);
   transition: opacity 220ms ease, transform 220ms ease;
@@ -58,7 +58,7 @@
 
 :where(.card, .card-hover):hover {
   transform: translateY(-6px);
-  box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.35);
+  box-shadow: 0 20px 45px -20px hsl(var(--bc) / 0.35);
 }
 
 :where(.card, .card-hover):hover::before {
@@ -156,6 +156,15 @@ html[data-theme="sgse-blue"] body,
   --tab-radius: 0.5rem;
 }
 
+/* Garantir que todas as variáveis CSS sejam aplicadas em todos os elementos */
+html[data-theme] {
+  color-scheme: var(--color-scheme, light);
+}
+
+html[data-theme] * {
+  color-scheme: inherit;
+}
+
 html[data-theme="sgse-green"],
 html[data-theme="sgse-green"] body,
 [data-theme="sgse-green"] {
@@ -388,4 +397,84 @@ html[data-theme="sgse-corporate"] body,
   --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
+}
+
+/* Tema Light customizado para garantir funcionamento completo */
+html[data-theme="light"],
+html[data-theme="light"] body,
+[data-theme="light"] {
+  color-scheme: light;
+  --p: 217 91% 60%;
+  --pf: 217 91% 50%;
+  --pc: 0 0% 100%;
+  --s: 217 91% 60%;
+  --sf: 217 91% 50%;
+  --sc: 0 0% 100%;
+  --a: 217 91% 60%;
+  --af: 217 91% 50%;
+  --ac: 0 0% 100%;
+  --n: 217 20% 17%;
+  --nf: 217 20% 10%;
+  --nc: 0 0% 100%;
+  --b1: 0 0% 100%;
+  --b2: 217 20% 95%;
+  --b3: 217 20% 90%;
+  --bc: 217 20% 17%;
+  --in: 217 91% 60%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
+}
+
+/* Tema Dark customizado para garantir funcionamento completo */
+html[data-theme="dark"],
+html[data-theme="dark"] body,
+[data-theme="dark"] {
+  color-scheme: dark;
+  --p: 217 91% 60%;
+  --pf: 217 91% 50%;
+  --pc: 0 0% 100%;
+  --s: 217 91% 60%;
+  --sf: 217 91% 50%;
+  --sc: 0 0% 100%;
+  --a: 217 91% 60%;
+  --af: 217 91% 50%;
+  --ac: 0 0% 100%;
+  --n: 217 30% 15%;
+  --nf: 217 30% 8%;
+  --nc: 0 0% 100%;
+  --b1: 217 30% 10%;
+  --b2: 217 30% 15%;
+  --b3: 217 30% 20%;
+  --bc: 217 10% 90%;
+  --in: 217 91% 60%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
 }

apps/web/src/lib/utils/temas.ts

@@ -171,6 +171,14 @@ export function aplicarTema(temaId: TemaId | string | null | undefined): void {
 		// Forçar reflow para garantir que o CSS seja aplicado
 		void htmlElement.offsetHeight;
 		
+		// Forçar atualização de todas as variáveis CSS
+		// Isso garante que os temas customizados sejam aplicados corretamente
+		if (typeof window !== 'undefined' && window.getComputedStyle) {
+			const computedStyle = window.getComputedStyle(htmlElement);
+			// Forçar recálculo das variáveis CSS
+			computedStyle.getPropertyValue('--p');
+		}
+		
 		// Disparar evento customizado para notificar mudança de tema
 		if (typeof window !== 'undefined') {
 			window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: nomeDaisyUI } }));