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

const backstoryTheme = createTheme({
  palette: {
    primary: {
      main: '#1A2536', // Midnight Blue
      contrastText: '#D3CDBF', // Warm Gray
    },
    secondary: {
      main: '#4A7A7D', // Dusty Teal
      contrastText: '#FFFFFF', // White
    },
    text: {
      primary: '#2E2E2E', // Charcoal Black
      secondary: '#1A2536',//D3CDBF', // Warm Gray
    },
    background: {
      default: '#D3CDBF', // Warm Gray
      paper: '#FFFFFF', // White
    },
    action: {
      active: '#D4A017', // Golden Ochre
      hover: 'rgba(212, 160, 23, 0.1)', // Golden Ochre with opacity
    },
    custom: {
      highlight: '#D4A017', // Golden Ochre
      contrast: '#2E2E2E', // Charcoal Black
    },
  },
  typography: {
    fontFamily: "'Roboto', sans-serif",
    h1: {
      fontSize: '2rem',
      fontWeight: 500,
      color: '#2E2E2E', // Charcoal Black
    },
    body1: {
      fontSize: '1rem',
      color: '#2E2E2E', // Charcoal Black
    },
  },
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          color: '#4A7A7D', // Dusty Teal (your secondary color)
          textDecoration: 'none',
          '&:hover': {
            color: '#D4A017', // Golden Ochre on hover
            textDecoration: 'underline',
          },
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          '&:hover': {
            backgroundColor: 'rgba(212, 160, 23, 0.2)', // Golden Ochre hover
          },
        },
      },
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: '#1A2536', // Midnight Blue
        },
      },
    },
  },
});

export { backstoryTheme };