frontend first version

src/theme/colors.ts

@@ -0,0 +1,180 @@
+// Sentinel App - Captain's Sanctum Theme
+// Elegant nautical style with mint and teal
+
+export const colors = {
+  // Base colors
+  white: '#FFFFFF',
+  black: '#1A2F3A',
+  
+  // Nautical palette
+  nautical: {
+    deepTeal: '#1B4D5C',
+    teal: '#459E9E',
+    seafoam: '#5BB5B5',
+    mint: '#B8E0E5',
+    lightMint: '#E0F2F2',
+    paleAqua: '#F0F8F8',
+    cream: '#F8FCFC',
+    sand: '#F5F8F8',
+    gold: '#D4A853',
+    coral: '#E07070',
+    navy: '#1A3A4A',
+    sage: '#8CA5A5',
+  },
+  
+  // Flow - Captain's Journal
+  flow: {
+    background: '#E8F6F8',
+    backgroundGradientStart: '#D4EEF2',
+    backgroundGradientEnd: '#E8F6F8',
+    cardBackground: '#FFFFFF',
+    cardBorder: '#D4EEF2',
+    primary: '#2A6B7C',
+    secondary: '#3D8B9C',
+    text: '#1A3A4A',
+    textSecondary: '#5A7A8A',
+    accent: '#1B4D5C',
+    archived: '#E8F0F2',
+    archivedText: '#7A9A9A',
+    highlight: '#B8E0E5',
+  },
+  
+  // Vault - Ship's Vault
+  vault: {
+    background: '#1B4D5C',
+    backgroundGradientStart: '#1A3A4A',
+    backgroundGradientEnd: '#2A5A6C',
+    cardBackground: '#234F5F',
+    cardBorder: '#3A6A7A',
+    primary: '#B8E0E5',
+    secondary: '#7AB8C5',
+    text: '#FFFFFF',
+    textSecondary: '#9AC5D0',
+    accent: '#D4EEF2',
+    warning: '#E57373',
+    success: '#6BBF8A',
+  },
+  
+  // Sentinel - Lighthouse Watch
+  sentinel: {
+    background: '#1A3A4A',
+    backgroundGradientStart: '#152F3A',
+    backgroundGradientEnd: '#1B4D5C',
+    cardBackground: '#1F4555',
+    cardBorder: '#2A5A6A',
+    primary: '#B8E0E5',
+    secondary: '#7AB8C5',
+    text: '#FFFFFF',
+    textSecondary: '#9AC5D0',
+    statusNormal: '#6BBF8A',
+    statusWarning: '#E5B873',
+    statusCritical: '#E57373',
+  },
+  
+  // Heritage - Legacy Fleet
+  heritage: {
+    background: '#E8F6F8',
+    backgroundGradientStart: '#D4EEF2',
+    backgroundGradientEnd: '#E8F6F8',
+    cardBackground: '#FFFFFF',
+    cardBorder: '#D4EEF2',
+    primary: '#2A6B7C',
+    secondary: '#5A7A8A',
+    text: '#1A3A4A',
+    textSecondary: '#5A7A8A',
+    accent: '#C9A962',
+    confirmed: '#6BBF8A',
+    pending: '#E5B873',
+  },
+  
+  // Me - Captain's Quarters
+  me: {
+    background: '#E8F6F8',
+    backgroundGradientStart: '#D4EEF2',
+    backgroundGradientEnd: '#E8F6F8',
+    cardBackground: '#FFFFFF',
+    cardBorder: '#D4EEF2',
+    primary: '#2A6B7C',
+    secondary: '#5A7A8A',
+    text: '#1A3A4A',
+    textSecondary: '#5A7A8A',
+    accent: '#3D8B9C',
+    link: '#2A6B7C',
+  },
+};
+
+export const typography = {
+  fontFamily: {
+    regular: 'System',
+    medium: 'System',
+    bold: 'System',
+    serif: 'Georgia',
+    mono: 'Menlo',
+  },
+  fontSize: {
+    xs: 11,
+    sm: 13,
+    base: 15,
+    md: 17,
+    lg: 20,
+    xl: 24,
+    xxl: 32,
+    hero: 40,
+  },
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.75,
+  },
+  letterSpacing: {
+    tight: -0.5,
+    normal: 0,
+    wide: 1,
+    wider: 2,
+    widest: 4,
+  },
+};
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  base: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+};
+
+export const borderRadius = {
+  sm: 8,
+  md: 12,
+  lg: 20,
+  xl: 28,
+  xxl: 36,
+  full: 9999,
+};
+
+// Nautical shadows
+export const shadows = {
+  soft: {
+    shadowColor: '#1A3A4A',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 16,
+    elevation: 4,
+  },
+  medium: {
+    shadowColor: '#1A3A4A',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.1,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  glow: {
+    shadowColor: '#2A6B7C',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.25,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+};