From 682863ab26223b42b11a385e1f4baffe18abfabb Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Fri, 14 Aug 2026 16:04:43 +0200
Subject: [PATCH] style(globals): add color-mix transparency rules

---
 shop/app/globals.css | 45 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/shop/app/globals.css b/shop/app/globals.css
index 7778e50..18578fa 100644
--- a/shop/app/globals.css
+++ b/shop/app/globals.css
@@ -52,24 +52,34 @@ html {
   --radius: 0.75rem;
 }
 
-/* Dynamische Brand-Farbanpassungen */
-.bg-blue-600, .bg-blue-500, .bg-violet-600, .bg-purple-600 {
+/* 100% Dynamische Farbbindung für das gesamte Webshop Design-System */
+.bg-blue-600, .bg-blue-500, .bg-violet-600, .bg-purple-600, .bg-sky-500, .bg-cyan-600, .bg-indigo-600 {
   background-color: var(--primary-custom) !important;
 }
 
-.hover\:bg-blue-500:hover, .hover\:bg-violet-500:hover {
+.hover\:bg-blue-500:hover, .hover\:bg-violet-500:hover, .hover\:bg-blue-600:hover {
   background-color: var(--primary-custom) !important;
   filter: brightness(1.1);
 }
 
-.text-blue-500, .text-blue-400, .text-blue-600, .text-violet-400, .text-sky-400 {
+.text-blue-500, .text-blue-400, .text-blue-600, .text-violet-400, .text-sky-400, .text-sky-300, .text-indigo-400 {
   color: var(--primary-custom) !important;
 }
 
-.border-blue-500, .border-blue-600, .border-violet-500 {
+.border-blue-500, .border-blue-600, .border-violet-500, .border-sky-500 {
   border-color: var(--primary-custom) !important;
 }
 
+/* Dynamische Transparenz-Schichten & Badges mit color-mix */
+[class*="bg-blue-500/"], [class*="bg-violet-500/"], [class*="bg-purple-500/"], [class*="bg-sky-500/"] {
+  background-color: color-mix(in srgb, var(--primary-custom) 15%, transparent) !important;
+}
+
+[class*="border-blue-500/"], [class*="border-violet-500/"], [class*="border-purple-500/"], [class*="border-sky-500/"] {
+  border-color: color-mix(in srgb, var(--primary-custom) 35%, transparent) !important;
+}
+
+/* Dynamische Gradients */
 .from-blue-600, .from-blue-500, .from-violet-600 {
   --tw-gradient-from: var(--gradient-from, var(--primary-custom)) !important;
   --tw-gradient-to: rgb(255 255 255 / 0) !important;
@@ -93,6 +103,14 @@ html {
   border-color: var(--success-custom) !important;
 }
 
+[class*="bg-emerald-500/"], [class*="bg-green-500/"] {
+  background-color: color-mix(in srgb, var(--success-custom) 15%, transparent) !important;
+}
+
+[class*="border-emerald-500/"], [class*="border-green-500/"] {
+  border-color: color-mix(in srgb, var(--success-custom) 35%, transparent) !important;
+}
+
 .bg-amber-500, .bg-amber-600 {
   background-color: var(--warning-custom) !important;
 }
@@ -105,6 +123,14 @@ html {
   border-color: var(--warning-custom) !important;
 }
 
+[class*="bg-amber-500/"] {
+  background-color: color-mix(in srgb, var(--warning-custom) 15%, transparent) !important;
+}
+
+[class*="border-amber-500/"] {
+  border-color: color-mix(in srgb, var(--warning-custom) 35%, transparent) !important;
+}
+
 .bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600 {
   background-color: var(--destructive-custom) !important;
 }
@@ -117,6 +143,15 @@ html {
   border-color: var(--destructive-custom) !important;
 }
 
+[class*="bg-red-500/"], [class*="bg-rose-500/"] {
+  background-color: color-mix(in srgb, var(--destructive-custom) 15%, transparent) !important;
+}
+
+[class*="border-red-500/"], [class*="border-rose-500/"] {
+  border-color: color-mix(in srgb, var(--destructive-custom) 35%, transparent) !important;
+}
+
+/* Background Glowing Orbs */
 .blur-\[120px\] {
   background-color: var(--bg-glow-1) !important;
 }