style: overhaul design to authentic Google Gemini Material 3 Dark theme

BRAIN.md

@@ -5,34 +5,37 @@
 
 ## 🎨 1. Design-Tokens & Gemini-Dark-Theme (Copy & Paste)
 
-### Farbpalette (Strict Hex Values)
+### Farbpalette (Strict Hex Values - Google Gemini Material 3 Dark)
 ```css
-/* Backgrounds */
---bg-app:        #0b0f19;  /* Tiefstes Obsidian / OLED Base */
---bg-surface:    #131314;  /* Leicht erhobene Panels, Sidebar */
---bg-card:       #1e1f20;  /* Swipe-Karten, Dialoge, Dropdowns */
---bg-card-hover: #282a2c;  /* Hover-Zustände */
+/* Backgrounds (Material 3 Dark Theme) */
+--bg-canvas:     #131314;  /* Google Gemini Canvas */
+--bg-surface:    #1e1f20;  /* Surface Container (Karten, Dialoge, Panels) */
+--bg-elevated:   #282a2c;  /* Elevated Container / Tonal Chips / Hover */
+--bg-field:      #131314;  /* Input Field Fill */
 
 /* Borders & Dividers */
---border-subtle: rgba(255, 255, 255, 0.08); /* 1px Standard-Kante */
---border-focus:  rgba(138, 180, 248, 0.40); /* Gemini Blue Glow */
+--border-subtle: rgba(255, 255, 255, 0.08); /* 1px Hairline Kante */
+--border-focus:  rgba(168, 199, 250, 0.40); /* Gemini Primary Blue Hairline */
 
-/* Akzente & Status */
---accent-blue:   #8ab4f8;  /* Gemini Primärblau (Buttons, Links, Active) */
---accent-purple: #c58af9;  /* Gemini Voice / Magic Glow */
---swipe-keep:    #81c995;  /* Swipe Rechts (Behalten / ToDo / Success) */
---swipe-discard: #f28b82;  /* Swipe Links (Verwerfen / Archive / Danger) */
+/* Akzente & Status (Material 3 Soft Pastels - KEINE grellen AI-Farbverläufe) */
+--color-primary: #a8c7fa;  /* Google Gemini Primary Blue */
+--color-on-pri:  #041e49;  /* Text on Primary Container */
+--color-success: #a8dab5;  /* Soft Green (Check / Kept) */
+--color-danger:  #f28b82;  /* Soft Coral Red (Discard / Delete) */
+--color-warning: #fdd663;  /* Warm Amber */
 
 /* Typografie */
---text-primary:  #e3e3e3;  /* Haupttext (hoher Kontrast, augenschonend) */
---text-muted:    #9aa0a6;  /* Sekundärtexte, Metadaten, Placeholders */
---text-subtle:   #5f6368;  /* Timestamps, Footer, Deaktiviert */
+--text-primary:   #e3e3e3;  /* High Emphasis */
+--text-secondary: #c4c7c5;  /* Medium Emphasis */
+--text-muted:     #8e918f;  /* Low Emphasis / Subtle */
 ```
 
 ### UI-Regeln & Radien
-* **Buttons / Pills:** Ausnahmslos `rounded-full` (`border-radius: 9999px`).
-* **Karten (Triage Deck):** `rounded-3xl` (`24px`), Padding `p-6`, Border `1px solid var(--border-subtle)`.
-* **Input-Feld (Instant Capture):** `rounded-full`, Höhe `h-14` (56px) für mobile Daumenbedienung, Autofokus bei Mount.
+* **Keine grellen Farbverläufe:** Niemals Blau-zu-Lila-Gradienten wie billige AI-Templates. Strikte neutrale Anthrazit-Flächen mit sanften Pastell-Akzenten.
+* **Keine grellen Glow-Schatten:** Keine starken farbigen Drop-Shadows oder Neon-Glows. Feine `border: 1px solid rgba(255,255,255,0.08)` Hairlines nutzen.
+* **Buttons / Pills:** `rounded-full` (`border-radius: 9999px`) für Filter, Actions und Navigation.
+* **Karten:** `rounded-2xl` (`16px`) oder `rounded-3xl` (`24px`), Padding `p-5` bis `p-6`, Border `1px solid rgba(255, 255, 255, 0.08)`.
+* **Input-Feld (Instant Capture):** Prompt-Box-Stil wie Google Gemini, Höhe `h-14` (56px) für mobile Daumenbedienung, Autofokus bei Mount.
 * **Gesten-Physik (Framer Motion):**
   * Swipe-Schwellenwert: `dragConstraints={{ left: -150, right: 150 }}`
   * Spring-Config: `{ type: "spring", stiffness: 350, damping: 25 }`