proposal-system/web/src/theme.ts

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

export const theme = createTheme({
  palette: {
    primary: {
      main: '#0B4F6C',
      light: '#1B789B',
      dark: '#07384D',
      contrastText: '#FFFFFF',
    },
    secondary: {
      main: '#2563EB',
      light: '#60A5FA',
      dark: '#1D4ED8',
      contrastText: '#FFFFFF',
    },
    success: {
      main: '#2E7D32',
      light: '#E8F5E9',
      dark: '#1B5E20',
      contrastText: '#FFFFFF',
    },
    warning: {
      main: '#EA580C',
      light: '#FFF3E6',
      dark: '#C2410C',
      contrastText: '#FFFFFF',
    },
    error: {
      main: '#DC2626',
      light: '#FEE2E2',
      dark: '#991B1B',
      contrastText: '#FFFFFF',
    },
    info: {
      main: '#0284C7',
      light: '#E0F2FE',
      dark: '#075985',
      contrastText: '#FFFFFF',
    },
    background: {
      default: '#F4F7FA',
      paper: '#FFFFFF',
    },
    text: {
      primary: '#1F2933',
      secondary: '#5B6673',
      disabled: '#9AA4AF',
    },
    divider: '#DDE3E8',
  },

  typography: {
    fontFamily: '"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
    fontSize: 14,
    h4: {
      fontWeight: 600,
      fontSize: '24px',
      lineHeight: 1.25,
      letterSpacing: '-0.01em',
    },
    h5: {
      fontWeight: 600,
      fontSize: '22px',
      lineHeight: 1.3,
      letterSpacing: '-0.01em',
    },
    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: '#5B6673',
    },
    button: {
      fontSize: '13px',
      fontWeight: 600,
      textTransform: 'none' as const,
    },
  },

  shape: {
    borderRadius: 6,
  },

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

    MuiAppBar: {
      defaultProps: {
        elevation: 0,
      },
      styleOverrides: {
        root: {
          backgroundColor: '#07384D',
          boxShadow: 'none',
          borderBottom: '1px solid rgba(255,255,255,0.08)',
        },
      },
    },

    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: '#FBFCFD',
          borderRight: '1px solid #DDE3E8',
        },
      },
    },

    MuiCard: {
      defaultProps: {
        elevation: 0,
      },
      styleOverrides: {
        root: {
          border: '1px solid #DDE3E8',
          boxShadow: '0 1px 2px rgba(16, 24, 40, 0.06)',
          borderRadius: 6,
        },
      },
    },

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

    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          boxShadow: 'none',
          textTransform: 'none' as const,
          fontWeight: 600,
        },
        contained: {
          boxShadow: '0 1px 2px rgba(16, 24, 40, 0.12)',
          '&:hover': {
            boxShadow: '0 2px 4px rgba(16, 24, 40, 0.16)',
          },
        },
        outlined: {
          borderColor: '#B8C7D3',
          '&:hover': {
            borderColor: '#0B4F6C',
            backgroundColor: '#E6F2F8',
          },
        },
      },
    },

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

    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: '#B8C7D3',
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: '#8EA4B5',
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: '#0B4F6C',
            borderWidth: 1,
          },
        },
      },
    },

    MuiTableHead: {
      styleOverrides: {
        root: {
          '& .MuiTableCell-head': {
            color: '#374151',
            fontWeight: 600,
            fontSize: 13,
            paddingTop: 12,
            paddingBottom: 12,
            borderBottom: '1px solid #DDE3E8',
            backgroundColor: '#F8FAFC',
          },
        },
      },
    },

    MuiTableCell: {
      styleOverrides: {
        root: {
          color: '#1F2933',
          fontSize: '13px',
          padding: '11px 12px',
          borderBottom: '1px solid #E8EDF2',
        },
      },
    },

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

    MuiChip: {
      styleOverrides: {
        root: {
          height: 24,
          borderRadius: 5,
          fontSize: 12,
          fontWeight: 600,
        },
        sizeSmall: {
          height: 22,
          fontSize: 12,
        },
      },
    },

    MuiListItemButton: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          marginLeft: 8,
          marginRight: 8,
          marginBottom: 4,
          color: '#374151',
          '&.Mui-selected': {
            backgroundColor: '#E6F2F8',
            borderLeft: '3px solid #0B80B5',
            color: '#1F2933',
            '&:hover': {
              backgroundColor: '#DCECF5',
            },
          },
          '&:hover': {
            backgroundColor: '#F1F5F9',
          },
        },
      },
    },

    MuiListItemIcon: {
      styleOverrides: {
        root: {
          color: '#8A949E',
          minWidth: 36,
        },
      },
    },

    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          fontSize: 12,
          backgroundColor: '#1F2933',
        },
      },
    },
  },
});