text: export default {
    // example colors with dark mode
    colors: {
      text: '#343D48', // body color and primary color
      text_secondary: '#02073E', // secondary body color
      heading: '#0F2137', // primary heading color
      heading_secondary: '#0F2137', // heading color
      background: '#FFFFFF', // body background color
      background_secondary: '#F9FBFD', // secondary background color
      border_color: '#E5ECF4', // border color
      yellow: '#FFA740', // border color
      primary: '#EA3A60', // primary button and link color
      secondary: '#2563FF', // secondary color - can be used for hover states
      muted: '#E4E4E4', // muted color
      accent: '#609', // a contrast color for emphasizing UI
  
      // highlight	a background color for highlighting text
      modes: {
        dark: {
          text: '#fff',
          background: '#000',
          primary: '#0cf',
          secondary: '#09c',
          muted: '#111',
        },
      },
    },
    breakpoints: [
      '480px',
      '640px',
      '768px',
      '1024px',
      '1220px',
      '1366px',
      '1620px',
    ],
    fonts: {
      body: "'DM Sans', sans-serif",
      heading: "'DM Sans', sans-serif",
    },
    fontSizes: [12, 15, 16, 18, 20, 22, 24, 28, 32, 36, 42, 48, 52, 64],
    fontWeights: {
      body: 'normal',
      heading: 500,
      bold: 700,
    },
    lineHeights: {
      body: 1.8,
      heading: 1.5,
    },
    letterSpacings: {
      body: 'normal',
      caps: '0.2em',
      heading: '-0.5px',
    },
    space: [0, 5, 10, 15, 20, 25, 30, 50, 80, 100, 120, 150],
    // variants can use custom, user-defined names
    layout: {
      container: {
        maxWidth: [
          '100%',
          null,
          null,
          '780px',
          '1020px',
          '1200px',
          null,
          '1310px',
        ],
        px: [4, 6],
      },
      header: {
        color: '#02073E',
        fontWeight: 'normal',
        py: 3,
        position: 'absolute',
        width: '100%',
      },
      toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      },
      main: {},
    },
    section: {
      keyFeature: {
        pt: [8, null, 9, null, null, 10],
        pb: ['90px', null, 9, null, null, 10, null, '165px'],
      },
      feature: {
        pb: [8, null, 9, null, null, 10, null, '170px'],
      },
      news: {
        pb: [8, null, 9, null, null, 10, null, '170px'],
      },
      coreFeature: {
        pb: [8, null, 9, null, null, 10, null, '170px'],
        overflow: 'hidden',
      },
      testimonial: {
        pt: [8, null, 8, '70px', null, 8, null, '145px'],
        pb: ['90px', null, 9, null, null, 10, null, '190px'],
        overflow: 'hidden',
      },
      services: {
        pb: ['90px', null, 9, null, null, 10, null, '150px'],
      },
      pricing: {
        pt: [8, null, 9, null, null, 10, null, '180px'],
        pb: ['90px', null, 9, null, null, 10, null, '180px'],
      },
    },
    sectionHeader: {
      width: ['100%', null, '540px'],
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      mt: ['-3px', null, -1],
      marginBottom: ['50px', null, '60px', null, null, '65px', null, '80px'],
      mx: 'auto',
      title: {
        fontSize: ['24px', null, '28px', null, null, '32px', null, '36px'],
        color: 'heading',
        lineHeight: [1.3, null, null, 1.25],
        textAlign: 'center',
        fontWeight: '700',
        letterSpacing: '-.5px',
      },
  
      subTitle: {
        fontSize: [0, '13px', null, '14px'],
        color: 'primary',
        textAlign: 'center',
        letterSpacing: ['1.5px', null, '2px'],
        textTransform: 'uppercase',
        fontWeight: '700',
        mb: 2,
        lineHeight: 1.5,
      },
    },
    text: {
      heading: {
        fontFamily: 'heading',
        lineHeight: 'heading',
        fontWeight: 'heading',
        fontSize: [4],
        letterSpacing: '-.55px',
        color: 'heading',
      },
      heroPrimary: {
        color: 'heading',
        fontSize: [
          '32px',
          '36px',
          '42px',
          '40px',
          '42px',
          '52px',
          '58px',
          '58px',
        ],
        lineHeight: [1.3, null, null, null, null, 1.2],
        fontWeight: 500,
        mb: [4, null, null, null, null, 5],
      },
      heroSecondary: {
        fontSize: [2, null, '17px', null, null, '19px', 4],
        lineHeight: [1.9, null, null, 2],
        fontWeight: 'body',
        mb: 5,
        px: [0, null, 5, 6, null, 8, 9],
        color: 'heading',
      },
      title: {
        // extends the text.heading styles
        variant: 'text.heading',
        fontWeight: 'bold',
        fontSize: [3, null, 4],
        lineHeight: 1.25,
        mb: 1,
      },
      lead: {
        fontSize: 40,
        fontFamily: 'DM Sans',
        fontWeight: '500',
        lineHeight: '60px',
        letterSpacing: '-1.5px',
        color: '#0F2137',
      },
      muted: {
        lineHeight: '26px',
        color: 'muted',
      },
      secondary: {
        fontWeight: 500,
        color: '#00A99D',
        lineHeight: '40px',
      },
    },
    links: {
      default: {
        cursor: 'pointer',
      },
      bold: {
        fontWeight: 'bold',
      },
      nav: {
        display: ['none', null, 'inline-block'],
        px: 25,
        fontWeight: 'normal',
      },
      blog: {
        display: 'block',
        px: 0,
        color: 'inherit',
        textDecoration: 'none',
        fontSize: 'inherit',
        transition: 'color 0.25s',
        '&:hover': {
          color: 'primary',
        },
      },
      footer: {
        display: 'block',
        px: 0,
        color: 'inherit',
        textDecoration: 'none',
      },
      logo: {
        display: 'flex',
      },
    },
    images: {
      avatar: {
        width: 48,
        height: 48,
        borderRadius: 99999,
      },
    },
    // variants for buttons
    buttons: {
      menu: {
        display: [null, null, 'none'],
      }, // default variant for MenuButton
      // you can reference other values defined in the theme
      defaultBtn: {
        borderRadius: '45px',
        fontSize: ['14px', null, null, 2],
        letterSpacings: '-0.15px',
        padding: ['12px 20px', null, '15px 30px'],
        fontFamily: 'body',
        cursor: 'pointer',
        lineHeight: 1.2,
        transition: 'all 0.25s',
        fontWeight: 500,
        '&:focus': {
          outline: 0,
        },
      },
      primary: {
        variant: 'buttons.defaultBtn',
        color: 'white',
        bg: 'primary',
        '&:hover': {
          boxShadow: 'rgba(233, 76, 84, 0.57) 0px 9px 20px -5px',
        },
      },
      whiteButton: {
        variant: 'buttons.defaultBtn',
        color: 'heading_secondary',
        bg: 'white',
        '&:hover': {
          boxShadow: 'rgba(0, 0, 0, 0.5) 0px 12px 24px -10px',
        },
      },
      secondary: {
        variant: 'buttons.defaultBtn',
        border: '2px solid',
        borderColor: 'primary',
        color: 'primary',
        bg: 'transparent',
        padding: ['10px 15px', null, '15px 30px'],
        '&:hover': {
          color: 'white',
          bg: 'primary',
        },
      },
      textButton: {
        variant: 'buttons.defaultBtn',
        backgroundColor: 'transparent',
        cursor: 'pointer',
        color: 'white',
        svg: {
          fontSize: [4, 6],
          mr: 2,
        },
      },
    },
    cards: {
      primary: {
        padding: 2,
        borderRadius: 4,
      },
      offer: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        flex: ['1 1 calc(50% - 16px)', '1 1 20%'],
        minHeight: 130,
        m: 2,
        background: '#FFFFFF',
        border: '1px solid #EDEFF6',
        borderRadius: 5,
      },
      featureCard: {
        display: 'flex',
        alignItems: 'flex-start',
        flexDirection: 'row',
        p: 3,
      },
    },
    forms: {
      label: {
        fontSize: 1,
        fontWeight: 'bold',
      },
      input: {
        borderRadius: 8,
        borderColor: 'border_color',
        height: 60,
        '&:focus': {
          borderColor: 'primary',
          boxShadow: (t) => `0 0 0 2px ${t.colors.primary}`,
          outline: 'none',
        },
      },
    },
  
    badges: {
      primary: {
        color: 'background',
        bg: '#28A5FF',
        borderRadius: 30,
        p: '3px 11px',
        fontSize: 1,
        letterSpacing: '-0.5px',
      },
      outline: {
        color: 'primary',
        bg: 'transparent',
        boxShadow: 'inset 0 0 0 1px',
      },
    },
  
    styles: {
      // To add base, top-level styles to the <body> element, use theme.styles.root.
      root: {
        fontFamily: 'body',
        lineHeight: 'body',
        fontWeight: 'body',
        fontSmoothing: 'antialiased',
        // Modal Global Style
        '.modal-video-close-btn': {
          cursor: 'pointer',
        },
        '.modal-video-movie-wrap': {
          margin: 6,
          width: 'auto',
        },
      },
      // Divider styles
      hr: {
        border: 0,
        borderBottom: '1px solid',
        borderColor: '#D9E0E7',
      },
      // also you can use other HTML elements style here
      ul: {
        listStyle: 'none',
      },
      srOnly: {
        border: '0 !important',
        clip: 'rect(1px, 1px, 1px, 1px) !important',
        clipPath: 'inset(50%) !important',
        height: '1px !important',
        margin: '-1px !important',
        overflow: 'hidden !important',
        padding: '0 !important',
        position: 'absolute !important',
        width: '1px !important',
        whiteSpace: 'nowrap !important',
      },
    },
  };
  