1 files changed, 181 insertions, 1 deletions

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 91221be..16d39fe 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,10 +2,190 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  /* Light theme */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9fafb;
+  --bg-tertiary: #f3f4f6;
+  --bg-canvas: #f8fafc;
+  --text-primary: #111827;
+  --text-secondary: #374151;
+  --text-muted: #6b7280;
+  --border-color: #e5e7eb;
+  --border-light: #f3f4f6;
+  --accent-blue: #3b82f6;
+  --accent-blue-hover: #2563eb;
+  --node-bg: #ffffff;
+  --node-border: #e5e7eb;
+  --node-selected: #3b82f6;
+}
+
+.dark {
+  /* Dark theme */
+  --bg-primary: #1f2937;
+  --bg-secondary: #111827;
+  --bg-tertiary: #374151;
+  --bg-canvas: #0f172a;
+  --text-primary: #f9fafb;
+  --text-secondary: #e5e7eb;
+  --text-muted: #9ca3af;
+  --border-color: #374151;
+  --border-light: #4b5563;
+  --accent-blue: #60a5fa;
+  --accent-blue-hover: #3b82f6;
+  --node-bg: #1f2937;
+  --node-border: #374151;
+  --node-selected: #60a5fa;
+}
+
 html, body, #root {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
-}
\ No newline at end of file
+}
+
+/* ReactFlow dark mode overrides */
+.dark .react-flow__background {
+  background-color: var(--bg-canvas);
+}
+
+.dark .react-flow__controls button {
+  background-color: var(--bg-primary);
+  border-color: var(--border-color);
+  color: var(--text-primary);
+}
+
+.dark .react-flow__controls button:hover {
+  background-color: var(--bg-tertiary);
+}
+
+.dark .react-flow__minimap {
+  background-color: var(--bg-secondary);
+}
+
+.dark .react-flow__edge-path {
+  stroke: var(--text-muted);
+}
+
+/* Dark mode form elements */
+.dark input,
+.dark textarea,
+.dark select {
+  background-color: var(--bg-tertiary) !important;
+  border-color: var(--border-color) !important;
+  color: var(--text-primary) !important;
+}
+
+.dark input::placeholder,
+.dark textarea::placeholder {
+  color: var(--text-muted) !important;
+}
+
+.dark input:focus,
+.dark textarea:focus,
+.dark select:focus {
+  border-color: var(--accent-blue) !important;
+  ring-color: var(--accent-blue) !important;
+}
+
+/* Dark mode labels and text */
+.dark label {
+  color: var(--text-secondary);
+}
+
+/* Dark mode buttons */
+.dark .bg-blue-600 {
+  background-color: #2563eb;
+}
+
+.dark .bg-blue-600:hover {
+  background-color: #1d4ed8;
+}
+
+.dark .bg-gray-50 {
+  background-color: var(--bg-secondary);
+}
+
+.dark .bg-gray-100 {
+  background-color: var(--bg-tertiary);
+}
+
+.dark .text-gray-700 {
+  color: var(--text-secondary);
+}
+
+.dark .text-gray-600 {
+  color: var(--text-muted);
+}
+
+.dark .text-gray-500 {
+  color: var(--text-muted);
+}
+
+.dark .border-gray-200 {
+  border-color: var(--border-color);
+}
+
+.dark .border-gray-300 {
+  border-color: var(--border-color);
+}
+
+/* Dark mode modals and overlays */
+.dark .bg-white {
+  background-color: var(--bg-primary);
+}
+
+/* Quick Chat specific dark mode */
+.dark .bg-blue-500 {
+  background-color: #3b82f6;
+}
+
+.dark .bg-gray-100 {
+  background-color: var(--bg-tertiary);
+}
+
+.dark .text-gray-800 {
+  color: var(--text-primary);
+}
+
+/* Dark mode hover states */
+.dark .hover\:bg-gray-50:hover {
+  background-color: var(--bg-tertiary) !important;
+}
+
+.dark .hover\:bg-gray-100:hover {
+  background-color: var(--bg-tertiary) !important;
+}
+
+.dark .hover\:bg-gray-200:hover {
+  background-color: #4b5563 !important;
+}
+
+.dark .hover\:text-gray-900:hover {
+  color: var(--text-primary) !important;
+}
+
+.dark .hover\:bg-blue-50:hover {
+  background-color: rgba(59, 130, 246, 0.2) !important;
+}
+
+.dark .hover\:bg-blue-100:hover {
+  background-color: rgba(59, 130, 246, 0.3) !important;
+}
+
+/* Dark mode for radio/checkbox */
+.dark input[type="radio"],
+.dark input[type="checkbox"] {
+  accent-color: var(--accent-blue);
+}
+
+/* Hide the selection box that wraps selected nodes */
+.react-flow__nodesselection-rect {
+  display: none !important;
+}
+
+.react-flow__nodesselection {
+  display: none !important;
+}