src/styles/GlobalStyles.js

import { GlobalStyles as MuiGlobalStyles } from '@mui/material';
import { fadeIn } from './animations'; // Import the missing fadeIn animation

const GlobalStyles = () => (
  <MuiGlobalStyles
    styles={(theme) => ({
      html: {
        scrollBehavior: 'smooth',
      },
      body: {
        margin: 0,
        padding: 0,
        transition: 'all 0.3s ease',
        backgroundColor: theme.palette.background.default,
        color: theme.palette.text.primary,
        fontFamily: theme.typography.fontFamily,
        lineHeight: '1.6',
        '&.dark-mode': {
          backgroundColor: theme.palette.background.default,
          color: theme.palette.text.primary,
        },
        '&.light-mode': {
          backgroundColor: theme.palette.background.default,
          color: theme.palette.text.primary,
        },
      },
      a: {
        color: theme.palette.primary.main,
        textDecoration: 'none',
        transition: 'color 0.3s ease',
        '&:hover': {
          textDecoration: 'underline',
          color: theme.palette.primary.dark,
        },
      },
      'h1, h2, h3, h4, h5, h6': {
        fontWeight: 700,
        marginTop: theme.spacing(3),
        marginBottom: theme.spacing(2),
      },
      '::selection': {
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText,
      },
      '.spiritual-highlight': {
        position: 'relative',
        '&::after': {
          content: '""',
          position: 'absolute',
          bottom: -2,
          left: 0,
          width: '100%',
          height: 2,
          background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
          transform: 'scaleX(0)',
          transition: 'transform 0.3s ease',
        },
        '&:hover::after': {
          transform: 'scaleX(1)',
        },
      },
      '.page-transition': {
        animation: `${fadeIn} 0.5s ease forwards`,
      },
    })}
  />
);

export default GlobalStyles;