Fix form keyboard issues and sticky footers in agent screens

src/theme/ThemeContext.tsx

@@ -0,0 +1,11 @@
+import React, { createContext, type PropsWithChildren, useContext } from 'react';
+
+import { darkTheme, type FintechTheme } from './tokens';
+
+const ThemeContext = createContext<FintechTheme>(darkTheme);
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => (
+  <ThemeContext.Provider value={darkTheme}>{children}</ThemeContext.Provider>
+);
+
+export const useThemeContext = () => useContext(ThemeContext);

src/theme/index.ts

@@ -0,0 +1,3 @@
+export * from './ThemeContext';
+export * from './tokens';
+export * from './useTheme';

src/theme/tokens.ts

@@ -0,0 +1,137 @@
+export interface FintechTheme {
+  colors: {
+    background: string;
+    backgroundElevated: string;
+    backgroundGradient: [string, string, string];
+    surface: string;
+    surfaceMuted: string;
+    cardGlass: string;
+    cardBorder: string;
+    textPrimary: string;
+    textSecondary: string;
+    textMuted: string;
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    accent: string;
+    accentStrong: string;
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    overlay: string;
+    white: string;
+    error: string;
+    // Cyber Nexus Accents
+    cyberCyan: string;
+    cyberPurple: string;
+    cyberGlow: string;
+  };
+  spacing: {
+    xxs: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+  };
+  typography: {
+    hero: number;
+    h1: number;
+    h2: number;
+    h3: number;
+    body: number;
+    bodySmall: number;
+    caption: number;
+  };
+  radius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    pill: number;
+  };
+  shadows: {
+    soft: {
+      shadowColor: string;
+      shadowOffset: { width: number; height: number };
+      shadowOpacity: number;
+      shadowRadius: number;
+      elevation: number;
+    };
+  };
+}
+
+// Keeping the export name as `darkTheme` for now so we don't break every import,
+// but the theme values represent the new Light Corporate Design language.
+export const darkTheme: FintechTheme = {
+  colors: {
+    background: '#F1F5F9', // Light gray background
+    backgroundElevated: '#FFFFFF',
+    backgroundGradient: ['#FFFFFF', '#F8FAFC', '#F1F5F9'],
+    surface: '#FFFFFF',
+    surfaceMuted: '#F8FAFC',
+    cardGlass: 'rgba(255, 255, 255, 0.9)',
+    cardBorder: 'rgba(0, 0, 0, 0.05)',
+    textPrimary: '#0F172A',
+    textSecondary: '#124577',
+    textMuted: '#94A3B8',
+    primary: '#124577', // Brand Light Blue/Cyan
+    primaryLight: '#60A5FA',
+    primaryDark: '#2563EB',
+    accent: '#10B981', // Brand Green
+    accentStrong: '#059669',
+    success: '#10B981',
+    warning: '#F59E0B',
+    danger: '#EF4444',
+    info: '#3B82F6',
+    overlay: 'rgba(0, 0, 0, 0.4)',
+    white: '#FFFFFF',
+    error: '#EF4444',
+    // Cyber Nexus Accents (Resetting to neutral or removing usage)
+    cyberCyan: '#3B82F6',
+    cyberPurple: '#6366F1',
+    cyberGlow: 'rgba(59, 130, 246, 0.1)',
+  },
+  spacing: {
+    xxs: 4,
+    xs: 8,
+    sm: 12,
+    md: 16,
+    lg: 20,
+    xl: 24,
+    xxl: 32,
+    xxxl: 48,
+  },
+  typography: {
+    hero: 34,
+    h1: 28,
+    h2: 22,
+    h3: 18,
+    body: 16,
+    bodySmall: 14,
+    caption: 12,
+  },
+  radius: {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    xxl: 20,
+    pill: 999,
+  },
+  shadows: {
+    soft: {
+      shadowColor: '#000000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.05,
+      shadowRadius: 10,
+      elevation: 3,
+    },
+  },
+};
+
+

src/theme/useTheme.ts

@@ -0,0 +1,3 @@
+import { useThemeContext } from './ThemeContext';
+
+export const useTheme = () => useThemeContext();