proposal-system/web/src/theme.ts

import { createTheme } from '@mui/material/styles';

// Sea Haven Ops design system — flat, dense, border-driven enterprise UI.
// Neutral navy/slate/gray structure; action-blue #2563EB is the only brand accent.
// Tokens mirror the Sea Haven Ops design bundle (tokens/colors.css, spacing.css, typography.css).
export const theme = createTheme({
  palette: {
    primary: {
      main: '#2563EB', // action blue — primary buttons, links, selected
      light: '#3B82F6',
      dark: '#1D4ED8', // contained-button hover/pressed
      contrastText: '#FFFFFF',
    },
    secondary: {
      main: '#4B5563', // slate-600
      light: '#6B7280',
      dark: '#374151',
      contrastText: '#FFFFFF',
    },
    success: {
      main: '#16A34A',
      light: '#DCFCE7',
      dark: '#166534',
      contrastText: '#FFFFFF',
    },
    warning: {
      main: '#D97706', // orange — Urgent
      light: '#FFEDD5',
      dark: '#9A3412',
      contrastText: '#FFFFFF',
    },
    error: {
      main: '#DC2626', // red — Emergency / overdue / destructive
      light: '#FEE2E2',
      dark: '#991B1B',
      contrastText: '#FFFFFF',
    },
    info: {
      main: '#2563EB',
      light: '#DBEAFE',
      dark: '#1E40AF',
      contrastText: '#FFFFFF',
    },
    background: {
      default: '#F3F4F6', // gray-100 page background
      paper: '#FFFFFF',
    },
    text: {
      primary: '#111827', // navy-900
      secondary: '#4B5563', // slate-600
      disabled: '#9CA3AF', // gray-400
    },
    divider: '#E5E7EB', // gray-200
  },

  typography: {
    fontFamily: '"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
    fontSize: 14,
    h4: {
      fontWeight: 700,
      fontSize: '24px',
      lineHeight: 1.25,
      letterSpacing: '-0.02em',
    },
    h5: {
      fontWeight: 600,
      fontSize: '18px',
      lineHeight: 1.3,
    },
    h6: {
      fontWeight: 600,
      fontSize: '16px',
      lineHeight: 1.4,
    },
    subtitle1: {
      fontWeight: 600,
      fontSize: '14px',
      lineHeight: 1.4,
    },
    body1: {
      fontSize: '14px',
      lineHeight: 1.5,
    },
    body2: {
      fontSize: '13px',
      lineHeight: 1.45,
    },
    caption: {
      fontSize: '12px',
      lineHeight: 1.35,
      color: '#6B7280',
    },
    button: {
      fontSize: '14px',
      fontWeight: 600,
      textTransform: 'none' as const,
    },
    overline: {
      fontSize: '11px',
      lineHeight: '16px',
      fontWeight: 700,
      letterSpacing: '0.08em',
      textTransform: 'uppercase' as const,
      color: '#6B7280',
    },
  },

  shape: {
    borderRadius: 6,
  },

  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          fontFeatureSettings: '"tnum"',
          backgroundColor: '#F3F4F6',
        },
      },
    },

    MuiAppBar: {
      defaultProps: {
        elevation: 0,
      },
      styleOverrides: {
        root: {
          backgroundColor: '#111827', // navy-900
          boxShadow: 'none',
          borderRadius: 0,
          borderBottom: '1px solid rgba(255,255,255,0.08)',
        },
      },
    },

    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: '#FFFFFF',
          borderRight: '1px solid #E5E7EB', // border-subtle
          width: 216,
        },
      },
    },

    MuiCard: {
      defaultProps: {
        elevation: 0,
      },
      styleOverrides: {
        // Cards are border-driven — no shadow (overlays only).
        root: {
          border: '1px solid #E5E7EB',
          boxShadow: 'none',
          borderRadius: 8,
        },
      },
    },

    MuiPaper: {
      defaultProps: {
        elevation: 0,
      },
      styleOverrides: {
        root: {
          backgroundImage: 'none',
          borderRadius: 6,
        },
      },
    },

    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          boxShadow: 'none',
          textTransform: 'none' as const,
          fontWeight: 600,
          height: 36,
          paddingLeft: 14,
          paddingRight: 14,
        },
        contained: {
          boxShadow: 'none',
          '&:hover': {
            boxShadow: 'none',
          },
        },
        outlined: {
          borderColor: '#D1D5DB', // border-default
          color: '#111827',
          '&:hover': {
            borderColor: '#9CA3AF', // border-strong
            backgroundColor: '#F9FAFB', // gray-50
          },
        },
      },
    },

    MuiTextField: {
      defaultProps: {
        size: 'small' as const,
      },
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            borderRadius: 6,
          },
        },
      },
    },

    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          minHeight: 38,
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: '#D1D5DB',
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: '#9CA3AF',
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: '#2563EB',
            borderWidth: 2,
          },
        },
        input: {
          fontSize: 14,
          padding: '9px 12px',
        },
      },
    },

    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontSize: 13,
          color: '#6B7280',
          '&.Mui-focused': {
            color: '#2563EB',
          },
        },
      },
    },

    MuiTableHead: {
      styleOverrides: {
        root: {
          '& .MuiTableCell-head': {
            color: '#374151', // slate-700
            fontWeight: 700,
            fontSize: 13,
            paddingTop: 12,
            paddingBottom: 12,
            borderBottom: '1px solid #E5E7EB',
            backgroundColor: '#F9FAFB', // gray-50
            whiteSpace: 'nowrap',
          },
        },
      },
    },

    MuiTableCell: {
      styleOverrides: {
        root: {
          color: '#111827',
          fontSize: 14,
          padding: '12px 14px',
          borderBottom: '1px solid #E5E7EB',
        },
      },
    },

    MuiTableRow: {
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: '#F9FAFB',
          },
        },
      },
    },

    MuiChip: {
      styleOverrides: {
        root: {
          height: 24,
          borderRadius: 6,
          fontSize: 12,
          fontWeight: 700,
        },
        sizeSmall: {
          height: 22,
          fontSize: 12,
        },
        label: {
          paddingLeft: 8,
          paddingRight: 8,
        },
        icon: {
          fontSize: 14,
          marginLeft: 6,
        },
      },
    },

    MuiListItemButton: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          marginLeft: 8,
          marginRight: 8,
          marginBottom: 4,
          color: '#4B5563',
          '&.Mui-selected': {
            backgroundColor: '#EFF6FF', // blue-50
            borderLeft: '3px solid #2563EB',
            color: '#111827',
            '& .MuiListItemIcon-root': {
              color: '#2563EB',
            },
            '&:hover': {
              backgroundColor: '#DBEAFE', // blue-100
            },
          },
          '&:hover': {
            backgroundColor: '#F3F4F6', // gray-100
          },
        },
      },
    },

    MuiListItemIcon: {
      styleOverrides: {
        root: {
          color: '#9CA3AF', // gray-400 — inactive nav icon
          minWidth: 36,
        },
      },
    },

    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          fontSize: 12,
          backgroundColor: '#1F2937', // navy-800
        },
      },
    },
  },
});