style: improve accessibility contrast and set default theme to dark

shop/app/globals.css

@@ -4,48 +4,82 @@
 
 @layer base {
   :root {
-    --background: 220 33% 98%;
+    /* Light Mode: Maximierter Kontrast (Reines Weißer Hintergrund + Tiefschwarzer Text) */
-    --foreground: 220 40% 2%;
+    --background: 0 0% 100%;
+    --foreground: 224 71% 4%;
     --card: 0 0% 100%;
-    --card-foreground: 220 40% 2%;
+    --card-foreground: 224 71% 4%;
     --popover: 0 0% 100%;
-    --popover-foreground: 220 40% 2%;
+    --popover-foreground: 224 71% 4%;
-    --primary: 199 100% 43%;
+
+    /* Primary: Cyan/Blau lesbarer gemacht */
+    --primary: 199 100% 35%;
     --primary-foreground: 0 0% 100%;
+
+    /* Muted & Accent: Deutlich dunklerer Text für Barrierefreiheit */
     --secondary: 220 14% 90%;
-    --secondary-foreground: 220 40% 2%;
+    --secondary-foreground: 224 71% 4%;
-    --muted: 220 14% 90%;
+    --muted: 220 14% 92%;
-    --muted-foreground: 220 14% 40%;
+    --muted-foreground: 220 20% 28%;
+    /* Vorher 40% Helligkeit, jetzt 28% (viel dunkler) */
     --accent: 220 14% 90%;
-    --accent-foreground: 220 40% 2%;
+    --accent-foreground: 224 71% 4%;
-    --destructive: 0 84% 60%;
+
+    --destructive: 0 84% 50%;
     --destructive-foreground: 0 0% 100%;
-    --border: 220 14% 85%;
+    --border: 220 14% 75%;
-    --input: 220 14% 85%;
+    /* Grenzen sichtbarer gemacht */
-    --ring: 220 90% 56%;
+    --input: 220 14% 75%;
+    --ring: 199 100% 35%;
     --radius: 0.75rem;
   }
 
   .dark {
-    --background: 224 71% 4%;
+    /* Dark Mode: Reines Tiefschwarz erhöht den Kontrast zu weißem Text drastisch */
-    --foreground: 213 31% 91%;
+    --background: 240 10% 3.9%;
-    --card: 224 71% 4%;
+    --foreground: 0 0% 98%;
-    --card-foreground: 213 31% 91%;
+    --card: 240 10% 3.9%;
-    --popover: 224 71% 4%;
+    --card-foreground: 0 0% 98%;
-    --popover-foreground: 213 31% 91%;
+    --popover: 240 10% 3.9%;
-    --primary: 210 40% 98%;
+    --popover-foreground: 0 0% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+
-    --secondary: 222.2 47.4% 11.2%;
+    --primary: 0 0% 98%;
-    --secondary-foreground: 210 40% 98%;
+    --primary-foreground: 240 5.9% 10%;
-    --muted: 222.2 47.4% 11.2%;
+
-    --muted-foreground: 215.4 16.3% 56.9%;
+    --secondary: 240 3.7% 15.9%;
-    --accent: 222.2 47.4% 11.2%;
+    --secondary-foreground: 0 0% 98%;
-    --accent-foreground: 210 40% 98%;
+
-    --destructive: 0 63% 31%;
+    /* Muted Text: Helligkeit massiv erhöht, damit Beschreibungen lesbar sind */
-    --destructive-foreground: 210 40% 98%;
+    --muted: 240 3.7% 15.9%;
-    --border: 222.2 47.4% 11.2%;
+    --muted-foreground: 240 5% 75%;
-    --input: 222.2 47.4% 11.2%;
+    /* Vorher 56.9% Helligkeit, jetzt 75% (viel heller) */
-    --ring: 212.7 26.8% 83.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 72% 51%;
+    /* Helleres Rot für dunklen Hintergrund */
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 25%;
+    /* Grenzen im Dunkeln besser sichtbar */
+    --input: 240 3.7% 25%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+/* Automatischer High-Contrast-Modus für Betriebssystem-Vorgaben */
+@media (prefers-contrast: more) {
+  :root {
+    --foreground: 0 0% 0%;
+    --muted-foreground: 0 0% 0%;
+    --border: 0 0% 0%;
+  }
+
+  .dark {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+    --muted-foreground: 0 0% 100%;
+    --border: 0 0% 100%;
   }
 }
 
@@ -53,6 +87,7 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground antialiased;
     font-feature-settings: "rlig" 1, "calt" 1;
@@ -60,13 +95,17 @@
 }
 
 @layer utilities {
+
+  /* Glassmorphism Kontraste geschärft (höhere Deckkraft) */
   .glass {
-    @apply bg-white/10 backdrop-blur-md border border-white/20;
+    @apply bg-white/20 backdrop-blur-md border border-white/40;
   }
+
   .glass-dark {
-    @apply bg-black/20 backdrop-blur-md border border-white/10;
+    @apply bg-black/40 backdrop-blur-md border border-white/20;
   }
+
   .text-gradient {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400;
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-sky-500 to-blue-600 dark:from-primary dark:to-blue-400;
   }
-}
+}

shop/app/layout.tsx

@@ -32,8 +32,8 @@ export default function RootLayout({
       <body className={`${geistSans.className} antialiased`}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
+          defaultTheme="dark"
-          enableSystem
+          enableSystem={false}
           disableTransitionOnChange
         >
           <InactivityTracker />