style: align UI with mobile productivity template and remove Google/Gemini references

frontend/src/index.css

@@ -3,27 +3,28 @@
 @tailwind utilities;
 
 :root {
-  /* Google Gemini / Material 3 Dark Palette */
-  --bg-canvas: #131314;
-  --bg-surface: #1e1f20;
-  --bg-surface-elevated: #282a2c;
-  --bg-surface-hover: #333537;
+  /* Template Dark Palette */
+  --bg-canvas: #16171a;
+  --bg-surface: #222428;
+  --bg-surface-elevated: #282a2f;
+  --bg-surface-hover: #32353b;
 
-  --border-subtle: rgba(255, 255, 255, 0.08);
-  --border-medium: #3c4043;
-  --border-focus: #a8c7fa;
+  --border-subtle: rgba(255, 255, 255, 0.07);
+  --border-active-green: rgba(34, 197, 94, 0.65);
+  --border-focus: #1d8cf8;
 
-  --color-primary: #a8c7fa;
-  --color-primary-container: #004a77;
-  --color-on-primary-container: #d3e3fd;
+  --color-primary: #1d8cf8;
+  --color-primary-hover: #3b9cfc;
+  --color-on-primary: #ffffff;
 
-  --color-success: #a8dab5;
-  --color-danger: #f28b82;
-  --color-warning: #fdd663;
+  --color-success: #22c55e;
+  --color-danger: #ef4444;
+  --color-warning: #f97316;
+  --color-purple: #a855f7;
 
-  --text-primary: #e3e3e3;
-  --text-secondary: #c4c7c5;
-  --text-tertiary: #8e918f;
+  --text-primary: #ffffff;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
 }
 
 * {
@@ -38,7 +39,7 @@ body {
   overflow-x: hidden;
 }
 
-/* Subtle Material scrollbar */
+/* Subtle clean scrollbar */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -57,10 +58,11 @@ body {
   background: rgba(255, 255, 255, 0.22);
 }
 
-.gemini-border {
+.border-subtle {
   border: 1px solid var(--border-subtle);
 }
 
-.gemini-border-medium {
-  border: 1px solid var(--border-medium);
+.card-surface {
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
 }